/* WanCentre Academy
   Visual system borrowed from kitchen safety signage:
   blue = mandatory, red = prohibited, yellow = warning, green = safe.
   Flat colour only, no gradients. */

:root{
  --white:#FFFFFF;
  --tint:#F2F5F7;
  --line:#DCE3E8;
  --line-strong:#C3CDD5;
  --ink:#0E2235;
  --ink-2:#34495C;
  --muted:#56687A;
  --blue:#1556B8;
  --blue-press:#0F4394;
  --blue-soft:#E7EFFA;
  --green:#0C7A4F;
  --yellow:#FFC72C;
  --amber-text:#8A5C00;
  --red:#D0263A;
  --wa:#25D366;

  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shadow-plate:0 0 0 1px rgba(14,34,53,.05),0 1px 2px rgba(14,34,53,.06),0 6px 16px -6px rgba(14,34,53,.14);
  --shadow-lift:0 0 0 1px rgba(14,34,53,.05),0 2px 4px rgba(14,34,53,.05),0 18px 40px -18px rgba(14,34,53,.28);

  --ease:cubic-bezier(.2,0,0,1);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.005em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{
  position:absolute;left:16px;top:-80px;z-index:100;
  padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none;
}
.skip:focus{top:12px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.nowrap{white-space:nowrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border:0;border-radius:12px;
  font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition-property:background-color,color,box-shadow,scale;
  transition-duration:.18s;transition-timing-function:var(--ease);
}
.btn:active{scale:.96}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn-lg{min-height:56px;padding:0 26px;font-size:1.0625rem}
.btn-sm{min-height:42px;padding:0 16px;font-size:.95rem}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-press)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{background:var(--blue-soft)}
.btn-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-line:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn-ghost-white{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #fff}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 1px 0 transparent;transition:box-shadow .2s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.header-bar{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none}
.brand-mark{width:40px;height:40px;flex:none}
.brand-word{font-family:var(--font-display);font-size:1.4rem;font-weight:500;line-height:1;white-space:nowrap}
.brand-word b{font-weight:700}
.nav{display:flex;align-items:center;gap:26px}
.nav a{padding:8px 0;font-size:.98rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .15s var(--ease)}
.nav a:hover{color:var(--blue)}
.header-phone{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.header-phone svg{width:18px;height:18px;fill:var(--blue)}
.menu-btn{display:none}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,5vw,72px) 0 clamp(48px,6vw,88px)}
.bubbles{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5.5vw,80px);align-items:center}
.hero-copy{container-type:inline-size}
/* Sized from the text column itself, so "Makanan" + the WanCentre plate always fit on one line */
.hero h1{font-size:clamp(3.5rem,1.9rem + 5.8vw,7rem);font-size:clamp(2.9rem,16.4cqi,7rem);line-height:.88;letter-spacing:-.015em;text-wrap:wrap}
.hero-badge{
  display:inline-flex;align-items:center;gap:.22em;
  margin-left:.06em;padding:.1em .55em .1em .1em;border-radius:999px;
  background:var(--blue);color:#fff;
  font-size:.36em;line-height:1;letter-spacing:.01em;white-space:nowrap;vertical-align:middle;
  translate:0 -.1em;
}
.hero-badge-mark{width:1.5em;height:1.5em;flex:none}
.hero-lede{margin-top:28px;max-width:34em;font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);color:var(--ink-2)}
.hero-offer{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:32px}
.price{display:flex;align-items:center;gap:12px}
.price-amt{font-family:var(--font-display);font-size:3.5rem;font-weight:700;line-height:.85;color:var(--blue)}
.price-unit{font-size:.95rem;line-height:1.25;color:var(--muted)}

.hero-photo{position:relative}
.hero-frame{position:relative;overflow:hidden;aspect-ratio:6/5;border-radius:22px;background:var(--tint)}
.hero-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.photo-note{position:absolute;top:12px;right:12px;padding:3px 8px;border-radius:6px;background:rgba(14,34,53,.6);color:#fff;font-size:.75rem;line-height:1.4}

/* Client and course ticker */
.ticker{display:grid;gap:14px;padding:20px 0;overflow:hidden;background:#fff;border-block:1px solid var(--line)}
.ticker-row{overflow:hidden}
.ticker-track{display:flex;width:max-content}
.ticker-group{display:flex;flex:none;align-items:center;gap:40px;padding-right:40px}
.ticker-group li{display:flex;flex:none;align-items:center}
.ticker-group img{width:auto}
.tk-nestle{height:42px}
.tk-aicha{height:28px}
.tk-mixue{height:30px}
.tk-text{font-family:var(--font-display);font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);font-weight:600;line-height:1;white-space:nowrap}
.tk-sep svg{width:24px;height:24px}
.tk-sep .disc{fill:var(--blue)}
.tk-sep .glyph{fill:#fff;color:#fff}
.ticker-rev .ticker-group{gap:28px;padding-right:28px}
.ticker-rev .tk-text{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);font-weight:500;color:var(--muted)}
.tk-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.45}

