/* ============================================================
   NEXORA AI & IT SOLUTIONS — Design System
   Palette sampled from the company logo:
     deep navy structure, teal facets, one cyan glow node.
   The cyan is reserved for "live / active" states only.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --ink:     #08192B;   /* deepest navy — dark sections, headings */
  --navy:    #123A63;   /* logo wordmark navy */
  --navy-2:  #0E2C4C;   /* navy mid-step for gradients */
  --teal:    #1F7A8C;   /* logo facet teal */
  --teal-lt: #4FB3B8;
  --cyan:    #35E0DC;   /* the glow node — ACTIVE STATE ONLY */
  --paper:   #F1F5F8;   /* cool off-white page ground */
  --card:    #FFFFFF;
  --slate:   #56697C;   /* secondary text */
  --slate-lt:#8698A9;
  --line:    #DBE4EB;
  --line-dk: rgba(255,255,255,.14);
  --wa:      #25D366;   /* WhatsApp brand, used only on WA affordances */

  /* ---- type ---- */
  --display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Noto Sans SC', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;

  /* ---- rhythm ---- */
  --hdr-h:  84px;
  --shell:  1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --sect:   clamp(72px, 9vw, 128px);
  --r-sm: 8px; --r: 14px; --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(8,25,43,.06), 0 4px 12px rgba(8,25,43,.05);
  --shadow:    0 2px 4px rgba(8,25,43,.05), 0 18px 44px -14px rgba(8,25,43,.18);
  --shadow-lg: 0 30px 80px -28px rgba(8,25,43,.42);
}

*,*::before,*::after{ box-sizing:border-box; }
/* The browser's own [hidden] rule is a UA style, so ANY author `display`
   declaration beats it — .tier-grid{display:grid} was keeping hidden pricing
   panes on screen. This puts the attribute back in charge. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 14px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[lang="zh"] body{ line-height:1.8; letter-spacing:.005em; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Quality floor: visible keyboard focus everywhere */
:focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:4px; }
.dark :focus-visible{ outline-color:var(--cyan); }

/* ---- layout primitives ---- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect); position:relative; }
.dark{ background:var(--ink); color:#DDE7EF; }
.dark h2,.dark h3{ color:#fff; }

/* ---- type scale ---- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-.025em; margin:0; line-height:1.08; }
h1{ font-size:clamp(2.4rem, 5.6vw, 4.15rem); font-weight:800; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.85rem); }
h3{ font-size:clamp(1.1rem, 1.6vw, 1.32rem); letter-spacing:-.015em; line-height:1.3; }
p{ margin:0; }
.lede{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--slate); line-height:1.72; }
.dark .lede{ color:#9FB4C6; }

/* The mono face marks machine-generated / system content —
   stage labels, prices, token counts, registration numbers. */
.eyebrow{
  font-family:var(--mono); font-size:.705rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal);
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.15rem;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.55; flex:none; }
.dark .eyebrow{ color:var(--cyan); }
html[lang="zh"] .eyebrow{ letter-spacing:.14em; }

.sect-head{ max-width:660px; margin-bottom:clamp(40px,5vw,60px); }
.sect-head p{ margin-top:1.15rem; }

/* ============ HEADER ============ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(241,245,248,.72); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.hdr.is-stuck{ border-bottom-color:var(--line); background:rgba(241,245,248,.94); }
.hdr-in{ display:flex; align-items:center; gap:1.4rem; height:var(--hdr-h); }
/* The source art is cropped to the ink, so this height is the real logo height.
   multiply drops the white JPEG ground onto the paper cleanly. */
.brand{ display:flex; align-items:center; flex:none; }
.brand-full{ height:42px; width:auto; }
.brand-mark{ display:none; height:36px; width:auto; }
.nav{ display:flex; gap:1.5rem; margin-left:auto; }
.nav a{
  font-size:.885rem; font-weight:500; color:var(--slate); position:relative;
  padding-block:6px; transition:color .2s; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--teal); transition:right .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{ color:var(--ink); } .nav a:hover::after{ right:0; }
