/* ==========================================================================
   Entrepreneur Spirit — Design Tokens
   ========================================================================== */
:root{
  /* Color */
  --c-ivory:      #FAF6EE;
  --c-pearl:      #F2ECDF;
  --c-white:      #FFFFFF;
  --c-ink:        #2B2620;
  --c-ink-soft:   #6E6656;
  --c-ink-faint:  #9A927E;
  --c-gold:       #B8912F;
  --c-gold-light: #E7C77E;
  --c-blue:       #7C9EC7;
  --c-orange:     #E38A4B;

  --c-glass:        rgba(255,255,255,.5);
  --c-glass-strong: rgba(255,255,255,.72);
  --c-glass-border: rgba(255,255,255,.85);
  --c-glass-shadow: rgba(150,120,60,.14);

  /* Type */
  --f-display: "Anek Bangla", "Hind Siliguri", sans-serif;
  --f-body: "Hind Siliguri", "Anek Bangla", sans-serif;

  /* Layout */
  --max-w: 1240px;
  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 32px;
  --nav-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--c-ink);
  background:var(--c-ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  margin:0;
  letter-spacing:-.01em;
  color:var(--c-ink);
}

p{ margin:0; color:var(--c-ink-soft); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
svg{ width:100%; height:100%; fill:currentColor; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:9999;
  background:var(--c-ink); color:var(--c-white); padding:.8rem 1.2rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--c-gold); outline-offset:3px; border-radius:6px; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--c-pearl); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--c-gold-light),var(--c-gold)); border-radius:10px; border:2px solid var(--c-pearl); }

/* ==========================================================================
   Ambient background — live sky wallpaper with drifting clouds
   ========================================================================== */
.ambient-bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--c-ivory); }

.sky-bg{
  background:linear-gradient(180deg,
    #1e6fbf 0%,
    #3286d1 14%,
    #5aa3e0 30%,
    #8ac2ec 48%,
    #bfe0f5 68%,
    #eaf5fb 88%,
    #ffffff 100%);
}

.sun-glow{
  position:absolute; top:-8%; right:10%; width:34vw; height:34vw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,252,235,.95) 0%, rgba(255,244,205,.4) 45%, transparent 72%);
  filter:blur(4px); opacity:.85; animation:sun-breathe 10s ease-in-out infinite;
}
@keyframes sun-breathe{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.05); opacity:.95; } }

/* Cloud shapes — soft white puffs, layered for parallax depth */
.cloud{ position:absolute; left:0; background-repeat:no-repeat; background-size:contain; will-change:transform; animation-name:cloud-drift; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes cloud-drift{
  from{ transform:translateX(-32vw); }
  to{ transform:translateX(132vw); }
}
.shape-1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='60' cy='62' rx='52' ry='32'/%3E%3Cellipse cx='105' cy='45' rx='42' ry='34'/%3E%3Cellipse cx='145' cy='58' rx='38' ry='28'/%3E%3Cellipse cx='90' cy='72' rx='68' ry='26'/%3E%3C/g%3E%3C/svg%3E"); }
.shape-2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='55' cy='68' rx='48' ry='30'/%3E%3Cellipse cx='100' cy='40' rx='50' ry='38'/%3E%3Cellipse cx='150' cy='55' rx='45' ry='32'/%3E%3Cellipse cx='180' cy='72' rx='34' ry='24'/%3E%3Cellipse cx='95' cy='80' rx='80' ry='26'/%3E%3C/g%3E%3C/svg%3E"); }
.shape-3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 90'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='45' cy='55' rx='38' ry='24'/%3E%3Cellipse cx='85' cy='38' rx='36' ry='28'/%3E%3Cellipse cx='120' cy='50' rx='32' ry='22'/%3E%3Cellipse cx='75' cy='62' rx='58' ry='20'/%3E%3C/g%3E%3C/svg%3E"); }

.grain{ position:absolute; inset:0; opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce){
  .cloud{ animation:none; }
  .sun-glow{ animation:none; }
}
@media (max-width:640px){
  .cloud{ opacity:.75; }
}

.mouse-glow{
  position:fixed; width:520px; height:520px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(184,145,47,.10), transparent 70%);
  transform:translate(-50%,-50%); left:50%; top:50%;
  transition:left .25s var(--ease-soft), top .25s var(--ease-soft);
}
@media (hover:none){ .mouse-glow{ display:none; } }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--c-ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transition:opacity .7s var(--ease-out), visibility .7s var(--ease-out);
}
.loader.loaded{ opacity:0; visibility:hidden; }
.loader-mark{ position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.loader-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid rgba(184,145,47,.18); border-top-color:var(--c-gold); animation:spin 1s linear infinite; }
.loader-logo{ width:52px; height:auto; animation:pulse-core 1.4s ease-in-out infinite; filter:drop-shadow(0 6px 14px rgba(20,30,50,.2)); }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes pulse-core{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(.85);} }
.loader-text{ font-family:var(--f-display); font-weight:700; letter-spacing:.02em; color:var(--c-ink); font-size:1.05rem; }

