/* ============================================================
   VPSThai 2026 — indigo ink on warm paper, saffron accent
   Display: Space Grotesk · Body: IBM Plex Sans · Data: IBM Plex Mono
   ============================================================ */

:root{
  --paper:      oklch(0.975 0.008 85);
  --paper-soft: oklch(0.945 0.014 85);
  --ink:        oklch(0.27 0.055 275);
  --ink-muted:  oklch(0.45 0.035 275);
  --accent:     oklch(0.74 0.155 65);   /* saffron / marigold */
  --accent-deep:oklch(0.62 0.16 55);
  --night:      oklch(0.23 0.05 275);   /* dark indigo section */
  --night-soft: oklch(0.30 0.055 275);
  --line:       oklch(0.85 0.02 85);

  --font-display:"Space Grotesk",sans-serif;
  --font-body:"IBM Plex Sans",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;

  --dur-fast:150ms;
  --dur-med:280ms;
  --ease:cubic-bezier(.22,.9,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:1.0625rem;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

.container{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-0.015em}
h2{font-size:clamp(1.75rem,3.5vw,2.5rem)}
h3{font-size:1.15rem}

.section-head{max-width:56ch;margin-bottom:clamp(2rem,5vw,3.25rem)}
.section-head p{color:var(--ink-muted);margin-top:.6rem;font-size:1.1rem}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklch,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.25rem}
.brand-logo{height:2.1rem;width:auto}
.nav-menu{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-menu a{
  text-decoration:none;font-weight:500;font-size:.95rem;
  border-bottom:2px solid transparent;padding-block:.2rem;
  transition:border-color var(--dur-fast) var(--ease);
}
.nav-menu a:hover{border-color:var(--accent)}
.nav-cta{
  background:var(--ink);color:var(--paper)!important;
  padding:.55rem 1.1rem!important;border-radius:999px;border:none!important;
  transition:background var(--dur-fast) var(--ease);
}
.nav-cta:hover{background:var(--accent-deep)}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:22px;background:var(--ink);margin:5px auto;border-radius:2px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,8vw,6rem) clamp(3rem,7vw,5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.eyebrow{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted);
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;
}
.pulse-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 oklch(0.74 0.155 65 / .5);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 oklch(0.74 0.155 65 / .5)}
  70%{box-shadow:0 0 0 10px oklch(0.74 0.155 65 / 0)}
  100%{box-shadow:0 0 0 0 oklch(0.74 0.155 65 / 0)}
}
.hero h1{font-size:clamp(2.6rem,6vw,4.3rem);font-weight:700}
.hero h1 em{font-style:normal;color:var(--accent-deep)}
.hero-sub{margin-top:1.4rem;max-width:52ch;color:var(--ink-muted);font-size:1.125rem}
.hero-actions{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;
  padding:.8rem 1.6rem;border-radius:999px;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--night)}
.btn-primary:hover{background:var(--accent-deep);color:var(--paper)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

.hero-stats{display:flex;gap:clamp(1.5rem,4vw,3rem);margin-top:2.75rem;border-top:1px solid var(--line);padding-top:1.5rem}
.hero-stats dt{font-family:var(--font-mono);font-size:1.5rem;font-weight:600}
.hero-stats dd{font-size:.85rem;color:var(--ink-muted)}

/* signature map */
.hero-map{min-width:0}
.hero-map svg{width:100%;height:auto;color:var(--ink)}
.hero-map figcaption{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-muted);text-align:center;margin-top:.5rem}
.route{stroke-dasharray:5 7;animation:flow 3.2s linear infinite;opacity:.75}
@keyframes flow{to{stroke-dashoffset:-48}}
.cities circle{fill:var(--ink)}
.cities text{font-family:var(--font-mono);font-size:11px;fill:var(--ink-muted)}
.hub-ring{fill:none;stroke:var(--accent);stroke-width:2;animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{r:10;opacity:1}100%{r:34;opacity:0}}
.hub-label{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.14em;fill:var(--ink)}