/* duplicated by the header buttons on desktop; only the mobile menu shows them */
.nav-contact,.nav-login{ display:none; }
/* Desktop's tightest band: five nav labels (BM's are the longest), the
   language control and two header buttons. Labels never wrap; the spacing
   gives way instead, until the menu takes over at 1100px. */
@media (min-width:1101px) and (max-width:1240px){
  .hdr-in{ gap:1rem; }
  .nav{ gap:1rem; }
}

/* ---- language control ----
   Deliberately not styled like the nav: it is a setting, not a destination.
   A hairline rule separates it, and the globe + caret mark it as a control. */
.lang{ position:relative; flex:none; }
.lang::before{
  content:''; position:absolute; left:-.7rem; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--line);
}
.lang-trigger{
  display:flex; align-items:center; gap:.42rem; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px 8px 11px; color:var(--slate);
  transition:border-color .2s, color .2s, box-shadow .2s, background .2s;
}
.lang-trigger:hover{ border-color:#B9CBD9; color:var(--ink); box-shadow:var(--shadow-sm); }
.lang-trigger[aria-expanded="true"]{ border-color:var(--navy); color:var(--navy); background:var(--card); }
.lang-globe{ color:var(--teal); flex:none; }
.lang-cur{
  font-family:var(--mono); font-size:.735rem; font-weight:500; letter-spacing:.06em;
  color:var(--navy); line-height:1; min-width:1.6em; text-align:left;
}
.lang-caret{ opacity:.5; transition:transform .25s cubic-bezier(.16,1,.3,1); flex:none; }
.lang-trigger[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); opacity:.9; }