/* ==========================================================================
   Cursor
   ========================================================================== */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:7px; height:7px; background:var(--c-gold); transition:transform .1s var(--ease-soft),opacity .2s; }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(184,145,47,.55); transition:transform .18s var(--ease-soft),opacity .2s,width .2s,height .2s; }
.cursor-ring.active{ width:50px; height:50px; background:rgba(184,145,47,.08); }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* Scroll progress */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:9999;
  background:linear-gradient(90deg,var(--c-gold),var(--c-orange)); box-shadow:0 0 10px rgba(184,145,47,.5); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.section{ max-width:var(--max-w); margin:0 auto; padding:min(11vw,7rem) 1.6rem; }
.section-head{ text-align:center; max-width:760px; margin:0 auto 3.4rem; }
.section-head h2{ font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.25; margin-top:.7rem; }
.eyebrow{ display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--c-gold); background:rgba(184,145,47,.1); padding:.4rem 1rem; border-radius:100px; border:1px solid rgba(184,145,47,.22); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem 1.8rem; border-radius:100px; font-weight:600; font-size:.98rem; border:1px solid transparent; position:relative; overflow:hidden; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out); }
.btn.full{ width:100%; }
.btn-sm{ padding:.6rem 1.2rem; font-size:.86rem; }
.btn-primary{ background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); color:#3a2c07; box-shadow:0 10px 30px -8px rgba(184,145,47,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -8px rgba(184,145,47,.65); }
.btn-outline{ background:rgba(255,255,255,.35); color:var(--c-ink); border-color:rgba(43,38,32,.16); backdrop-filter:blur(8px); }
.btn-outline:hover{ transform:translateY(-3px); border-color:var(--c-gold); background:rgba(255,255,255,.6); }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:rgba(43,38,32,.14); }
.btn-ghost:hover{ background:rgba(184,145,47,.1); border-color:var(--c-gold); }