/* Warning */
.warning{padding-top:clamp(56px,7vw,96px)}
.warning-panel{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px 44px;
  padding:clamp(24px,4vw,48px);border-radius:24px;background:var(--yellow);color:var(--ink);
}
.warning-sign{width:clamp(76px,9vw,120px);height:auto}
.warning-sign .tri{fill:var(--yellow);stroke:var(--ink);stroke-width:8;stroke-linejoin:round}
.warning-sign .tri-mark{fill:var(--ink)}
.warning-body h2{font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem)}
.warning-body p{margin-top:12px;max-width:56ch}
.warning-figures{display:grid;gap:18px;padding-left:40px;border-left:2px solid rgba(14,34,53,.2)}
.warning-figures dt{font-size:.92rem;font-weight:500}
.warning-figures dd{font-family:var(--font-display);font-size:clamp(2.5rem,2rem + 1.5vw,3.4rem);font-weight:700;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.odo{display:inline-block;line-height:1;white-space:nowrap}
.reel{position:relative;display:inline-block;vertical-align:top;overflow:hidden}
@supports (overflow:clip){.reel{overflow-x:visible;overflow-y:clip}}
.reel-size{visibility:hidden}
.reel-strip{position:absolute;top:0;left:50%;display:flex;flex-direction:column;align-items:center;translate:-50% 0}
.reel-strip span{display:block;height:1em;line-height:1}

/* Sections */
.section{padding:clamp(64px,8vw,112px) 0}
.section-tint{background:var(--tint)}
.section-head{max-width:640px;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(2.4rem,1.7rem + 2.6vw,3.9rem);line-height:.95}
.section-head p{margin-top:16px;max-width:56ch;color:var(--ink-2)}
.section-head a{color:var(--blue);font-weight:600}

/* Who it's for */
.who-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,minmax(210px,auto));gap:12px}
.who{position:relative;overflow:hidden;min-height:210px;border-radius:18px;background:var(--tint)}
.who::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.who img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who-lg{grid-row:span 2}
.who-label{
  position:absolute;left:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);
  padding:7px 12px;border-radius:8px;background:#fff;box-shadow:var(--shadow-plate);
  font-size:.98rem;font-weight:600;line-height:1.25;
}
.who-ask{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  padding:20px 20px 20px 28px;border-radius:18px;background:var(--blue);color:#fff;
}
.who-ask p{max-width:34ch;font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);font-weight:600;line-height:1.1}