.lang-menu{
  position:absolute; top:calc(100% + 9px); right:0; z-index:90;
  min-width:190px; margin:0; padding:5px; list-style:none;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .19s, transform .19s cubic-bezier(.16,1,.3,1), visibility .19s;
}
.lang-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{
  width:100%; display:flex; align-items:center; gap:.7rem; text-align:left;
  background:none; border:0; cursor:pointer; padding:9px 11px; border-radius:8px;
  font-size:.885rem; color:var(--slate); transition:background .16s, color .16s;
}
.lang-menu button span{ flex:1; }
.lang-menu button svg{ width:13px; height:13px; flex:none; opacity:0; color:var(--teal); transition:opacity .16s; }
.lang-menu button:hover{ background:var(--paper); color:var(--ink); }
.lang-menu button[aria-selected="true"]{ color:var(--navy); font-weight:600; }
.lang-menu button[aria-selected="true"] svg{ opacity:1; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-weight:600; font-size:.94rem; line-height:1;
  padding:15px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .18s, box-shadow .22s, background .22s, color .22s;
  white-space:nowrap;
}
.btn svg{ flex:none; }
.btn-wa{ background:var(--wa); color:#04220F; box-shadow:0 6px 18px -6px rgba(37,211,102,.6); }
.btn-wa:hover{ background:#1FBE5A; transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(37,211,102,.66); }
.btn-solid{ background:var(--navy); color:#fff; }
.btn-solid:hover{ background:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:var(--line); color:var(--navy); background:var(--card); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.dark .btn-ghost{ background:transparent; border-color:var(--line-dk); color:#fff; }
.dark .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-sm{ padding:11px 18px; font-size:.855rem; }

/* ============ HERO ============ */
.hero{ padding-top:calc(var(--hdr-h) + clamp(44px,7vw,86px)); padding-bottom:var(--sect); position:relative; overflow:hidden; }
/* faint node-network wash echoing the logo's glowing hub */
.hero::before{
  content:''; position:absolute; top:-22%; right:-14%; width:900px; height:900px; pointer-events:none;
  background:radial-gradient(circle, rgba(53,224,220,.16) 0%, rgba(31,122,140,.09) 38%, transparent 68%);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(40px,5vw,70px); align-items:center; position:relative; }
.hero h1 .accent{
  background:linear-gradient(96deg,var(--teal) 0%,var(--navy) 62%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{ margin-top:1.55rem; max-width:32em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.3rem; }
.hero-note{ font-family:var(--mono); font-size:.735rem; color:var(--slate-lt); margin-top:1.5rem; letter-spacing:.02em; }

/* ---- SSM trust chip ---- */
.chip-ssm{
  display:inline-flex; align-items:center; gap:.55rem; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 8px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--slate);
  box-shadow:var(--shadow-sm); margin-bottom:1.4rem;
}
.chip-ssm b{ color:var(--navy); font-weight:600; }
.chip-ssm .dot{ width:7px; height:7px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 3px rgba(37,211,102,.18); flex:none; margin-left:5px; }

/* ============================================================
   SIGNATURE — the live conversation.
   The product IS a message thread, so the hero runs one
   instead of describing it. The stage rail below is driven by
   the same clock: each message advances the pipeline.
   ============================================================ */
.stage{ position:relative; }
.phone{
  background:var(--card); border-radius:26px; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); overflow:hidden; max-width:392px; margin-inline:auto;
}
.phone-bar{
  display:flex; align-items:center; gap:.7rem; padding:14px 16px;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff;
}
.phone-av{
  width:36px; height:36px; border-radius:50%; flex:none; background:#fff;
  display:grid; place-items:center; overflow:hidden;
}
.phone-av img{ width:76%; height:76%; object-fit:contain; }
.phone-who{ font-size:.87rem; font-weight:600; line-height:1.25; }
.phone-status{ font-family:var(--mono); font-size:.63rem; color:var(--cyan); letter-spacing:.08em; display:flex; align-items:center; gap:5px; }
.phone-status::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:pulse 1.9s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.75)} }

.thread{
  background:#EDE5DB;               /* WhatsApp paper — instantly readable as the real thing */
  background-image:radial-gradient(rgba(8,25,43,.045) 1px, transparent 1px);
  background-size:19px 19px;
  padding:18px 15px; height:404px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:9px;
  scrollbar-width:none;
}
/* Pins the stack to the bottom without justify-content:flex-end, which makes
   overflowing content unreachable above the scroll origin. */
.thread > *:first-child{ margin-top:auto; }
.thread::-webkit-scrollbar{ display:none; }
.msg{
  max-width:83%; padding:9px 13px; border-radius:11px; font-size:.855rem; line-height:1.5;
  box-shadow:0 1px 1px rgba(8,25,43,.13); position:relative;
  animation:pop .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(9px) scale(.97);} to{ opacity:1; transform:none;} }
.msg.them{ align-self:flex-start; background:#fff; border-top-left-radius:3px; }
.msg.us{ align-self:flex-end; background:#D9FDD3; border-top-right-radius:3px; }
.msg .t{ font-family:var(--mono); font-size:.6rem; color:var(--slate-lt); float:right; margin:6px 0 -3px 9px; }
.msg.sys{
  align-self:center; max-width:92%; background:rgba(8,25,43,.055); box-shadow:none;
  font-family:var(--mono); font-size:.645rem; letter-spacing:.05em; color:var(--slate);
  text-align:center; border-radius:7px; padding:5px 11px;
}
.typing{ align-self:flex-start; background:#fff; padding:12px 15px; border-radius:11px; border-top-left-radius:3px; display:flex; gap:4px; box-shadow:0 1px 1px rgba(8,25,43,.13); }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--slate-lt); animation:blink 1.35s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

/* stage rail — lights up in lockstep with the thread */
.rail{ display:flex; gap:5px; margin-top:22px; max-width:392px; margin-inline:auto; }
.rail-node{ flex:1; text-align:center; }
.rail-node .bar{ height:3px; border-radius:2px; background:var(--line); transition:background .5s, box-shadow .5s; }
.rail-node .lb{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.03em; color:var(--slate-lt);
  margin-top:8px; display:block; transition:color .5s; text-transform:uppercase;
  line-height:1.25; hyphens:auto; overflow-wrap:anywhere;
}
.rail-node.on .bar{ background:var(--teal); }
.rail-node.on .lb{ color:var(--navy); font-weight:500; }
.rail-node.live .bar{ background:var(--cyan); box-shadow:0 0 12px rgba(53,224,220,.85); }
.rail-node.live .lb{ color:var(--teal); }
html[lang="zh"] .rail-node .lb{ font-size:.6875rem; letter-spacing:.02em; }

/* ============ WHY US — the cost of replying by hand ============ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.why-cell{ background:var(--card); padding:clamp(26px,3vw,38px); }
.why-cell .fig{ font-family:var(--mono); font-size:clamp(2.1rem,4vw,2.9rem); font-weight:600; color:var(--navy); line-height:1; letter-spacing:-.03em; }
.why-cell .fig sup{ font-size:.42em; color:var(--teal); top:-1.1em; margin-left:2px; }
.why-cell h3{ margin:1.1rem 0 .6rem; }
.why-cell p{ font-size:.925rem; color:var(--slate); line-height:1.68; }

/* ============ PIPELINE (dark) ============
   A real 5-step sequence, so the steps are numbered — the order
   carries information the reader needs. Nothing else on the page is. */
.pipe{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(38px,4vw,54px); }
.step{ position:relative; padding-top:34px; }
.step::before{ content:''; position:absolute; top:9px; left:0; right:0; height:1px; background:var(--line-dk); }
.step::after{
  content:''; position:absolute; top:5px; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--ink); border:1.5px solid var(--teal-lt); transition:.4s;
}
.step:last-child::before{ background:linear-gradient(90deg,var(--line-dk) 0%, transparent 100%); }
.step.hot::after{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 0 4px rgba(53,224,220,.16), 0 0 16px rgba(53,224,220,.7); }
.step .n{ font-family:var(--mono); font-size:.68rem; color:var(--cyan); letter-spacing:.16em; display:block; margin-bottom:.85rem; }
.step h3{ font-size:1.03rem; margin-bottom:.7rem; }
.step p{ font-size:.855rem; color:#93A9BC; line-height:1.62; }
.step .out{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px dashed var(--line-dk);
  font-family:var(--mono); font-size:.665rem; letter-spacing:.03em; color:var(--teal-lt); line-height:1.55;
}
.step .out b{ color:#fff; font-weight:500; display:block; margin-bottom:2px; }

/* ============ SERVICES ============ */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); }
.svc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3vw,36px); transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s;
  position:relative; overflow:hidden;
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#C3D3DF; }
.svc-ic{
  width:46px; height:46px; border-radius:11px; display:grid; place-items:center; margin-bottom:1.35rem;
  background:linear-gradient(140deg, rgba(53,224,220,.17), rgba(31,122,140,.13)); color:var(--teal);
}
.svc h3{ margin-bottom:.7rem; }
.svc p{ font-size:.925rem; color:var(--slate); line-height:1.7; }
.svc ul{ margin:1.25rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.svc li{
  font-family:var(--mono); font-size:.665rem; letter-spacing:.03em; color:var(--slate);
  background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:4px 9px;
}

/* ============ WORK / SAMPLES ============ */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.work{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s;
}
.work:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.work-shot{ aspect-ratio:16/10; background:linear-gradient(150deg,#E7EEF4,#D5E1EA); position:relative; overflow:hidden; }
.work-shot img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
/* placeholder shown until the specced screenshots are dropped in */
.work-shot .ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; color:#8AA0B2;
}
.work-shot .ph svg{ margin-inline:auto; opacity:.5 }
.work-body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.work-tag{ font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:.6rem; }
.work h3{ font-size:1.02rem; margin-bottom:.5rem; }
.work p{ font-size:.87rem; color:var(--slate); line-height:1.62; flex:1; }
.work-link{ font-family:var(--mono); font-size:.7rem; color:var(--navy); margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.03em; }
.work-link:hover{ color:var(--teal); } .work-link svg{ transition:transform .22s }
.work:hover .work-link svg{ transform:translateX(3px) }

/* ---- video samples: one film, three languages ---- */
.vid-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.vid{
  border-radius:var(--r); overflow:hidden; position:relative; aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--navy),var(--ink)); border:1px solid var(--line-dk);
  display:grid; place-items:center; cursor:pointer; transition:transform .28s, box-shadow .28s;
}
.vid:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.vid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.vid-play{
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; position:relative; transition:.25s;
}
.vid:hover .vid-play{ background:var(--cyan); color:var(--ink); border-color:var(--cyan); transform:scale(1.08); }
.vid-meta{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; }
.vid-lang{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:#fff; text-transform:uppercase; }
.vid-len{ font-family:var(--mono); font-size:.63rem; color:var(--cyan); }

/* ============ PRICING ============ */
.tabs{ display:inline-flex; background:#E3EAF0; padding:4px; border-radius:10px; gap:3px; margin-bottom:2.4rem; }
.tabs button{
  font-family:var(--mono); font-size:.735rem; letter-spacing:.05em; padding:9px 17px; border:0;
  background:transparent; color:var(--slate); border-radius:7px; cursor:pointer; transition:.2s;
}
.tabs button:hover{ color:var(--ink); }
.tabs button[aria-selected="true"]{ background:var(--card); color:var(--navy); box-shadow:var(--shadow-sm); font-weight:500; }

.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); align-items:start; }
.tier{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,34px); position:relative; display:flex; flex-direction:column; }
.tier.feat{ border-color:var(--navy); box-shadow:var(--shadow); }
.tier.feat::before{
  content:attr(data-badge); position:absolute; top:-11px; left:clamp(26px,3vw,34px);
  background:var(--navy); color:#fff; font-family:var(--mono); font-size:.615rem; letter-spacing:.1em;
  padding:4px 11px; border-radius:5px; text-transform:uppercase;
}
.tier h3{ font-size:1.12rem; }
.tier .sub{ font-size:.845rem; color:var(--slate); margin-top:.45rem; min-height:2.6em; line-height:1.55; }
.tier .price{ font-family:var(--mono); font-size:2.05rem; font-weight:600; color:var(--navy); margin:1.3rem 0 .2rem; letter-spacing:-.03em; line-height:1; }
.tier .price small{ font-size:.365em; color:var(--slate); font-weight:400; letter-spacing:.02em; }
.tier .cur{ font-size:.5em; vertical-align:.55em; margin-right:2px; color:var(--slate); }
.tier .setup{ font-family:var(--mono); font-size:.68rem; color:var(--slate-lt); letter-spacing:.02em; }
.tier ul{ list-style:none; margin:1.7rem 0 1.9rem; padding:0; display:grid; gap:.72rem; flex:1; }
.tier li{ font-size:.88rem; color:var(--slate); display:flex; gap:.65rem; line-height:1.5; align-items:flex-start; }
.tier li svg{ flex:none; margin-top:4px; color:var(--teal); }
.tier li b{ color:var(--ink); font-weight:600; }
.tier .cap{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; color:var(--slate);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 12px; margin-bottom:1.5rem; line-height:1.5;
}
.tier .cap b{ color:var(--navy); font-weight:600; }
.price-foot{ margin-top:1.9rem; font-family:var(--mono); font-size:.7rem; color:var(--slate-lt); line-height:1.75; letter-spacing:.01em; }

/* ============ FAQ ============ */
.faq{ max-width:820px; }
.qa{ border-bottom:1px solid var(--line); }
.qa:first-child{ border-top:1px solid var(--line); }
.qa-q{
  width:100%; display:flex; align-items:flex-start; gap:1.2rem; text-align:left;
  background:none; border:0; padding:24px 0; cursor:pointer; font-family:var(--display);
  font-weight:600; font-size:clamp(.98rem,1.4vw,1.09rem); color:var(--ink); letter-spacing:-.012em; line-height:1.42;
}
.qa-q:hover{ color:var(--teal); }
.qa-ic{ margin-left:auto; flex:none; width:22px; height:22px; position:relative; margin-top:2px; }
.qa-ic::before,.qa-ic::after{ content:''; position:absolute; background:var(--teal); border-radius:1px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.qa-ic::before{ top:10px; left:2px; width:18px; height:1.8px; }
.qa-ic::after{ top:2px; left:10px; width:1.8px; height:18px; }
.qa.is-open .qa-ic::after{ transform:rotate(90deg); }
.qa-a{ overflow:hidden; max-height:0; transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.qa-a-in{ padding:0 3.4rem 26px 0; font-size:.93rem; color:var(--slate); line-height:1.78; }
.qa-a-in strong{ color:var(--ink); font-weight:600; }
.qa-a-in code{
  font-family:var(--mono); font-size:.855em; background:var(--card);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--navy);
}

/* ============ CONTACT + FOOTER ============ */
.ct-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,5vw,66px); align-items:start; }
.ct-list{ display:grid; gap:1px; background:var(--line-dk); border:1px solid var(--line-dk); border-radius:var(--r); overflow:hidden; }
.ct-row{ background:var(--ink); padding:20px 24px; display:flex; gap:1rem; align-items:flex-start; }
.ct-row .k{ font-family:var(--mono); font-size:.635rem; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-lt); width:96px; flex:none; padding-top:3px; }
.ct-row .v{ font-size:.92rem; color:#DDE7EF; line-height:1.62; }
.ct-row .v a:hover{ color:var(--cyan); }
.ct-row .v .mono{ font-family:var(--mono); font-size:.845rem; letter-spacing:.03em; }
.ct-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }

