/* ============================================================
   Zip AI — PREMIUM LAYER
   Ported from a measured teardown of anga.co.th (2026-08-01).
   Reference spec + gap table: ../../design/ANGA-REFERENCE-SPEC.md

   What this file is: the *physics* that make ANGA read as premium —
   wide/faint shadows, big soft radii, tall photos, generous section
   rhythm, restrained motion. Expressed in ZIP AI'S OWN PALETTE
   (bright, sky/mint) — we copy the system, never the orange.

   Load AFTER shared.css. Bump ?v= on every change or cached
   visitors keep the old stylesheet (see root CLAUDE.md).
   ============================================================ */

:root{
  /* --- shadow physics (the single biggest "cheap vs premium" tell) ---
     ANGA measured: blur 50–200px at 7–12% alpha. Ours was 8–28px at 13%:
     tight + dark = heavy. Wide + faint = expensive. */
  --sh-xs : 0 4px 18px rgba(34,48,74,.06);
  --sh-sm : 0 4px 50px rgba(34,48,74,.07);
  --sh-md : 0 4px 90px -16px rgba(34,48,74,.13);
  --sh-lg : 0 4px 100px -44px rgba(34,48,74,.19);
  --sh-xl : 0 4px 200px rgba(34,48,74,.17);
  --sh-glow: 0 4px 33px -11px rgba(62,142,247,.30), -26px -14px 93px -60px rgba(24,184,122,.35);

  /* --- radius scale (ANGA: 20/22/24/30/100px) --- */
  --r-sm:14px; --r-md:20px; --r-lg:22px; --r-xl:30px; --r-pill:100px;

  /* --- section rhythm (ANGA: py-24 / md:py-36 / lg:py-48 = 96/144/192px) --- */
  --sec-y: clamp(64px,9vw,140px);
  --sec-y-lg: clamp(88px,13vw,192px);

  /* --- container (ANGA: 1240–1350px) --- */
  --wrap-max:1320px;

  /* --- motion (ANGA: .3s ease for hover; long expressive cubic for entrance) --- */
  --ease-anga:cubic-bezier(.4,.01,.165,.99);
  --dur-hover:.3s;
}

/* ============================================================
   1. THE GROWING HIGHLIGHT
   Direct port of ANGA's `.anga-shadow-primary`: a 2px gradient
   border whose angle rotates 135deg -> 495deg over 4s, plus a
   pulsing multi-layer drop-shadow. Desktop only — on mobile it
   costs battery and the effect is invisible at that size.
   Usage: <div class="glow-card"> … </div>
   ============================================================ */
@property --angle{syntax:"<angle>";initial-value:135deg;inherits:false}

/* No background here on purpose — the host card keeps its own (several of ours
   are translucent on dark sections). We only add the ring + the glow. */
.glow-card{
  position:relative;z-index:1;border-radius:var(--r-lg);
  filter:drop-shadow(0 2px 16px rgba(62,142,247,.20))
         drop-shadow(0 -6px 26px rgba(24,184,122,.10))
         drop-shadow(0 7px 30px rgba(62,142,247,.05));
  will-change:filter;transform:translateZ(0);
}
/* A TRUE ring, not a filled rectangle behind the card.
   ANGA can get away with a filled rect because their card is opaque white; ours
   sit on dark sections at 5% opacity, where a filled rect washes the whole card.
   The mask punches out the middle so only the 2px band paints. */
