:root { --teal:#0891B2; --teal-d:#0E7490; --teal-dd:#155E75; --aqua:#22D3EE; --leaf:#16A34A; --ink:#0B2B29; }

  html { scroll-behavior: smooth; }
  body { font-family:'Noto Sans',sans-serif; color:#0B2B29; background:#F7FEFD; overflow-x:hidden; }
  h1,h2,h3,h4,.font-display { font-family:'Figtree',sans-serif; }

  ::selection { background:#22D3EE; color:#0B2B29; }

  /* Scrollbar */
  ::-webkit-scrollbar { width:11px; }
  ::-webkit-scrollbar-track { background:#E6FBF7; }
  ::-webkit-scrollbar-thumb { background:linear-gradient(#0891B2,#0E7490); border-radius:99px; border:2px solid #E6FBF7; }

  /* ---------- KEYFRAMES ---------- */
  @keyframes aurora { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.15)} 100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
  @keyframes floaty2 { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
  @keyframes spin-slow { to{transform:rotate(360deg)} }
  @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes pulse-ring { 0%{transform:scale(.85);opacity:.7} 70%{transform:scale(1.6);opacity:0} 100%{opacity:0} }
  @keyframes drawline { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
  @keyframes gridmove { from{background-position:0 0} to{background-position:64px 64px} }
  @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal { opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:transform,opacity; }
  .reveal.is-in { opacity:1; transform:none; }
  .reveal-l { opacity:0; transform:translateX(-44px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal-l.is-in { opacity:1; transform:none; }
  .reveal-r { opacity:0; transform:translateX(44px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal-r.is-in { opacity:1; transform:none; }
  .reveal-sc { opacity:0; transform:scale(.92); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal-sc.is-in { opacity:1; transform:none; }
  [data-delay="1"]{transition-delay:.08s} [data-delay="2"]{transition-delay:.16s} [data-delay="3"]{transition-delay:.24s}
  [data-delay="4"]{transition-delay:.32s} [data-delay="5"]{transition-delay:.40s} [data-delay="6"]{transition-delay:.48s}

  /* ---------- UTILITIES ---------- */
  .aurora-blob { position:absolute; border-radius:50%; filter:blur(60px); animation:aurora 18s ease-in-out infinite; }
  .glass { background:rgba(255,255,255,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .gridbg { background-image:linear-gradient(rgba(8,145,178,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(8,145,178,.07) 1px,transparent 1px); background-size:64px 64px; animation:gridmove 30s linear infinite; }
  .text-grad { background:linear-gradient(120deg,#0E7490,#0891B2 40%,#22D3EE); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .shine { position:relative; overflow:hidden; }
  .shine::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s; }
  .shine:hover::after { transform:translateX(120%); }
  .lift { transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
  .lift:hover { transform:translateY(-8px); box-shadow:0 26px 50px -22px rgba(8,145,178,.45); }
  .nav-link { position:relative; }
  .nav-link::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:linear-gradient(90deg,#0891B2,#22D3EE); transition:width .3s; }
  .nav-link:hover::after { width:100%; }
  .marquee-track { display:flex; width:max-content; animation:marquee 32s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state:paused; }
  .btn-grad { background:linear-gradient(120deg,#16A34A,#22C55E); box-shadow:0 14px 30px -10px rgba(22,163,74,.6); }
  .btn-teal { background:linear-gradient(120deg,#0E7490,#0891B2); box-shadow:0 14px 30px -10px rgba(8,145,178,.55); }

  /* progress bar */
  #progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:90; background:linear-gradient(90deg,#0891B2,#22D3EE,#22C55E); box-shadow:0 0 12px rgba(34,211,238,.7); }

  /* product modal */
  #prodModal { display:none; }
  #prodModal.open { display:flex; }
  #prodBackdrop { opacity:0; transition:opacity .35s ease; }
  #prodModal.open #prodBackdrop { opacity:1; }
  #prodDialog { opacity:0; transform:translateY(18px) scale(.96); transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); }
  #prodModal.open #prodDialog { opacity:1; transform:none; }

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