.foot{ background:var(--ink); border-top:1px solid var(--line-dk); padding-block:38px; }
.foot-in{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
/* reversed lockup is transparent, so it sits straight on the navy */
.foot-logo{ height:34px; width:auto; }
.foot-cr{ font-family:var(--mono); font-size:.685rem; color:#7089A0; line-height:1.7; letter-spacing:.02em; }
.foot-soc{ margin-left:auto; display:flex; gap:.55rem; }
.foot-soc a{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--line-dk);
  display:grid; place-items:center; color:#9FB4C6; transition:.22s;
}
.foot-soc a:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }

/* floating WhatsApp — the page's single persistent action */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.72); transition:transform .25s;
}
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }
.wa-float::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:ring 2.6s ease-out infinite;
}
@keyframes ring{ 0%{opacity:.55;transform:scale(1)} 100%{opacity:0;transform:scale(1.65)} }

/* ============ scroll reveal ============ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }

/* ============ RESPONSIVE ============ */

/* Header collapses at 1100px, not lower: Bahasa Malaysia's nav labels
   ("Cara ia berfungsi", "Perkhidmatan") measure ~486px against English's
   ~342px, and overflow the bar before any other breakpoint is reached.
   Measured across all three languages; BM is the binding constraint. */
@media (max-width:1100px){
  :root{ --hdr-h:74px; }
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .stage{ order:2 }
  .pipe{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .work-grid,.vid-grid,.tier-grid{ grid-template-columns:repeat(2,1fr); }
  .tier.feat{ order:-1 }
  .ct-grid{ grid-template-columns:1fr; }

  .nav-btn{ display:grid; }
  .hdr-cta,.hdr-login{ display:none; }  /* the menu carries Contact and Log in instead */
  .nav-contact{ display:block; color:var(--navy); font-weight:600; }
  .nav-login{ display:block; }
  .lang{ margin-left:auto; }
  .lang::before{ display:none; }        /* no nav to divide it from */
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--card); border-bottom:1px solid var(--line);
    padding:6px var(--gutter) 16px; box-shadow:var(--shadow); display:none;
    max-height:calc(100vh - var(--hdr-h)); overflow-y:auto;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:.98rem; }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }
  .brand-full{ height:38px; }
}