.glow-card::before,
.cmp-usbg::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  border-radius:calc(var(--r-lg) + 2px);
  background:linear-gradient(var(--angle),var(--sky) 0,rgba(24,184,122,0) 50%);
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
@media (min-width:1024px){
  .glow-card::before{animation:zipRotate 4s linear infinite}
  .glow-card{animation:zipGlowPulse 4s linear infinite}
}
@keyframes zipRotate{ to{--angle:495deg} }
@keyframes zipGlowPulse{
  0%  {filter:drop-shadow(0 2px 16px rgba(62,142,247,.40)) drop-shadow(0 -6px 26px rgba(24,184,122,.26)) drop-shadow(0 7px 30px rgba(62,142,247,.10))}
  50% {filter:drop-shadow(0 2px 16px rgba(62,142,247,.20)) drop-shadow(0 -6px 26px rgba(24,184,122,.10)) drop-shadow(0 7px 30px rgba(62,142,247,.05))}
  100%{filter:drop-shadow(0 2px 16px rgba(62,142,247,.40)) drop-shadow(0 -6px 26px rgba(24,184,122,.26)) drop-shadow(0 7px 30px rgba(62,142,247,.10))}
}
@media (prefers-reduced-motion:reduce){
  .glow-card,.glow-card::before{animation:none!important}
}

/* ============================================================
   2. COMPARISON TABLE  (ANGA's "ANGA vs They" block)
   3 columns: attribute label | US (elevated + glow) | THEM (flat, grey).
   Their column is deliberately un-styled — the contrast IS the argument.
   Mobile: collapses to stacked pairs, us-first.
   ============================================================ */
.cmp{max-width:1080px;margin:0 auto;padding:0 16px}
/* --cmp-rows MUST equal (1 header + N rows + 1 foot) — set inline on .cmp-grid.
   Explicit rows are required so the lifted card's `grid-row:1/-1` resolves against
   them; with implicit rows only, `-1` collapses to row 1 and the card covers the
   header alone. The card is ALSO position:absolute so it never collides with
   auto-placement (an abspos grid child is positioned against its grid area and is
   skipped by the auto-placement algorithm — without this the header cells get
   pushed down a row). */
.cmp-grid{
  display:grid;grid-template-columns:minmax(150px,1.05fr) minmax(200px,1.2fr) minmax(180px,1fr);
  grid-template-rows:repeat(var(--cmp-rows,8),auto);
  position:relative;
}
/* The elevated middle column sits behind the rows and carries the growing
   highlight (§1) — this is exactly what ANGA does with .anga-shadow-primary. */
.cmp-usbg{
  /* Both lines MUST be explicit. For an abspos grid child an `auto` grid line
     resolves to the container's padding edge (not "span 1"), so `grid-column:2`
     would stretch the card across columns 2+3. */
  position:absolute;grid-column:2 / 3;grid-row:1 / -1;
  top:-14px;bottom:-14px;left:0;right:0;
  border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--sh-md),var(--sh-glow);
  z-index:0;
}
@media (min-width:1024px){
  .cmp-usbg::before{animation:zipRotate 4s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .cmp-usbg::before{animation:none!important}
}
.cmp-head{display:contents}
.cmp-head .cmp-brand,
.cmp-head .cmp-them{
  padding:30px 20px 26px;text-align:center;font-family:var(--font-display);
  font-weight:800;font-size:clamp(20px,2.4vw,30px);position:relative;z-index:2;
}
.cmp-head .cmp-them{color:var(--muted)}
/* logo-zipai-500.png is a SQUARE mark (500x500), not a wordmark — keep it square
   and set the name in type beside it. */
.cmp-brand{display:flex;align-items:center;justify-content:center;gap:10px}
.cmp-brand img,.cmp-brand svg{height:42px;width:42px;display:block;flex:none}
.cmp-row{display:contents}
.cmp-lbl,.cmp-us,.cmp-vs{
  padding:22px 20px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.7;position:relative;z-index:2;
}
.cmp-lbl{font-weight:700;color:var(--ink);border-top-color:transparent;
  box-shadow:inset 0 1px 0 var(--line)}
.cmp-us{text-align:center;color:var(--ink)}
.cmp-vs{text-align:center;color:var(--muted)}
.cmp-us .cmp-tick{
  display:block;width:22px;height:22px;margin:0 auto 10px;border-radius:50%;
  background:var(--mint);color:#fff;font-size:13px;font-weight:900;
  line-height:22px;text-align:center;
}
.cmp-foot{grid-column:1 / -1;padding:20px 6px 0;font-size:13.5px;color:var(--muted);text-align:center}

@media (max-width:760px){
  .cmp-grid{grid-template-columns:1fr}
  .cmp-usbg{display:none}
  .cmp-head{display:none}
  .cmp-lbl{border-top:2px solid var(--line);box-shadow:none;padding-bottom:6px;font-size:16px}
  .cmp-us,.cmp-vs{border-top:0;text-align:left;padding:6px 20px}
  .cmp-us{background:var(--mint-soft);border-radius:var(--r-sm);margin:6px 12px;padding:14px 16px}
  .cmp-us .cmp-tick{display:inline-block;margin:0 8px 0 0;vertical-align:-4px}
  .cmp-vs::before{content:"เอเจนซี่ทั่วไป: ";font-weight:700;color:var(--ink)}
}

/* ============================================================
   3. BIG PHOTOGRAPHY
   ANGA's real numbers: hero image full-bleed at min-height 720px;
   body images shipped 1000x1000 (square) alternating L/R with the
   copy; case covers 340x140 at radius 10px; logos grayscale ->
   colour on hover at scale 1.2.
   Our failure mode was capped, small, decorative images.
   ============================================================ */
.p-hero{position:relative;min-height:clamp(420px,52vw,720px);overflow:hidden;isolation:isolate}
.p-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:-2}
.p-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,20,35,.52) 0%,rgba(10,20,35,.28) 45%,rgba(10,20,35,.60) 100%)}
.p-hero .p-hero-in{position:relative;max-width:var(--wrap-max);margin:0 auto;padding:clamp(56px,9vw,120px) 20px;color:#fff}
.p-hero h1{color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);letter-spacing:-.025em}