/* Glass card base */
.glass-card{
  background:var(--c-glass);
  border:1px solid var(--c-glass-border);
  border-radius:var(--radius-m);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 20px 50px -20px var(--c-glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s;
}

/* Scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; transition:background .4s,box-shadow .4s,height .4s; }
.navbar.scrolled{ height:68px; background:rgba(250,246,238,.72); backdrop-filter:blur(16px) saturate(160%); box-shadow:0 8px 30px -14px rgba(120,90,30,.25); border-bottom:1px solid rgba(255,255,255,.6); }
.nav-inner{ width:100%; max-width:var(--max-w); margin:0 auto; padding:0 1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand-mark{ width:auto; height:40px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(20,30,50,.18)); }
.brand-name{ font-family:var(--f-display); font-weight:700; font-size:1.08rem; }
.brand-name em{ font-style:normal; color:var(--c-gold); }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{ font-size:.94rem; font-weight:500; color:var(--c-ink-soft); position:relative; padding:.3rem 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--c-gold); transition:right .35s var(--ease-out); }
.nav-links a:hover{ color:var(--c-ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.nav-mobile-cta{ padding:.85rem 1.9rem; color:#3a2c07; background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); border-radius:100px; font-weight:600; box-shadow:0 10px 26px -8px rgba(184,145,47,.55); }
.nav-links a.nav-mobile-cta::after{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:1.1rem; }
.nav-mobile-cta{ display:none; }
.live-clock{ font-size:.82rem; color:var(--c-ink-faint); font-variant-numeric:tabular-nums; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--c-ink); border-radius:2px; transition:transform .3s,opacity .3s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h); }
.hero-inner{ max-width:var(--max-w); margin:0 auto; width:100%; padding:2rem 1.6rem; display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; }
.hero-title{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.16; margin-top:1.1rem; }
.text-glow{ background:linear-gradient(100deg,var(--c-gold) 10%,var(--c-orange) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ margin-top:1.3rem; font-size:1.08rem; max-width:520px; line-height:1.75; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:1.3rem; margin-top:3rem; }
.trust-item{ display:flex; flex-direction:column; }
.trust-item strong{ font-family:var(--f-display); font-size:1.5rem; color:var(--c-ink); }
.trust-item span{ font-size:.78rem; color:var(--c-ink-faint); }
.trust-divider{ width:1px; height:32px; background:rgba(43,38,32,.14); }

.scroll-cue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); width:24px; height:38px; border:2px solid rgba(43,38,32,.25); border-radius:100px; }
.scroll-cue span{ position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--c-gold); border-radius:4px; transform:translateX(-50%); animation:cue 1.6s ease-in-out infinite; }
@keyframes cue{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:20px;} 100%{ opacity:0; top:6px;} }

/* Orbit system — hero signature element */
.hero-visual{ position:relative; height:min(92vw,540px); }
.orbit-system{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; perspective:1200px; transform-style:preserve-3d; }
.orbit-core{
  position:relative; width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg,#ffffff,var(--c-pearl) 55%,#f0dfb0 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 26px 60px -14px rgba(8,28,55,.55),
    0 10px 22px -8px rgba(184,145,47,.55),
    inset 0 3px 6px rgba(255,255,255,.95),
    inset 0 -6px 10px rgba(120,90,30,.22);
  z-index:5; animation:core-float 6s ease-in-out infinite;
}
.orbit-core-icon{ width:38px; height:38px; color:var(--c-gold); filter:drop-shadow(0 2px 3px rgba(120,90,30,.4)); }
.orbit-core-glow{ position:absolute; inset:-34px; border-radius:50%; background:radial-gradient(circle,rgba(184,145,47,.4),transparent 70%); filter:blur(8px); }
@keyframes core-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.orbit-ring{
  position:absolute; border-radius:50%;
  border:2.5px dashed rgba(184,145,47,.62);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.5),
    inset 0 -3px 8px rgba(15,25,45,.18),
    0 22px 46px -16px rgba(8,28,55,.5),
    0 0 26px rgba(184,145,47,.22);
}
.ring-1{ width:320px; height:320px; animation:spin-slow 26s linear infinite; }
.ring-2{ width:440px; height:440px; border-color:rgba(90,135,180,.6); animation:spin-slow-rev 34s linear infinite; }
@keyframes spin-slow{ to{ transform:rotate(360deg);} }
@keyframes spin-slow-rev{ to{ transform:rotate(-360deg);} }

.orbit-node{ position:absolute; top:50%; left:50%; transform:rotate(var(--angle)) translate(160px) rotate(calc(-1 * var(--angle))); display:flex; flex-direction:column; align-items:center; gap:.4rem; animation:counter-spin 26s linear infinite; }
.ring-1 .orbit-node{ animation-duration:26s; }
.ring-2 .orbit-node{ transform:rotate(var(--angle)) translate(220px) rotate(calc(-1 * var(--angle))); animation-duration:34s; animation-direction:reverse; }
.node-icon{
  width:52px; height:52px; border-radius:16px; background:var(--c-glass-strong);
  border:1.5px solid rgba(255,255,255,.95); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:13px;
  box-shadow:
    0 20px 40px -14px rgba(8,28,55,.55),
    0 6px 14px -4px rgba(120,90,30,.4),
    inset 0 1px 2px rgba(255,255,255,.8);
  color:var(--c-gold);
}
.node-ads .node-icon{ color:var(--c-orange); }
.node-pixel .node-icon{ color:var(--c-blue); }
.node-analytics .node-icon{ color:var(--c-blue); }
.node-growth .node-icon{ color:var(--c-orange); }
.node-growth-main .node-icon{ color:var(--c-orange); }
.node-sales .node-icon{ color:var(--c-gold); }
.node-automation .node-icon{ color:var(--c-blue); }
.node-label{ font-size:.72rem; font-weight:600; color:var(--c-ink); background:rgba(255,255,255,.88); padding:.15rem .55rem; border-radius:100px; white-space:nowrap; box-shadow:0 6px 14px -6px rgba(8,28,55,.35); }