/* Signs board: plates mounted on a white subway-tile wall */
.signs{
  padding:clamp(64px,8vw,112px) 0;
  background-color:#F4F7F9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect width='96' height='96' fill='%23DBE3E8'/%3E%3Crect x='1' y='1' width='94' height='46' rx='2' fill='%23F4F7F9'/%3E%3Crect x='-47' y='49' width='94' height='46' rx='2' fill='%23F4F7F9'/%3E%3Crect x='49' y='49' width='94' height='46' rx='2' fill='%23F4F7F9'/%3E%3C/svg%3E");
}
.signs .section-head{padding:24px 28px 26px;border-radius:14px;background:#fff;box-shadow:var(--shadow-plate)}
.signs-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px;align-items:start}
.sign-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sign{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 12px 18px;border-radius:14px;background:#fff;box-shadow:var(--shadow-plate);text-align:center;
}
.sign span{font-family:var(--font-display);font-size:clamp(1.05rem,.95rem + .35vw,1.25rem);font-weight:600;line-height:1.1;text-wrap:balance}
.roundel{width:clamp(64px,6.4vw,88px);height:auto}
.roundel .disc{fill:var(--blue)}
.roundel .glyph{fill:#fff;color:#fff}
.roundel .ring{fill:#fff;stroke:var(--red);stroke-width:9}
.roundel .slash{stroke:var(--red);stroke-width:9}
.roundel .glyph-ink{fill:var(--ink);color:var(--ink)}
.topics{padding:24px 26px 12px;border-radius:14px;background:#fff;box-shadow:var(--shadow-plate)}
.topics h3{font-size:1.5rem;margin-bottom:10px}
.topics li{padding:11px 0;border-top:1px solid var(--line);color:var(--ink-2);line-height:1.4}

/* Pricing */
.offer{overflow:hidden;border-radius:24px;background:#fff}
.offer-img{width:100%;height:100%;object-fit:cover}
.offer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);box-shadow:var(--shadow-lift)}
.offer-body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,3.6vw,48px)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.status-open{color:var(--green)}
.status-soon{color:var(--amber-text)}
.offer h3{margin-top:12px;font-size:clamp(1.75rem,1.4rem + 1.1vw,2.4rem)}
.offer-price{margin-top:10px;color:var(--muted)}
.offer-price b{margin-right:4px;font-family:var(--font-display);font-size:2.9rem;font-weight:700;line-height:1;color:var(--blue)}
.offer-price small{font-size:1rem}
.offer-soon .offer-price b{font-size:2.25rem;color:var(--ink)}
.ticks{display:grid;gap:10px;margin:22px 0 28px}
.ticks li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2)}
.ticks svg{width:22px;height:22px;flex:none;margin-top:1px;fill:var(--green)}
.offer-note{margin-top:14px;font-size:.92rem;color:var(--muted)}
.offer-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.offer-soon{display:grid;grid-template-rows:auto 1fr;box-shadow:var(--shadow-plate)}
.offer-soon .offer-img{height:auto;aspect-ratio:16/7}
.offer-text{margin:12px 0 22px;color:var(--ink-2)}
.offer-soon .btn{margin-top:auto}
.fineprint{margin-top:20px;font-size:.9rem;color:var(--muted)}