/* alternating square-image content blocks */
.p-split{max-width:var(--wrap-max);margin:0 auto;padding:var(--sec-y) 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
/* Alternation is an EXPLICIT class, not :nth-of-type — nth-of-type counts by tag
   across the whole page, so it flips unpredictably depending on how many other
   <section>s precede these. */
.p-split--rev .p-split-media{order:-1}
/* The ratio MUST live on the container, not the <img>.
   An HTML height attribute (e.g. height="1200") is a presentational hint that
   wins over `aspect-ratio` on the image itself — that is why these rendered
   546x1128 instead of square, dwarfing the copy beside them. */
.p-split-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:4/3;background:var(--card)}
.p-split-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-anga)}
.p-split-media:hover img{transform:scale(1.05)}

/* Screenshots are evidence — never crop them. `contain` + padding shows the whole
   frame; `cover` would slice the top off a Maps profile or a probe result. */
.p-split-media--shot{background:var(--sky-soft);padding:18px}
.p-split-media--shot img{object-fit:contain;border-radius:10px}
.p-split-media--shot:hover img{transform:none}

/* Copy beside a big image needs its own box or it reads as a caption. */
.p-split-copy{background:var(--card);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);
  box-shadow:var(--sh-sm)}
.p-split-copy h3{margin-bottom:14px}
.p-split-copy p{font-size:clamp(15.5px,1.4vw,17px);line-height:1.8;color:var(--muted)}
.p-split h2,.p-split h3{font-size:clamp(26px,3.4vw,34px);margin-bottom:18px;line-height:1.25}
@media (max-width:820px){
  /* image always ABOVE the copy on mobile, regardless of desktop side */
  .p-split{grid-template-columns:1fr;padding:calc(var(--sec-y) * .72) 20px}
  .p-split--rev .p-split-media{order:-1}
}