.orbit-glass{ position:absolute; border-radius:32%; background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.15)); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(6px); box-shadow:0 24px 46px -20px rgba(8,28,55,.45); }
.g1{ width:60px; height:60px; top:6%; left:4%; transform:rotate(20deg); animation:drift1 9s ease-in-out infinite; }
.g2{ width:40px; height:40px; bottom:10%; right:2%; border-radius:50%; animation:drift2 11s ease-in-out infinite; }
.g3{ width:34px; height:34px; bottom:22%; left:0%; transform:rotate(-15deg); animation:drift1 7.5s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translateY(0) rotate(20deg);} 50%{ transform:translateY(-16px) rotate(35deg);} }
@keyframes drift2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(14px);} }
@keyframes counter-spin{ 0%{ } 100%{ } }

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.card-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; padding:13px; color:var(--c-gold); background:linear-gradient(135deg,rgba(184,145,47,.16),rgba(124,158,199,.12)); margin-bottom:1.1rem; }
.glass-card{ padding:2rem 1.7rem; }
.glass-card h3{ font-size:1.12rem; margin-bottom:.55rem; }
.glass-card p{ font-size:.92rem; }
.tilt{ transform-style:preserve-3d; will-change:transform; }
.tilt:hover{ box-shadow:0 30px 60px -22px var(--c-glass-shadow), inset 0 1px 0 rgba(255,255,255,.7); }

/* ==========================================================================
   Packages
   ========================================================================== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch; }
.price-card{ display:flex; flex-direction:column; padding:2.4rem 2rem; position:relative; }
.price-card.popular{ background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(247,231,196,.55)); border-color:rgba(184,145,47,.5); transform:translateY(-10px) scale(1.02); box-shadow:0 30px 70px -20px rgba(184,145,47,.35); }
.popular-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); color:#3a2c07; font-size:.74rem; font-weight:700; padding:.4rem 1rem; border-radius:100px; box-shadow:0 8px 20px -6px rgba(184,145,47,.6); }
.price-desc{ font-size:.88rem; margin-top:.3rem; }
.price-tag{ margin:1.5rem 0 1.7rem; display:flex; align-items:baseline; gap:.15rem; }
.price-currency{ font-size:1.3rem; font-weight:700; color:var(--c-gold); }
.price-amount{ font-family:var(--f-display); font-size:2.6rem; font-weight:800; }
.price-period{ font-size:.9rem; color:var(--c-ink-faint); }
.price-features{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:2rem; flex:1; }
.price-features li{ font-size:.92rem; padding-left:1.6rem; position:relative; color:var(--c-ink-soft); }
.price-features li::before{ content:""; position:absolute; left:0; top:.35rem; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); }

/* ==========================================================================
   Consultancy
   ========================================================================== */