/* Why us */
.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
.safe{width:52px;height:52px;margin-bottom:18px}
.safe .sq{fill:var(--green)}
.safe .glyph{fill:#fff;color:#fff}
.reasons h3{font-size:1.6rem}
.reasons p{margin-top:8px;color:var(--ink-2)}

/* Steps + chat */
.steps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(40px,6vw,88px);align-items:center}
.steps-copy h2{font-size:clamp(2.4rem,1.7rem + 2.6vw,3.9rem);line-height:.95}
.steps{display:grid;gap:26px;margin:36px 0}
.steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start}
.step-no{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1;
}
.steps h3{margin-top:4px;font-size:1.5rem}
.steps p{margin-top:6px;color:var(--ink-2)}
.steps a{color:var(--blue);font-weight:600;white-space:nowrap}
.chat{width:100%;max-width:420px;justify-self:center;overflow:hidden;border-radius:24px;background:#EFEAE2;box-shadow:var(--shadow-lift)}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.chat-head svg{width:40px;height:40px;flex:none}
.chat-head p{font-size:.85rem;line-height:1.25;color:var(--muted)}
.chat-head b{display:block;font-size:1rem;color:var(--ink)}
.chat-body{display:grid;gap:10px;padding:22px 16px 28px}
.msg{position:relative;max-width:84%;padding:8px 12px 22px;border-radius:12px;font-size:.98rem;line-height:1.45;box-shadow:0 1px 1px rgba(11,20,26,.1)}
.msg-out{justify-self:end;background:#D9FDD3;border-top-right-radius:4px}
.msg-in{justify-self:start;background:#fff;border-top-left-radius:4px}
.msg-meta{position:absolute;right:10px;bottom:4px;font-size:.72rem;color:#667781;font-variant-numeric:tabular-nums}
.ticks-read{margin-left:2px;letter-spacing:-.25em;color:#53BDEB}
.chat figcaption{padding:10px 18px;border-top:1px solid var(--line);background:#fff;font-size:.82rem;color:var(--muted);text-align:center}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.quote{display:flex;flex-direction:column;gap:22px;padding-top:24px;border-top:3px solid var(--blue)}
.quote blockquote p{font-size:1.15rem;line-height:1.55}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:.92rem;line-height:1.3;color:var(--muted)}
.quote figcaption b{display:block;font-size:1rem;color:var(--ink)}
.avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:#fff;font-size:.95rem;font-weight:700}
.av-blue{background:var(--blue)}
.av-green{background:var(--green)}
.av-ink{background:var(--ink)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq-grid .section-head{margin-bottom:0}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px;padding:16px 0;font-size:1.1rem;font-weight:600;line-height:1.35;cursor:pointer;list-style:none;
  transition:color .15s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;margin:0 6px 5px 0;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  rotate:45deg;transition:rotate .25s var(--ease),translate .25s var(--ease);
}
.faq details[open] summary::after{rotate:225deg;translate:0 6px}
.faq summary:hover{color:var(--blue)}
.faq details p{max-width:62ch;padding:0 0 22px;color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* Closing call to action */
.cta{padding-bottom:clamp(64px,8vw,112px)}
.cta-panel{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px 36px;
  padding:clamp(28px,4vw,52px);border-radius:24px;background:var(--blue);color:#fff;
}
.cta-mark{width:clamp(72px,8vw,104px);height:auto}
.cta-ring{fill:none;stroke:#fff;stroke-width:3}
.cta-copy h2{font-size:clamp(2.1rem,1.6rem + 1.9vw,3.3rem);line-height:.95}
.cta-copy p{margin-top:10px;color:rgba(255,255,255,.88)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Footer */
.site-footer{padding:clamp(48px,6vw,72px) 0 28px;background:var(--tint);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:32px}
.footer-brand p{max-width:30ch;margin-top:14px;color:var(--ink-2)}
.footer-h{margin-bottom:12px;font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.4;letter-spacing:0}
.footer-list{display:grid;gap:8px;font-size:.98rem;color:var(--ink-2)}
.footer-list a{text-decoration:none}
.footer-list a:hover{color:var(--blue);text-decoration:underline}
.footer-list em{font-style:normal;font-size:.9rem;color:var(--muted)}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);
}

/* WhatsApp button */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:40;
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 10px 24px -6px rgba(0,0,0,.3);
  transition:scale .18s var(--ease);
}
.fab svg{width:30px;height:30px;fill:currentColor}
.fab:hover{scale:1.06}
.fab:active{scale:.96}

/* Back to top, with a ring that fills as you scroll */
.to-top{
  position:fixed;right:23px;bottom:88px;z-index:40;
  display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--ink);cursor:pointer;
  box-shadow:0 2px 6px rgba(14,34,53,.12),0 8px 20px -6px rgba(14,34,53,.28);
  opacity:0;scale:.8;pointer-events:none;
  transition:opacity .25s var(--ease),scale .25s var(--ease),color .15s var(--ease);
}
.to-top.is-visible{opacity:1;scale:1;pointer-events:auto}
.to-top.is-visible:active{scale:.96}
.to-top:hover{color:var(--blue)}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.to-top-ring circle{fill:none;stroke-width:3}
.to-top-ring .track{stroke:var(--line)}
.to-top-ring .bar{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.to-top-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:translate .2s var(--ease)}
.to-top:hover .to-top-arrow{translate:0 -2px}

/* Motion. Everything below is skipped when the visitor prefers reduced motion. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1)}
.status-open::before{box-shadow:0 0 0 0 rgba(12,122,79,.45)}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.sign-board{perspective:1100px}
.steps li{position:relative}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:25px;top:58px;bottom:-22px;width:2px;border-radius:2px;
  background:var(--blue);opacity:.25;transform-origin:50% 0;
}
.msg-slot{position:relative;display:grid;justify-items:start}
.typing{display:none}

@media (prefers-reduced-motion:no-preference){
  /* Small responses to hover */
  .btn svg{transition:scale .2s var(--ease)}
  .btn:hover svg{scale:1.12}
  .brand-mark{transition:rotate .3s var(--ease)}
  .brand:hover .brand-mark{rotate:-8deg}
  .sign .roundel{transition:scale .3s var(--ease)}
  .sign:hover .roundel{scale:1.07}
  .who img{transition:scale .9s var(--ease-out)}
  .who:hover img{scale:1.05}

  /* Hero load sequence */
  .rise{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms + 80ms)}
  .hero-badge{animation:stamp .55s var(--ease-out) .65s both}
  .sign-w{stroke-dasharray:1;stroke-dashoffset:1;animation:draw-w .8s cubic-bezier(.65,0,.35,1) 1.05s forwards}
  .hero-frame img{animation:drift 26s ease-in-out infinite alternate}

  /* Scroll reveals (JS adds .is-in, then .is-done once settled) */
  .js [data-reveal]{
    opacity:0;translate:0 22px;
    transition-property:opacity,translate,scale,rotate,clip-path;
    transition-duration:.75s;transition-timing-function:var(--ease-out);
    transition-delay:calc(var(--i,0) * 90ms);
  }
  .js [data-reveal].is-in{opacity:1;translate:0 0}
  .js [data-reveal="flip"]{translate:none;rotate:x -80deg;transform-origin:50% 0}
  .js [data-reveal="flip"].is-in{rotate:x 0deg}
  .js [data-reveal="wipe"]{opacity:1;translate:none;clip-path:inset(100% 0 0 0 round 18px);transition-duration:1s}
  .js [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0 round 18px)}
  .js [data-reveal="wipe"] img{scale:1.18;transition:scale 1.4s var(--ease-out) calc(var(--i,0) * 90ms)}
  .js [data-reveal="wipe"].is-in img{scale:1}
  .js [data-reveal="wipe"].is-done:hover img{scale:1.05;transition-duration:.9s}
  .js [data-reveal="wipe"] .who-label{opacity:0;translate:0 8px;transition:opacity .5s var(--ease-out),translate .5s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + .55s)}
  .js [data-reveal="wipe"].is-in .who-label{opacity:1;translate:0 0}

  /* Warning sign drops in and the mark blinks twice */
  .js .warning-sign{opacity:0;translate:0 -26px;rotate:-12deg;transform-origin:50% 0;transition:opacity .5s var(--ease-out) .25s,translate .8s var(--ease-out) .25s,rotate 1s var(--ease-out) .25s}
  .js .warning-panel.is-in .warning-sign{opacity:1;translate:0 0;rotate:0deg}
  .js .warning-panel.is-in .tri-mark{animation:blink .8s ease-in-out 1.2s 2}

  /* Green reason signs and step numbers pop in */
  .js .reasons [data-reveal] .safe,
  .js .steps [data-reveal] .step-no{opacity:0;scale:.25;filter:blur(4px);transition:opacity .5s var(--ease),scale .5s var(--ease),filter .5s var(--ease);transition-delay:calc(var(--i,0) * 90ms + .15s)}
  .js .reasons [data-reveal].is-in .safe,
  .js .steps [data-reveal].is-in .step-no{opacity:1;scale:1;filter:blur(0)}
  .js .steps li:not(:last-child)::after{scale:1 0;transition:scale .7s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + .4s)}
  .js .steps li.is-in:not(:last-child)::after{scale:1 1}

  /* WhatsApp chat plays out: message, typing, reply, thanks */
  .js .chat .msg{opacity:0;translate:0 10px;scale:.97}
  .js .chat .msg-out{transform-origin:100% 0}
  .js .chat .msg-in{transform-origin:0 0}
  .js .chat.is-in .msg{animation:msg-in .45s var(--ease-out) forwards}
  .js .chat.is-in .chat-body > .msg:first-child{animation-delay:.35s}
  .js .chat.is-in .msg-slot .msg{animation-delay:2.4s}
  .js .chat.is-in .chat-body > .msg:last-child{animation-delay:3.4s}
  .js .chat .typing{
    position:absolute;left:0;top:0;display:inline-flex;gap:4px;align-items:center;
    padding:12px 14px;border-radius:12px;border-top-left-radius:4px;background:#fff;
    box-shadow:0 1px 1px rgba(11,20,26,.1);opacity:0;
  }
  .js .chat.is-in .typing{animation:typing-show 1.5s linear .9s forwards}
  .js .chat .typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:dot 1s ease-in-out infinite}
  .js .chat .typing i:nth-child(2){animation-delay:.15s}
  .js .chat .typing i:nth-child(3){animation-delay:.3s}
  .js .chat .ticks-read{color:#8696A0}
  .js .chat.is-in .chat-body > .msg:first-child .ticks-read{animation:read .3s ease 1.6s forwards}
  .js .chat.is-in .chat-body > .msg:last-child .ticks-read{animation:read .3s ease 4.3s forwards}

  /* Each digit reel spins and lands; later digits land a little later */
  .is-rolling .reel-strip{animation:roll var(--dur,1.4s) cubic-bezier(.16,.84,.24,1) forwards}

  /* Ticker runs at a steady speed; JS sets --shift (one group wide) and --dur */
  .js .ticker-track{animation:ticker var(--dur,45s) linear infinite}
  .js .ticker-rev .ticker-track{animation-direction:reverse}

  /* Live dot on "Dibuka sekarang" and a soft pulse on the WhatsApp button */
  .status-open::before{animation:live 2s ease-out infinite}
  .fab::after{animation:fab-pulse 3.6s ease-out 2.5s infinite}
}
@keyframes rise{from{opacity:0;translate:0 16px}}
@keyframes ticker{to{translate:calc(var(--shift,50%) * -1) 0}}
@keyframes stamp{from{opacity:0;scale:1.35}}
@keyframes draw-w{to{stroke-dashoffset:0}}
@keyframes roll{to{translate:-50% calc(var(--to) * -1em)}}
@keyframes drift{from{scale:1.03;translate:0 0}to{scale:1.1;translate:-2% -1.5%}}
@keyframes blink{50%{opacity:.15}}
@keyframes msg-in{to{opacity:1;translate:0 0;scale:1}}
@keyframes typing-show{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes dot{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}
@keyframes read{to{color:#53BDEB}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(12,122,79,.45)}70%,100%{box-shadow:0 0 0 8px rgba(12,122,79,0)}}
@keyframes fab-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}45%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}

@media print{
  .js [data-reveal],.js [data-reveal] img,.js [data-reveal] .who-label,.js .chat .msg{opacity:1!important;translate:none!important;rotate:none!important;scale:none!important;clip-path:none!important}
  .bubbles,.to-top,.fab{display:none}
}

/* Responsive */
@media (max-width:1080px){
  .header-phone{display:none}
  .nav{gap:20px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:920px){
  .menu-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;
  }
  .menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:translate .2s var(--ease),rotate .2s var(--ease)}
  body.menu-open .menu-btn span:first-child{translate:0 4px;rotate:45deg}
  body.menu-open .menu-btn span:last-child{translate:0 -4px;rotate:-45deg}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:4px 16px 16px;background:#fff;
    box-shadow:0 1px 0 var(--line),0 16px 30px -18px rgba(14,34,53,.3);
  }
  body.menu-open .nav{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.125rem}

  .hero-grid{grid-template-columns:1fr}
  .hero-photo{max-width:640px}

  .warning-panel{grid-template-columns:auto minmax(0,1fr)}
  .warning-figures{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 40px;padding:20px 0 0;border-left:0;border-top:2px solid rgba(14,34,53,.2)}

  .who-grid{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .who{min-height:0;aspect-ratio:4/3}
  .who-lg{grid-column:1/-1;grid-row:auto;aspect-ratio:16/11}

  .signs-grid{grid-template-columns:1fr}
  .offer-main{grid-template-columns:1fr}
  .offer-main .offer-img{aspect-ratio:16/9}
  .offer-row{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr;gap:32px}
  .faq-grid{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:auto minmax(0,1fr)}
  .cta-actions{grid-column:1/-1}
}