@media (max-width:820px){
  .why-grid{ grid-template-columns:1fr; }
  .infra img{ height:170px; }
}

@media (max-width:620px){
  :root{ --hdr-h:64px; }
  .hdr-in{ gap:.7rem; }
  /* wordmark is unreadable this small — show the mark alone instead */
  .brand-full{ display:none; }
  .brand-mark{ display:block; height:34px; }
  .pipe,.work-grid,.vid-grid,.tier-grid,.svc-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ flex:1 1 100%; }
  .ct-row{ flex-direction:column; gap:.4rem; }
  .ct-row .k{ width:auto; }
  /* min-width:0 lets the tabs shrink below their longest word, and wrap is the
     safety net: Bahasa Malaysia's three labels ("Pelan pertanyaan", "Automasi
     pesanan", "Pelayan & penggunaan AI") need 315px of min-content against
     280px available at 320px, which pushed the page into horizontal scroll. */
  .tabs{ display:flex; width:100%; flex-wrap:wrap; }
  .tabs button{ flex:1 1 auto; min-width:0; text-align:center; padding-inline:10px; }
  .qa-a-in{ padding-right:0; }
  .wa-float{ right:15px; bottom:15px; width:52px; height:52px; }
  .lang-trigger{ padding:7px 9px 7px 10px; }
  .lang-menu{ min-width:172px; }
  .phone{ max-width:100%; }
  .rail{ max-width:100%; }
}

