/* ===========================================================
   GoChhutti — Lagoon Spark tokens (from gochhutti-brand-kit.html)
   Shared across all mockup versions.
   =========================================================== */
:root{
  --lagoon:#006494; --lagoon-700:#00506F; --lagoon-100:#DCEEF6;
  --aqua:#00A6A6; --aqua-700:#008B8B; --aqua-800:#056363; --aqua-100:#E6FAF8;
  --sunset:#FF6B35; --sunset-400:#FF8452; --sunset-700:#E2551F; --sunset-800:#C24310; --sunset-100:#FFEDE5;
  --palm:#2FBF71; --palm-100:#E4F7EC;
  --sand:#FFD166; --sand-100:#FFF6DF;
  --deepsea:#17324D; --deepsea-900:#0B1F3A;
  --mist:#F5FBFD; --seamist:#D9E8EE; --harbor:#667085;
  --coral:#E5484D; --coral-600:#D33B40; --coral-100:#FDEAEA;
  --sky:#2E90FA; --sky-100:#E8F2FE; --white:#fff;

  --grad-brand:linear-gradient(135deg,#006494 0%,#00A6A6 100%);
  --grad-hero:linear-gradient(148deg,#0B1F3A 0%,#006494 52%,#00A6A6 100%);
  --grad-spark:linear-gradient(135deg,#FF6B35 0%,#FFD166 100%);

  --font-display:'Sora',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  --sh-xs:0 1px 2px rgba(23,50,77,.06);
  --sh-sm:0 1px 3px rgba(23,50,77,.08),0 4px 12px rgba(23,50,77,.05);
  --sh-md:0 4px 16px rgba(23,50,77,.10),0 12px 32px rgba(23,50,77,.07);
  --sh-lg:0 12px 32px rgba(23,50,77,.14),0 32px 64px rgba(23,50,77,.10);
  --sh-focus:0 0 0 3px rgba(0,100,148,.22);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s24:96px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);color:var(--deepsea);background:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--sunset);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(1240px,100% - 32px)}}

/* ---------- logo ---------- */
/* Wordmark only — no icon. "Chhutti" in orange; "Go" and ".com" take the page ink,
   which is white over the hero video and deep navy once the header turns solid. */
.gc-logo{display:inline-block;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.035em;font-size:24px;line-height:1;white-space:nowrap;color:inherit}
.gc-logo b{font-weight:800;color:var(--sunset)}
.gc-logo i{font-style:normal;font-weight:800;color:inherit}
.gc-logo .tld{font-weight:700;color:inherit;letter-spacing:-.02em}

/* ---------- shared buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-full);font-weight:700;font-size:15px;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  cursor:pointer;min-height:48px}
.btn svg{width:18px;height:18px;flex:none}
.btn-spark{background:var(--grad-spark);color:#3A1B08;box-shadow:0 8px 24px rgba(255,107,53,.38)}
.btn-spark:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(255,107,53,.5)}
.btn-brand{background:var(--grad-brand);color:#fff;box-shadow:0 8px 24px rgba(0,100,148,.32)}
.btn-brand:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,100,148,.44)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(8px);
  background:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.btn-outline{border:1.5px solid var(--seamist);color:var(--deepsea);background:#fff}
.btn-outline:hover{border-color:var(--lagoon);color:var(--lagoon);transform:translateY(-2px)}

/* ---------- floating action rail (WhatsApp + Call) ---------- */
.gc-float{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:12px}
.gc-fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(11,31,58,.3);color:#fff;position:relative;
  transition:transform .3s var(--ease-out-expo),box-shadow .3s var(--ease)}
.gc-fab svg{width:27px;height:27px}
.gc-fab:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 14px 34px rgba(11,31,58,.42)}
.gc-fab.wa{background:#25D366}
.gc-fab.call{background:var(--grad-brand)}
.gc-fab::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;opacity:.5;animation:gcping 2.6s var(--ease) infinite}
.gc-fab.call::after{animation-delay:1.3s}
@keyframes gcping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.75);opacity:0}}
.gc-fab .gc-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--deepsea-900);color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;
  border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:.25s var(--ease);white-space:nowrap}
.gc-fab:hover .gc-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:640px){.gc-float{right:14px;bottom:14px}.gc-fab{width:52px;height:52px}
  .gc-fab .gc-tip{display:none}}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}