/* ---------- why ---------- */
.why{padding-block:clamp(3rem,7vw,5.5rem);background:var(--paper-soft)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.why-card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.6rem 1.5rem;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.why-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.why-card svg{width:26px;height:26px;fill:var(--accent-deep);margin-bottom:.9rem}
.why-card p{color:var(--ink-muted);font-size:.97rem;margin-top:.45rem}

/* ---------- plans ---------- */
.plans{padding-block:clamp(3rem,7vw,5.5rem)}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.plan-grid-3{max-width:900px}
.plan{
  position:relative;border:1px solid var(--line);border-radius:14px;
  padding:1.75rem 1.5rem;background:var(--paper);
  display:flex;flex-direction:column;gap:1.1rem;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.plan:hover{border-color:var(--ink);box-shadow:0 8px 24px oklch(0.27 0.055 275 / .08)}
.plan header{display:flex;justify-content:space-between;align-items:baseline}
.plan-name{font-family:var(--font-display);font-weight:700;font-size:1.35rem}
.plan-price{font-family:var(--font-mono);font-weight:600;font-size:1.35rem}
.plan-price small{font-size:.8rem;color:var(--ink-muted);font-weight:400}
.plan ul{list-style:none;font-family:var(--font-mono);font-size:.92rem;color:var(--ink-muted);display:grid;gap:.45rem}
.plan ul li::before{content:"— ";color:var(--accent-deep)}
.btn-plan{
  margin-top:auto;text-align:center;border:1.5px solid var(--ink);
  padding:.65rem 1rem;font-size:.95rem;
}
.btn-plan:hover{background:var(--ink);color:var(--paper);transform:none}
.plan-featured{border-color:var(--accent);border-width:2px}
.plan-flag{
  position:absolute;top:-0.8rem;left:1.25rem;
  background:var(--accent);color:var(--night);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .7rem;border-radius:999px;
}
.plans-dedicated{background:var(--paper-soft)}

/* ---------- infrastructure (dark) ---------- */
.infra{background:var(--night);color:oklch(0.94 0.01 85);padding-block:clamp(3.5rem,8vw,6rem)}
.infra .section-head p{color:oklch(0.75 0.02 275)}
.infra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.infra-grid article{
  background:var(--night-soft);border-radius:14px;padding:1.5rem;
  border:1px solid oklch(0.38 0.05 275);
}
.infra-grid h3{color:var(--accent);margin-bottom:.5rem}
.infra-grid p{font-size:.97rem;color:oklch(0.82 0.015 275)}

/* ---------- clients ---------- */
.clients{padding-block:clamp(3rem,7vw,5rem)}
.country-list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.country-list li{
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  padding:.45rem 1rem;font-size:.95rem;
}

/* ---------- cta ---------- */
.cta{padding-block:clamp(3rem,7vw,5.5rem);background:linear-gradient(120deg,oklch(0.9 0.06 70),oklch(0.86 0.09 60))}
.cta-inner{text-align:center;display:grid;justify-items:center;gap:.75rem}
.cta .hero-actions{margin-top:1.25rem;justify-content:center}
.cta p{color:var(--ink-muted)}

/* ---------- footer ---------- */
.footer{background:var(--night);color:oklch(0.8 0.015 275);padding-block:3.5rem 0;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2rem;padding-bottom:2.5rem}
.footer-logo{height:2rem;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1)}
.footer h4{font-family:var(--font-display);color:oklch(0.95 0.01 85);margin-bottom:.8rem;font-size:1rem}
.footer ul{list-style:none;display:grid;gap:.45rem}
.footer a{text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid oklch(0.35 0.045 275);padding-block:1.4rem;font-size:.85rem;color:oklch(0.62 0.02 275)}

/* ---------- forms (order & contact pages) ---------- */
.page-hero{padding-block:clamp(2.5rem,6vw,4rem) clamp(1.5rem,3vw,2rem)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700}
.form-section-block{padding-block:1rem clamp(3rem,7vw,5rem)}
.order-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}

.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1.25rem;
}
.form-card h2{font-size:1.35rem;margin-top:.5rem}
.form-card h2:first-child{margin-top:0}

.field{display:grid;gap:.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{font-weight:600;font-size:.95rem}
.field .hint{font-weight:400;color:var(--ink-muted)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;
  padding:.7rem .9rem;width:100%;
  transition:border-color var(--dur-fast) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent-deep);
  box-shadow:0 0 0 3px oklch(0.74 0.155 65 / .2);
}
.field textarea{resize:vertical}

.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.check input{width:1.1rem;height:1.1rem;margin-top:.2rem;accent-color:var(--accent-deep)}
.check a{color:var(--accent-deep)}

.btn-submit{border:none;cursor:pointer;font:inherit;font-weight:600;justify-self:start;padding:.85rem 2rem}
.hint{font-size:.85rem;color:var(--ink-muted)}

/* plan picker */
.plan-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem}
.plan-option{cursor:pointer}
.plan-option input{position:absolute;opacity:0;pointer-events:none}
.plan-option-body{
  display:grid;gap:.3rem;border:1.5px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;height:100%;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.plan-option:hover .plan-option-body{border-color:var(--ink)}
.plan-option input:checked + .plan-option-body{
  border-color:var(--accent-deep);background:oklch(0.95 0.03 70);
}
.plan-option input:focus-visible + .plan-option-body{outline:3px solid var(--accent);outline-offset:2px}
.plan-option-head{display:flex;justify-content:space-between;align-items:baseline}
.plan-option-head strong{font-family:var(--font-display);font-size:1.05rem}
.plan-option-head em{font-style:normal;font-family:var(--font-mono);font-weight:600}
.plan-option-specs{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-muted)}