/* Small phones: tighten spacing; rail labels wrap instead of shrinking. */
@media (max-width:380px){
  .rail{ gap:3px; }
  /* Labels stay at 11px and wrap ("Follow-up" breaks at the hyphen). The old
     rule shrank them to 8.3px to avoid collisions, which traded a collision
     for illegibility. */
  .rail-node .lb{ letter-spacing:0; }
  .hdr-in{ gap:.5rem; }
  .lang-cur{ font-size:.7rem; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* ---- mobile menu trigger (hidden above 820px) ---- */
.nav-btn{
  display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); place-items:center; cursor:pointer; flex:none;
}
.nav-btn span{ display:block; width:17px; height:1.8px; background:var(--navy); border-radius:2px; position:relative; transition:.25s; }
.nav-btn span::before,.nav-btn span::after{ content:''; position:absolute; left:0; width:17px; height:1.8px; background:var(--navy); border-radius:2px; transition:.25s; }
.nav-btn span::before{ top:-5.5px; } .nav-btn span::after{ top:5.5px; }
.nav-btn[aria-expanded="true"] span{ background:transparent; }
.nav-btn[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-btn[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---- toast: used where content is still pending, instead of alert() ---- */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:.75rem; letter-spacing:.03em;
  padding:13px 20px; border-radius:10px; box-shadow:var(--shadow-lg); z-index:120;
  opacity:0; pointer-events:none; transition:opacity .26s, transform .26s;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- infrastructure banner heading the servers pricing tab ---- */
.infra{ margin:0; border-radius:var(--r); overflow:hidden; position:relative; border:1px solid var(--line); }
.infra img{ width:100%; height:clamp(150px,19vw,225px); object-fit:cover; display:block; }
.infra figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 24px 16px; color:#fff;
  font-family:var(--mono); font-size:.71rem; letter-spacing:.05em;
  background:linear-gradient(transparent, rgba(8,25,43,.9));
}