/* full-bleed dark break section (ANGA: bg image + py-48) */
.p-break{position:relative;padding:var(--sec-y-lg) 20px;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.p-break>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.p-break::after{content:"";position:absolute;inset:0;background:rgba(12,22,38,.66);z-index:-1}
.p-break h2{color:#fff;font-size:clamp(28px,4.4vw,50px);margin-bottom:26px}

/* logo strip: grayscale -> colour + grow on hover */
.p-logos img{
  height:40px;width:auto;filter:grayscale(1);opacity:.72;
  transition:transform var(--dur-hover) ease,filter var(--dur-hover) ease,opacity var(--dur-hover) ease;
}
.p-logos img:hover{filter:grayscale(0);opacity:1;transform:scale(1.2)}

/* ============================================================
   4. CARD + SECTION UPGRADES (applies to what we already ship)
   Deliberately scoped to .premium so nothing changes until a page
   opts in — this file is safe to deploy before it is adopted.
   ============================================================ */
.premium .card,.premium .mdcc-card,.premium .answer-block,.premium .entity-card{
  border-radius:var(--r-lg);box-shadow:var(--sh-sm)
}
.premium .mdcc-card{box-shadow:var(--sh-md)}
.premium section{padding-block:var(--sec-y)}
.premium .sec-title{text-align:center;font-size:clamp(28px,4vw,50px);line-height:1.2;margin-bottom:clamp(28px,4vw,52px)}

/* Entrance motion — retune ONLY the timing to ANGA's long expressive curve.
   🔴 Do NOT re-declare opacity/transform here. motion.css owns those states and
   reveals via `.reveal.is-visible`. An earlier version of this file used
   `.reveal.in`, which meant `.premium` would have pinned every revealed element
   at opacity:0 forever — a blank site on all 24 pages. Timing only. */
.premium .reveal,
.premium .reveal-lg,
.premium .reveal-left,
.premium .reveal-right,
.premium .reveal-scale{
  transition-duration:1s!important;
  transition-timing-function:var(--ease-anga)!important;
}

/* ============================================================
   5. NAV DROPDOWN — keep it open while the mouse crosses the gap
   .nav-panel sits at top:calc(100% + 8px). That 8px of dead space
   drops :hover the moment you move toward the menu, so it vanishes.
   An invisible bridge spans the gap and keeps hover alive.
   ============================================================ */
.nav-group::after{
  content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px;
  display:none;
}
.nav-group:hover::after{display:block}
/* Widen the forgiving area around the whole group, and give the panel itself a
   generous invisible collar so a slightly-off mouse path doesn't close it. */
.nav-panel{margin-top:-2px;padding-top:calc(var(--np-pad,14px))!important}

/* ============================================================
   6. BOXES EVERYWHERE + the ring on all of them (Shane, 2026-08-01)
   Ring only — the ROTATION stays on the primary cards. 20+ elements
   each running their own 4s gradient animation is real jank on a
   mid-range Android, which is most of the Thai SMB audience.
   ============================================================ */
.boxed{
  position:relative;z-index:1;background:var(--card);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--sh-sm);
}
.boxed::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  border-radius:calc(var(--r-lg) + 2px);
  background:linear-gradient(135deg,var(--sky) 0,rgba(24,184,122,0) 55%);
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.85;
}
/* on hover the ring comes alive — the effect people notice, without 20 loops */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .boxed:hover::before{animation:zipRotate 4s linear infinite;opacity:1}
}

/* ============================================================
   7. DEMO VIDEO — it was rendering 677px wide inside a 1265px page
   ============================================================ */
.demo-video{max-width:min(1080px,94vw)!important;margin-inline:auto}
.demo-video__wrap,.demo-video video,.demo-video__vid{width:100%!important;height:auto!important}
.demo-video__cap{font-size:clamp(15px,1.5vw,17px);line-height:1.7}

/* ============================================================
   8. ANSWER BLOCKS — keep the AEO structure, drop the cheap badge
   Shane, 2026-08-01: "this part really look cheap … ANGA don't have
   any!!! but we need to do as structure seo geo aeo and ads".
   Both true. The AEO value is that the block answers the question
   FIRST in plain extractable prose — that is what ChatGPT/Perplexity/
   AI Overview lift. The little outlined pill contributes NOTHING to
   that: no schema, no heading, not a landmark. It is pure decoration
   and it is the part that reads cheap. So: pill goes, block stays.
   Do NOT "restore the label for SEO" — it never had any.
   ============================================================ */