/* aside */
.order-aside{display:grid;gap:1rem;position:sticky;top:5.5rem}
.aside-card{background:var(--paper-soft);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem}
.aside-card h3{margin-bottom:.6rem}
.aside-card p{font-size:.95rem;color:var(--ink-muted)}
.aside-card p+p{margin-top:.5rem}
.aside-card a{color:var(--accent-deep)}
.tick-list{list-style:none;display:grid;gap:.45rem;font-size:.95rem;color:var(--ink-muted)}
.tick-list li::before{content:"✓ ";color:var(--accent-deep);font-weight:600}
.step-list{padding-left:1.2rem;display:grid;gap:.5rem;font-size:.95rem;color:var(--ink-muted)}

/* notices */
.notice{border-radius:12px;padding:1.25rem 1.5rem}
.notice ul{list-style:none;display:grid;gap:.3rem}
.notice-error{background:oklch(0.95 0.03 25);border:1.5px solid oklch(0.6 0.18 25);color:oklch(0.4 0.15 25)}
.notice-success{background:oklch(0.95 0.05 150);border:1.5px solid oklch(0.6 0.13 155)}
.notice-success h2{margin-bottom:.5rem}
.notice-success p+p{margin-top:.75rem}

/* honeypot — hidden from humans, visible to naive bots */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:1px;overflow:hidden}

/* ---------- faq ---------- */
.faq-layout{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.faq-nav{position:sticky;top:5.5rem;display:grid;gap:.25rem}
.faq-nav a{
  text-decoration:none;font-size:.95rem;color:var(--ink-muted);
  padding:.45rem .8rem;border-left:2px solid var(--line);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.faq-nav a:hover{color:var(--ink);border-color:var(--accent)}
.faq-groups{display:grid;gap:clamp(2rem,5vw,3rem);min-width:0}
.faq-group{display:grid;gap:.75rem}
.faq-group h2{font-size:1.5rem;margin-bottom:.25rem}
.faq{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color var(--dur-fast) var(--ease);
}
.faq[open]{border-color:var(--accent-deep)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.25rem;font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.3rem;font-weight:400;
  color:var(--accent-deep);flex-shrink:0;line-height:1;
  transition:rotate var(--dur-fast) var(--ease);
}
.faq[open] summary::after{rotate:45deg}
.faq summary:hover{color:var(--accent-deep)}
.faq-body{padding:0 1.25rem 1.15rem;color:var(--ink-muted);font-size:.98rem}
.faq-body p+p,.faq-body ul+p,.faq-body p+ul{margin-top:.6rem}
.faq-body ul{padding-left:1.2rem;display:grid;gap:.35rem}
.faq-body a{color:var(--accent-deep)}
.mono-list{font-family:var(--font-mono);font-size:.85rem;list-style:none!important;padding-left:0!important}
.mono-list li::before{content:"— ";color:var(--accent-deep)}

/* ---------- content pages (about, policy, payment) ---------- */
.prose-block{max-width:820px}
.prose-block>h2{margin-bottom:1rem}
.prose-block>p{color:var(--ink-muted);margin-bottom:1rem;max-width:70ch}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem}
.reasons-grid,.steps-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.aside-card h3 .policy-num{margin-right:.6rem}
.aside-card a{color:var(--accent-deep)}

.callout{
  border:2px solid var(--accent);border-radius:14px;
  background:oklch(0.95 0.03 70);padding:1.5rem 1.75rem;margin-bottom:2.5rem;
}
.callout p{margin:0}
.callout p+p{margin-top:.5rem;color:var(--ink-muted)}
.callout strong{font-family:var(--font-display);font-size:1.15rem}

.policy-article{padding:1.75rem 0;border-bottom:1px solid var(--line)}
.policy-article:last-of-type{border-bottom:none}
.policy-article h2{font-size:1.35rem;margin-bottom:.75rem;display:flex;align-items:center}
.policy-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7em;height:1.7em;margin-right:.6em;flex-shrink:0;
  border-radius:50%;background:var(--accent);color:var(--night);
  font-family:var(--font-mono);font-size:.75em;font-weight:600;
}
.policy-article p{color:var(--ink-muted);margin-bottom:.75rem;max-width:70ch}
.policy-article ul{padding-left:1.3rem;display:grid;gap:.4rem;color:var(--ink-muted);font-size:.98rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mv-grid{grid-template-columns:1fr}
  .faq-layout{grid-template-columns:1fr}
  .faq-nav{position:static;display:flex;flex-wrap:wrap;gap:.5rem}
  .faq-nav a{border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem}
  .order-layout{grid-template-columns:1fr}
  .order-aside{position:static}
  .field-row{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-map{max-width:520px;margin-inline:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-toggle{display:block}
  .nav-menu{
    display:none;position:absolute;top:4.25rem;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:1rem clamp(1.25rem,4vw,2.5rem) 1.5rem;
  }
  .nav-menu.is-open{display:flex}
  .nav-menu li{width:100%}
  .nav-menu a{display:block;padding:.7rem 0;border-bottom:none}
  .nav-cta{margin-top:.75rem;text-align:center}
  .hero-stats{flex-wrap:wrap;gap:1.25rem 2rem}
  .footer-grid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}