@media (max-width:640px){
  .header-bar{height:64px;gap:12px}
  .header-cta{display:none}
  .brand-mark{width:36px;height:36px}
  .brand-word{font-size:1.3rem}
  .hero-offer .btn{width:100%}
  .warning-panel{grid-template-columns:1fr}
  .warning-sign{width:64px}
  .who{aspect-ratio:1/1}
  .who-lg{aspect-ratio:16/13}
  .who-label{padding:6px 10px;font-size:.88rem}
  .who-ask{padding:20px}
  .signs .section-head{padding:20px}
  .sign-board{grid-template-columns:1fr 1fr;gap:12px}
  .reasons{grid-template-columns:1fr;gap:28px}
  .reasons li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px}
  .reasons .safe{grid-row:span 2;margin-bottom:0}
  .reasons p{grid-column:2}
  .cta-panel{grid-template-columns:1fr}
  .cta-actions .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .fab{right:14px;bottom:14px;width:54px;height:54px}
  .to-top{right:17px;bottom:78px}
  .ticker{padding:16px 0;gap:10px}
  .ticker-group{gap:28px;padding-right:28px}
  .tk-nestle{height:34px}
  .tk-aicha{height:23px}
  .tk-mixue{height:25px}
  .tk-sep svg{width:20px;height:20px}
}