.ab-label{
  /* stays in the DOM for screen readers and for anyone diffing the markup,
     but no longer paints the outlined chip */
  border:0!important;background:none!important;padding:0!important;
  color:var(--muted)!important;font-size:12px!important;letter-spacing:.10em!important;
  text-transform:uppercase;opacity:.62;margin-bottom:10px!important;
}
/* the block itself becomes a proper premium card instead of a tinted strip */
.answer-block{
  background:var(--card);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);box-shadow:var(--sh-sm);
  border-left:0!important;
}
.answer-block>p{font-size:clamp(16px,1.5vw,17.5px);line-height:1.85}

/* ============================================================
   9. SERVICES INDEX (/services) — ANGA /services/ structure
   Sticky pill tab bar + horizontal sliding card rail + arrows.
   ============================================================ */
.svc-hero{padding:clamp(44px,6vw,88px) 20px clamp(20px,3vw,34px);text-align:center}
.svc-h1{font-size:clamp(30px,5vw,56px);line-height:1.18;letter-spacing:-.025em;margin:0 auto 16px;max-width:16ch}
.svc-accent{color:var(--sky)}
.svc-sub{max-width:60ch;margin:0 auto;color:var(--muted);font-size:clamp(16px,1.6vw,18px);line-height:1.75}

/* pill tab bar — sticky under the header, like ANGA's */
.svc-tabs{position:sticky;top:62px;z-index:40;display:flex;justify-content:center;
  padding:14px 16px;background:linear-gradient(180deg,var(--bg) 62%,rgba(255,253,248,0))}
.svc-tabs-in{display:flex;gap:6px;padding:6px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:var(--sh-sm);max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.svc-tabs-in::-webkit-scrollbar{display:none}
.svc-tab{flex:none;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--ink);
  background:none;padding:11px 20px;border-radius:var(--r-pill);
  transition:background var(--dur-hover) ease,color var(--dur-hover) ease}
.svc-tab:hover{background:var(--sky-soft)}
.svc-tab.is-on{background:var(--ink);color:#fff}

/* the rail */
.svc-rail-sec{padding:clamp(22px,3vw,40px) 0 clamp(34px,5vw,64px)}
.svc-rail-wrap{overflow:hidden}
.svc-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px max(20px,calc((100vw - var(--wrap-max))/2)) 22px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-rail::-webkit-scrollbar{display:none}
.svc-card{flex:0 0 clamp(260px,26vw,330px);scroll-snap-align:start;
  display:flex;flex-direction:column;padding:0!important;overflow:hidden}
.svc-media{aspect-ratio:16/10;overflow:hidden;background:var(--sky-soft)}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-anga)}
.svc-card:hover .svc-media img{transform:scale(1.05)}
.svc-title{font-size:19px;line-height:1.35;margin:18px 20px 8px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.svc-price{font-family:var(--font-body);font-size:13px;font-weight:800;color:var(--mint);
  background:var(--mint-soft);border-radius:var(--r-pill);padding:3px 10px}
.svc-desc{margin:0 20px 18px;font-size:14.5px;line-height:1.75;color:var(--muted);flex:1}
.svc-cta{display:inline-flex;align-items:center;gap:7px;margin:0 20px 20px;
  align-self:flex-start;text-decoration:none;font-weight:800;font-size:14.5px;
  color:#fff;background:var(--sky);border-radius:var(--r-pill);padding:10px 18px;
  transition:transform var(--dur-hover) ease,background var(--dur-hover) ease}
.svc-cta:hover{transform:translateX(3px);background:var(--ink)}

.svc-nav{display:flex;justify-content:center;gap:12px;margin-top:6px}
.svc-arrow{width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  font-size:24px;line-height:1;display:grid;place-items:center;
  box-shadow:var(--sh-xs);transition:all var(--dur-hover) ease}
.svc-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.svc-cta-band{text-align:center;padding:clamp(44px,6vw,88px) 20px;background:var(--sky-soft)}
.svc-cta-band h2{font-size:clamp(24px,3.4vw,40px);margin-bottom:12px}
.svc-cta-band p{max-width:56ch;margin:0 auto 24px;color:var(--muted);font-size:17px;line-height:1.75}

@media (max-width:900px){ .svc-tabs{top:58px} .svc-nav{display:none} }