.consultancy-card{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:3.2rem; }
.consultancy-copy h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); margin-top:.8rem; }
.consultancy-copy p{ margin-top:1.1rem; max-width:480px; }
.consultancy-benefits{ margin:1.6rem 0 1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.consultancy-benefits li{ padding-left:1.7rem; position:relative; font-weight:500; font-size:.94rem; color:var(--c-ink); }
.consultancy-benefits li::before{ content:"✦"; position:absolute; left:0; color:var(--c-gold); }
.consultancy-timeline{ display:flex; flex-direction:column; gap:1.5rem; position:relative; }
.timeline-step{ display:flex; gap:1rem; align-items:flex-start; }
.timeline-dot{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); color:#3a2c07; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--f-display); box-shadow:0 8px 18px -6px rgba(184,145,47,.5); }
.timeline-step h4{ font-size:1rem; margin-bottom:.2rem; }
.timeline-step p{ font-size:.85rem; }

/* ==========================================================================
   Why choose us
   ========================================================================== */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.stat-card{ text-align:center; padding:2.4rem 1.2rem; }
.stat-number{ display:block; font-family:var(--f-display); font-size:2.6rem; font-weight:800; background:linear-gradient(120deg,var(--c-gold),var(--c-orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ display:block; margin-top:.5rem; font-size:.88rem; color:var(--c-ink-soft); }

/* ==========================================================================
   Process
   ========================================================================== */
.process-track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.process-line{ position:absolute; top:20px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(90deg,rgba(184,145,47,.4) 0 10px,transparent 10px 20px); z-index:0; }
.process-step{ position:relative; z-index:1; text-align:center; }
.process-num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--c-white); border:2px solid var(--c-gold); font-family:var(--f-display); font-weight:700; color:var(--c-gold); margin-bottom:1rem; box-shadow:0 10px 24px -10px rgba(184,145,47,.4); }
.process-step h3{ font-size:1rem; margin-bottom:.4rem; }
.process-step p{ font-size:.84rem; }

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.portfolio-item{ text-align:center; padding:2rem 1.6rem 2.2rem; }
.device-mock{ margin:0 auto 1.6rem; }
.device-mock.laptop{ width:100%; aspect-ratio:16/10; border-radius:14px; background:linear-gradient(150deg,#e9e1cf,#cfc6ae); padding:8px; box-shadow:0 24px 50px -18px rgba(120,90,30,.4); transform:perspective(700px) rotateX(6deg); }
.device-mock.mobile{ width:56%; aspect-ratio:9/17.5; margin-left:auto; margin-right:auto; border-radius:26px; background:linear-gradient(150deg,#e9e1cf,#cfc6ae); padding:8px; box-shadow:0 24px 50px -18px rgba(120,90,30,.4); }
.device-screen{ display:block; width:100%; height:100%; border-radius:8px; background:linear-gradient(155deg,var(--c-pearl),var(--c-white)); object-fit:cover; object-position:top; }
.device-mock.mobile .device-screen{ border-radius:18px; }
.device-screen-mobile{ display:none; }
.ps-1{ background-image:linear-gradient(155deg,#f6ecd9,#fff),radial-gradient(circle at 25% 20%,var(--c-gold-light),transparent 45%); }
.ps-2{ background-image:linear-gradient(155deg,#e4eef7,#fff),radial-gradient(circle at 75% 25%,var(--c-blue),transparent 45%); }
.ps-3{ background-image:linear-gradient(155deg,#fbe6d3,#fff),radial-gradient(circle at 30% 70%,var(--c-orange),transparent 45%); }
.portfolio-item h3{ font-size:1.02rem; }
.portfolio-item p{ font-size:.85rem; margin-top:.35rem; }
.portfolio-item.live{ position:relative; display:block; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.portfolio-item.live:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -20px var(--c-glass-shadow); }
.live-badge{ position:absolute; top:14px; right:14px; font-size:.7rem; font-weight:700; letter-spacing:.03em; color:#1f6b3f; background:rgba(60,170,110,.16); border:1px solid rgba(60,170,110,.35); padding:.3rem .7rem; border-radius:100px; display:flex; align-items:center; gap:.35rem; }
.live-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#2fae6b; box-shadow:0 0 6px #2fae6b; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-slider{ max-width:760px; margin:0 auto; padding:3rem 2.4rem; text-align:center; position:relative; overflow:hidden; }
.testimonial-track{ position:relative; min-height:150px; }
.testimonial-slide{ position:absolute; inset:0; margin:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events:none; }
.testimonial-slide.active{ opacity:1; transform:translateY(0); position:relative; pointer-events:auto; }
.testimonial-slide p{ font-size:1.12rem; color:var(--c-ink); line-height:1.75; }
.testimonial-slide cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:.86rem; color:var(--c-gold); font-weight:600; }
.testimonial-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem; }
.testimonial-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(43,38,32,.18); transition:all .3s; }
.testimonial-dots button.active{ background:var(--c-gold); width:22px; border-radius:100px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.faq-item{ background:var(--c-glass); border:1px solid var(--c-glass-border); border-radius:var(--radius-s); overflow:hidden; backdrop-filter:blur(14px); }
.faq-question{ width:100%; background:none; border:none; padding:1.3rem 1.6rem; display:flex; justify-content:space-between; align-items:center; text-align:right; font-size:.98rem; font-weight:600; color:var(--c-ink); }
.faq-question span:first-child{ text-align:left; }
.faq-icon{ position:relative; width:18px; height:18px; flex-shrink:0; margin-left:1rem; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; background:var(--c-gold); border-radius:2px; transition:transform .35s var(--ease-out); }
.faq-icon::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.faq-icon::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.faq-question[aria-expanded="true"] .faq-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out); }
.faq-answer p{ padding:0 1.6rem 1.4rem; font-size:.92rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:1.8rem; align-items:stretch; }

.messenger-cta{ position:relative; overflow:hidden; padding:3rem 2.6rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(124,158,199,.16)); }

/* Mascot runner: original chibi character animation next to the messenger CTA */
.mascot-runner{ position:absolute; left:0; right:0; bottom:0; height:110px; pointer-events:none; z-index:2; }
.mascot-figure{ position:absolute; bottom:2px; width:62px; height:auto; filter:drop-shadow(0 10px 12px rgba(43,38,32,.25)); animation:mascotRun 6.5s cubic-bezier(.5,.02,.5,.98) infinite; }
.mascot-shadow{ fill:rgba(43,38,32,.16); }
.mascot-dress{ fill:var(--c-gold); }
.mascot-head, .mascot-skin{ fill:#ffd9b3; }
.mascot-hair{ fill:#2B2620; }
.mascot-eye{ fill:#2B2620; }
.mascot-mouth{ stroke:#2B2620; stroke-width:1.6; fill:none; stroke-linecap:round; }
.mascot-blush{ fill:var(--c-orange); opacity:.45; }
.mascot-leg rect, .mascot-leg ellipse{ fill:var(--c-ink); }
.mascot-arm-back rect{ fill:#ffd9b3; }
.mascot-stick{ fill:var(--c-gold); }
.mascot-stick-tip{ fill:var(--c-gold-light); }

.mascot-leg-back{ transform-box:fill-box; transform-origin:50% 0%; animation:mascotLegBack .42s ease-in-out infinite alternate; }
.mascot-leg-front{ transform-box:fill-box; transform-origin:50% 0%; animation:mascotLegFront .42s ease-in-out infinite alternate; }
.mascot-arm-back{ transform-box:fill-box; transform-origin:90% 0%; animation:mascotArmBack .42s ease-in-out infinite alternate; }
.mascot-poke-arm{ transform-box:fill-box; transform-origin:15% 90%; animation:mascotPoke .5s ease-in-out infinite; }

@keyframes mascotRun{
  0%{   left:-16%;  transform:translateY(0); }
  6%{   transform:translateY(-4px); }
  12%{  transform:translateY(0); }
  20%{  left:14%;   transform:translateY(-3px); }
  24%{  left:16%;   transform:translateY(0); }
  70%{  left:16%;   transform:translateY(0); }
  78%{  left:14%;   transform:translateY(-3px); }
  94%{  left:-16%;  transform:translateY(0); }
  100%{ left:-16%;  transform:translateY(0); }
}
@keyframes mascotLegBack{ 0%{ transform:rotate(-20deg); } 100%{ transform:rotate(16deg); } }
@keyframes mascotLegFront{ 0%{ transform:rotate(16deg); } 100%{ transform:rotate(-20deg); } }
@keyframes mascotArmBack{ 0%{ transform:rotate(14deg); } 100%{ transform:rotate(-12deg); } }
@keyframes mascotPoke{
  0%, 100%{ transform:rotate(-8deg) translateX(0); }
  45%{ transform:rotate(20deg) translateX(5px); }
  60%{ transform:rotate(16deg) translateX(3px); }
}

@media (prefers-reduced-motion: reduce){
  .mascot-runner{ display:none; }
}
@media (max-width:640px){
  .mascot-figure{ width:46px; }
  .mascot-runner{ height:80px; }
}
.messenger-icon{ width:64px; height:64px; padding:15px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#8fb3dd,#5a84b8); box-shadow:0 16px 34px -12px rgba(90,132,184,.55); margin-bottom:1.4rem; }
.messenger-cta h3{ font-size:1.5rem; margin-bottom:.8rem; }
.messenger-cta p{ font-size:.96rem; max-width:460px; margin-bottom:1.8rem; line-height:1.75; }
.messenger-btn{ background:linear-gradient(135deg,#8fb3dd,#5a84b8); color:#fff; box-shadow:0 14px 34px -10px rgba(90,132,184,.6); }
.messenger-btn:hover{ box-shadow:0 20px 40px -10px rgba(90,132,184,.7); }
.messenger-btn svg{ width:20px; height:20px; }

.contact-side{ display:flex; flex-direction:column; gap:1.4rem; }
.contact-link{ display:flex; align-items:center; gap:1rem; padding:1.3rem; font-weight:600; font-size:.94rem; }
.contact-link-icon{ width:36px; height:36px; padding:8px; border-radius:10px; background:linear-gradient(135deg,rgba(184,145,47,.18),rgba(124,158,199,.14)); color:var(--c-gold); flex-shrink:0; }
.contact-info{ padding:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.info-row{ display:flex; flex-direction:column; gap:.2rem; font-size:.92rem; }
.info-label{ font-size:.76rem; color:var(--c-ink-faint); text-transform:uppercase; letter-spacing:.05em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ position:relative; margin-top:6rem; padding-top:5rem; background:linear-gradient(180deg,transparent,rgba(184,145,47,.05)); overflow:hidden; }
.footer-glow{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:60vw; height:200px; background:radial-gradient(ellipse,rgba(184,145,47,.16),transparent 70%); }
.footer-inner{ position:relative; max-width:var(--max-w); margin:0 auto; padding:0 1.6rem 3rem; display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:2.5rem; }
.footer-brand-logo{ display:inline-block; }
.footer-brand-logo img{ height:96px; width:auto; }
.footer-brand p{ margin-top:1.1rem; font-size:.9rem; max-width:280px; }
.footer-links{ display:flex; flex-direction:column; gap:.8rem; }
.footer-links h4,.footer-newsletter h4{ font-size:.95rem; margin-bottom:.4rem; }
.footer-links a{ font-size:.9rem; color:var(--c-ink-soft); transition:color .25s; }
.footer-links a:hover{ color:var(--c-gold); }
.footer-newsletter p{ font-size:.86rem; margin-top:.4rem; margin-bottom:1rem; }
.newsletter-form{ display:flex; gap:.6rem; }
.newsletter-form input{ flex:1; padding:.8rem 1rem; border-radius:100px; border:1px solid rgba(43,38,32,.16); background:rgba(255,255,255,.6); font-family:inherit; font-size:.88rem; }
.newsletter-form input:focus{ outline:none; border-color:var(--c-gold); }
.newsletter-form button{ width:42px; height:42px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--c-gold-light),var(--c-gold)); color:#3a2c07; flex-shrink:0; padding:11px; }
.social-icons{ display:flex; gap:.7rem; margin-top:1.2rem; }
.social-icons a{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:9px; background:rgba(184,145,47,.12); color:var(--c-gold); transition:background .3s,transform .3s; }
.social-icons a:hover{ background:var(--c-gold); color:#fff; transform:translateY(-3px); }
.footer-bottom{ text-align:center; padding:1.5rem 1.6rem; border-top:1px solid rgba(43,38,32,.1); font-size:.82rem; color:var(--c-ink-faint); }

/* Back to top */
.back-to-top{ position:fixed; right:1.6rem; bottom:1.6rem; width:48px; height:48px; border-radius:50%; border:none; background:var(--c-glass-strong); backdrop-filter:blur(12px); border:1px solid var(--c-glass-border); color:var(--c-gold); padding:13px; box-shadow:0 14px 30px -12px rgba(120,90,30,.4); opacity:0; transform:translateY(16px) scale(.8); pointer-events:none; transition:all .4s var(--ease-out); z-index:900; }
.back-to-top.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.back-to-top:hover{ transform:translateY(-4px) scale(1.05); }

/* Ripple */
.ripple-host{ position:fixed; inset:0; pointer-events:none; z-index:9997; overflow:hidden; }
.ripple{ position:absolute; border-radius:50%; background:rgba(184,145,47,.35); transform:translate(-50%,-50%) scale(0); animation:ripple-anim .6s var(--ease-out) forwards; }
@keyframes ripple-anim{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .process-track{ grid-template-columns:repeat(3,1fr); row-gap:2.4rem; }
  .process-line{ display:none; }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .price-card.popular{ transform:none; }
  .consultancy-card{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav-links,.live-clock{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .navbar.menu-open .nav-links{ display:flex; position:fixed; inset:var(--nav-h) 0 0 0; background:#ffffff; backdrop-filter:blur(16px); flex-direction:column; align-items:center; justify-content:center; gap:2rem; font-size:1.3rem; }
  .navbar.menu-open .nav-mobile-cta{ display:inline-flex; margin-top:.4rem; }
  .navbar.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .navbar.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .navbar.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:2; display:flex; flex-direction:column; align-items:center; }
  .hero-visual{ order:1; height:70vw; max-height:420px; margin-bottom:1rem; }
  .hero-actions{ justify-content:center; }
  .hero-trust{ justify-content:center; }

  /* Fixed to the bottom of the whole .hero section, this used to land on
     top of the stacked mobile text once the hero grew taller than the
     viewport. Simplest fix: it's a desktop-only scroll hint anyway. */
  .scroll-cue{ display:none; }

  .footer-inner{ grid-template-columns:1fr; text-align:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .newsletter-form{ max-width:320px; margin:0 auto; }
  .social-icons{ justify-content:center; }
}

@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .process-track{ grid-template-columns:1fr 1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }

  /* On the viewer's mobile screen, all portfolio thumbnails show as phone-style frames */
  .device-mock.laptop{
    width:56%; aspect-ratio:9/17.5; margin-left:auto; margin-right:auto;
    border-radius:26px; transform:none;
  }
  .device-mock.laptop .device-screen{ border-radius:18px; }
  .device-screen-desktop{ display:none; }
  .device-screen-mobile{ display:block; }
  .consultancy-card{ padding:2rem 1.4rem; }
  .hero-visual{ height:82vw; max-height:340px; }
  .ring-1{ width:170px; height:170px; }
  .ring-2{ width:250px; height:250px; }
  .orbit-node{ transform:rotate(var(--angle)) translate(85px) rotate(calc(-1 * var(--angle))); }
  .ring-2 .orbit-node{ transform:rotate(var(--angle)) translate(125px) rotate(calc(-1 * var(--angle))); }
  .node-icon{ width:36px; height:36px; padding:8px; }
  .node-label{ font-size:.54rem; }
  .orbit-glass{ display:none; }

  /* node-pixel sits on the upper side of ring-1, right where the orbit-core
     circle is, so it gets hidden behind it. Push it further out along the
     same angle so the whole box+label clears the core, past the ring-1 line. */
  .node-pixel{ transform:rotate(var(--angle)) translate(112px) rotate(calc(-1 * var(--angle))); }
}

/* ==========================================================================
   Side scroll mascot — suited girl who stands by the scrollbar, and hangs
   from a rope while the page is being scrolled.
   ========================================================================== */
.side-mascot{ position:fixed; top:var(--nav-h); right:16px; width:120px; height:calc(100vh - var(--nav-h)); pointer-events:none; z-index:960; }

.side-mascot-standing{ position:absolute; right:0; top:50%; width:100px; transform:translateY(-50%); opacity:1; transition:opacity .35s ease, transform .35s ease; animation:smIdleBob 3.2s ease-in-out infinite; }
.side-mascot-hanging{ position:absolute; right:10px; top:0; width:100px; opacity:0; transform-origin:50% 0%; transition:opacity .3s ease; }

body.is-scrolling .side-mascot-standing{ opacity:0; transform:translateY(-30%) scale(.85); }
body.is-scrolling .side-mascot-hanging{ opacity:1; animation:smSwing 1.7s ease-in-out infinite; }

@keyframes smIdleBob{ 0%,100%{ transform:translateY(-50%); } 50%{ transform:translateY(-46%); } }
@keyframes smSwing{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(9deg); } }

/* shared figure styling */
.sm-shadow{ fill:rgba(43,38,32,.15); }
.sm-leg,.sm-shoe{ fill:#241a10; }
.sm-skirt{ fill:#16233d; }
.sm-blazer{ fill:#16233d; }
.sm-shirt{ fill:#fff; }
.sm-tie{ fill:var(--c-gold); }
.sm-arm,.sm-hand{ fill:#ffd9b3; }
.sm-head{ fill:#ffd9b3; }
.sm-hair{ fill:#2B2620; }
.sm-eye{ fill:#2B2620; }
.sm-mouth{ stroke:#2B2620; stroke-width:1.4; fill:none; stroke-linecap:round; }
.sm-blush{ fill:var(--c-orange); opacity:.45; }
.sm-rope{ stroke:var(--c-gold); stroke-width:2.4; stroke-linecap:round; }

.side-mascot-standing svg,.side-mascot-hanging svg{ width:100%; height:auto; overflow:visible; display:block; }
.side-mascot-standing{ filter:drop-shadow(0 8px 10px rgba(43,38,32,.2)); }
.side-mascot-hanging{ filter:drop-shadow(0 6px 10px rgba(43,38,32,.2)); }

@media (prefers-reduced-motion: reduce){
  .side-mascot-standing{ animation:none; }
  body.is-scrolling .side-mascot-hanging{ animation:none; }
}

@media (max-width:860px){
  .side-mascot{ width:84px; right:8px; }
  .side-mascot-standing,.side-mascot-hanging{ width:70px; }
}
@media (max-width:640px){
  .side-mascot{ width:60px; right:4px; }
  .side-mascot-standing,.side-mascot-hanging{ width:50px; }
}
@media (max-width:400px){
  .side-mascot{ width:48px; right:2px; }
  .side-mascot-standing,.side-mascot-hanging{ width:40px; }
}