/* ═══════════════════════════════════════════════════
   JOSHLEE SOLUTIONS AFRICA — styles.css
   ═══════════════════════════════════════════════════ */
:root{
  --purple:#4B1D8F;
  --purple2:#6B32C8;
  --purple3:#8B55D4;
  --purple-dark:#2D0F5E;
  --purple-deeper:#1A0838;
  --purple-light:rgba(107,50,200,.08);
  --purple-glow:rgba(107,50,200,.15);
  --gold:#C9960C;
  --gold2:#E4AF24;
  --gold3:#F5CE6A;
  --gold-pale:rgba(201,150,12,.08);
  --black:#0A0812;
  --black2:#110E1C;
  --black3:#1C1830;
  --white:#FEFCFF;
  --cream:#F9F6FF;
  --ink:#0D0A1A;
  --ink2:#2D2840;
  --ink3:#5C5570;
  --ink4:#9991AA;
  --rule:rgba(75,29,143,.12);
  --rule2:rgba(75,29,143,.06);
  --shadow:0 2px 16px rgba(75,29,143,.08);
  --shadow2:0 8px 40px rgba(75,29,143,.14);
  --shadow3:0 24px 80px rgba(75,29,143,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Outfit',sans-serif;background:var(--white);color:var(--ink);overflow-x:hidden;cursor:none;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple2),var(--gold));border-radius:2px;}

/* ── CURSOR ── */
#cur{position:fixed;width:9px;height:9px;background:var(--gold2);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .08s;mix-blend-mode:multiply;}
#cur-r{position:fixed;width:34px;height:34px;border:1.5px solid var(--purple2);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:all .13s ease;opacity:.6;}

/* ══════════════ NAV ══════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .4s;}
.nav-wrap{max-width:1360px;margin:0 auto;padding:0 56px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
nav.scrolled{background:rgba(254,252,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--rule);box-shadow:var(--shadow);}

/* Logo */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex-shrink:1;overflow:hidden;max-width:calc(100% - 60px);}
.logo-icon{width:42px;height:42px;min-width:42px;background:linear-gradient(135deg,var(--purple),var(--purple2));border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(107,50,200,.35);flex-shrink:0;}
.logo-icon::after{content:'JS';font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--gold3);position:relative;z-index:1;}
.logo-text{line-height:1.15;min-width:0;overflow:hidden;flex:1 1 auto;}

/* Logo name — white on dark hero, dark after scroll */
.logo-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .4s;}
.logo-name em{color:var(--gold3);font-style:normal;}
nav.scrolled .logo-name{color:var(--ink);}
nav.scrolled .logo-name em{color:var(--purple2);}
.logo-sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:400;white-space:nowrap;transition:color .4s;}
nav.scrolled .logo-sub{color:var(--ink4);}

/* Desktop nav links — white on hero */
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;flex-shrink:0;}
.nav-links a{padding:7px 14px;border-radius:8px;color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:400;transition:all .2s;white-space:nowrap;}
.nav-links a:hover{background:rgba(255,255,255,.12);color:#fff;}
nav.scrolled .nav-links a{color:var(--ink3);}
nav.scrolled .nav-links a:hover{background:var(--purple-light);color:var(--purple2);}
.nav-cta{background:rgba(201,150,12,.9)!important;color:var(--black)!important;padding:9px 22px!important;border-radius:8px!important;font-weight:700!important;box-shadow:0 4px 16px rgba(201,150,12,.3)!important;letter-spacing:.2px!important;}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(201,150,12,.45)!important;background:var(--gold2)!important;color:var(--black)!important;}
nav.scrolled .nav-cta{background:linear-gradient(135deg,var(--purple),var(--purple2))!important;color:#fff!important;box-shadow:0 4px 16px rgba(107,50,200,.3)!important;}
nav.scrolled .nav-cta:hover{background:linear-gradient(135deg,var(--purple2),var(--purple3))!important;}

/* Hamburger */
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;flex-shrink:0;z-index:1001;}
.hbg span{width:22px;height:1.5px;background:#fff;border-radius:2px;transition:all .3s;display:block;}
nav.scrolled .hbg span{background:var(--ink);}
.hbg.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hbg.active span:nth-child(2){opacity:0;}
.hbg.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Mobile nav overlay */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,8,18,.97);backdrop-filter:blur(12px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:20px 0;}
.nav-overlay.open{display:flex;}
.nav-overlay li{list-style:none;width:100%;text-align:center;}
.nav-overlay a{display:block;padding:18px 24px;font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;transition:all .2s;border-bottom:1px solid rgba(255,255,255,.05);}
.nav-overlay a:hover,.nav-overlay a:active{color:var(--gold3);}
.nav-overlay .nav-cta{background:linear-gradient(135deg,var(--purple),var(--purple2))!important;color:#fff!important;border-radius:0!important;font-weight:700!important;font-size:22px!important;}
.nav-overlay-close{position:absolute;top:20px;right:24px;background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6);font-size:16px;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:'Outfit',sans-serif;}

/* ══════════════ HERO ══════════════ */
#home{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--black);}
.hero-bg{position:absolute;inset:0;background:linear-gradient(145deg,var(--purple-deeper) 0%,var(--purple-dark) 30%,var(--black2) 60%,var(--black) 100%);}
.hero-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 40%,rgba(107,50,200,.25) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 20% 70%,rgba(201,150,12,.1) 0%,transparent 50%),radial-gradient(ellipse 40% 40% at 60% 10%,rgba(75,29,143,.3) 0%,transparent 50%);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(107,50,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(107,50,200,.07) 1px,transparent 1px);background-size:72px 72px;}
.hero-particles{position:absolute;inset:0;pointer-events:none;}
.hp{position:absolute;border-radius:50%;background:var(--gold2);animation:hpFloat linear infinite;opacity:0;}
@keyframes hpFloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.6}90%{opacity:.2}100%{transform:translateY(-120px) scale(1);opacity:0}}
.hero-content{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:100px 56px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;width:100%;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(201,150,12,.12);border:1px solid rgba(201,150,12,.25);padding:6px 16px;border-radius:100px;margin-bottom:28px;opacity:0;animation:fUp .8s .15s forwards;}
.hero-eyebrow span{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold3);}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--gold2);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.6)}}
.hero-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,6.5vw,88px);font-weight:700;line-height:.98;letter-spacing:-2px;color:#fff;margin-bottom:28px;opacity:0;animation:fUp .8s .3s forwards;}
.hero-h1 em{font-style:italic;color:var(--gold3);display:block;}
.hero-h1 .small{font-size:.55em;font-weight:300;display:block;letter-spacing:0;color:rgba(255,255,255,.55);}
.hero-desc{font-size:16px;line-height:1.8;color:rgba(255,255,255,.55);max-width:460px;margin-bottom:44px;font-weight:300;opacity:0;animation:fUp .8s .45s forwards;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fUp .8s .6s forwards;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--black);padding:14px 36px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;transition:all .3s;box-shadow:0 6px 24px rgba(201,150,12,.3);letter-spacing:.2px;display:inline-block;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(201,150,12,.45);}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:14px 36px;border-radius:8px;font-size:14px;font-weight:400;text-decoration:none;transition:all .3s;display:inline-block;}
.btn-outline:hover{border-color:var(--gold3);color:var(--gold3);}
.hero-right{opacity:0;animation:fRight .9s .5s forwards;position:relative;}
@keyframes fRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
.hero-terminal{background:rgba(26,8,56,.85);border:1px solid rgba(107,50,200,.4);border-radius:16px;overflow:hidden;backdrop-filter:blur(20px);box-shadow:0 24px 80px rgba(0,0,0,.4);}
.terminal-bar{background:rgba(107,50,200,.2);padding:12px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(107,50,200,.2);}
.tb-dot{width:10px;height:10px;border-radius:50%;}
.tb-dot.r{background:#FF5F57;}.tb-dot.y{background:#FFBD2E;}.tb-dot.g{background:#28C840;}
.tb-title{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);margin-left:8px;letter-spacing:.5px;}
.terminal-body{padding:24px;}
.t-line{font-family:'Space Mono',monospace;font-size:12px;line-height:2;display:flex;gap:10px;align-items:flex-start;}
.t-prompt{color:var(--gold2);flex-shrink:0;}
.t-cmd{color:rgba(255,255,255,.85);}
.t-out{color:rgba(139,85,212,.9);}
.t-success{color:#4ADE80;}
.t-blink{animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-services-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.hsm{background:rgba(107,50,200,.12);border:1px solid rgba(107,50,200,.25);border-radius:10px;padding:14px 16px;transition:.3s;}
.hsm:hover{background:rgba(107,50,200,.2);border-color:rgba(107,50,200,.5);}
.hsm-ic{font-size:18px;margin-bottom:6px;}
.hsm-t{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.2px;}
.hero-badge{position:absolute;bottom:-18px;left:-24px;background:var(--gold);border-radius:12px;padding:12px 18px;box-shadow:0 8px 28px rgba(201,150,12,.35);display:flex;align-items:center;gap:10px;animation:float 4s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hb-ic{font-size:20px;}
.hb-t{font-size:12px;font-weight:700;color:var(--black);line-height:1.3;}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;opacity:0;animation:fUp .8s 1.2s forwards;}
.hero-scroll span{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.35);}
.scroll-stem{width:1px;height:44px;background:linear-gradient(to bottom,var(--gold2),transparent);animation:stem 2s ease-in-out infinite;}
@keyframes stem{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
@keyframes fUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════ TICKER ══════════════ */
.ticker{background:linear-gradient(90deg,var(--purple-dark),var(--purple),var(--purple-dark));padding:14px 0;overflow:hidden;border-top:1px solid rgba(107,50,200,.3);}
.t-track{display:flex;gap:0;width:max-content;animation:tk 28s linear infinite;}
.t-track:hover{animation-play-state:paused;}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-item{display:flex;align-items:center;gap:10px;padding:0 40px;border-right:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:1px;white-space:nowrap;}
.t-item .gem{color:var(--gold3);font-size:8px;}

/* ══════════════ SHARED ══════════════ */
.wrap{max-width:1360px;margin:0 auto;padding:0 56px;}
.sec{padding:110px 0;}
.sec-eye{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--purple2);margin-bottom:14px;}
.sec-eye::before{content:'';width:20px;height:1.5px;background:linear-gradient(90deg,var(--purple2),var(--gold2));}
.sec-h{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,3.8vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.8px;color:var(--ink);margin-bottom:16px;}
.sec-h em{color:var(--purple2);font-style:italic;}
.sec-p{font-size:15.5px;line-height:1.8;color:var(--ink3);font-weight:300;max-width:500px;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent);}

/* ══════════════ ABOUT ══════════════ */
#about{background:var(--cream);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.about-vis{position:relative;}
.about-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow3);}
.ac-top{background:linear-gradient(135deg,var(--purple-dark),var(--purple));padding:36px;position:relative;overflow:hidden;}
.ac-top::after{content:'JSA';position:absolute;right:-16px;bottom:-24px;font-family:'Cormorant Garamond',serif;font-size:100px;font-weight:700;color:rgba(255,255,255,.05);pointer-events:none;letter-spacing:-4px;}
.ac-top h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:6px;}
.ac-top p{font-size:13px;color:rgba(255,255,255,.5);font-weight:300;}
.ac-top-tag{display:inline-block;background:rgba(201,150,12,.2);border:1px solid rgba(201,150,12,.4);color:var(--gold3);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:100px;margin-bottom:14px;}
.ac-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);}
.acs{background:#fff;padding:22px 26px;transition:.25s;}
.acs:hover{background:var(--purple-light);}
.acs-n{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;color:var(--purple2);line-height:1;}
.acs-l{font-size:11.5px;color:var(--ink3);margin-top:3px;font-weight:400;}
.about-float{position:absolute;top:-20px;right:-20px;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:14px;padding:14px 20px;box-shadow:0 8px 28px rgba(201,150,12,.4);animation:float 3.5s ease-in-out infinite;}
.af-n{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;color:var(--black);line-height:1;}
.af-l{font-size:11px;color:rgba(10,8,18,.7);margin-top:2px;font-weight:500;}
.about-pts{margin-top:36px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule);}
.a-pt{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--rule2);}
.a-pt-ic{width:38px;height:38px;background:var(--purple-light);border:1px solid rgba(107,50,200,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.a-pt-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.a-pt-p{font-size:13px;color:var(--ink3);line-height:1.55;font-weight:300;}
.mission-vision{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.mv-card{border-radius:12px;padding:22px;border:1px solid var(--rule);}
.mv-card.m{background:var(--purple-light);border-color:rgba(107,50,200,.2);}
.mv-card.v{background:var(--gold-pale);border-color:rgba(201,150,12,.2);}
.mv-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.mv-card.m .mv-label{color:var(--purple2);}
.mv-card.v .mv-label{color:var(--gold);}
.mv-text{font-size:13.5px;color:var(--ink2);line-height:1.6;font-weight:300;}

/* ══════════════ SERVICES ══════════════ */
#services{background:var(--white);}
.services-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:64px;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc-card{background:var(--white);border:1.5px solid var(--rule);border-radius:18px;padding:32px;transition:all .4s;position:relative;overflow:hidden;cursor:default;}
.svc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(107,50,200,.05),transparent);opacity:0;transition:.4s;}
.svc-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--purple2),var(--gold2));transform:scaleX(0);transition:.4s;transform-origin:left;}
.svc-card:hover{border-color:rgba(107,50,200,.3);transform:translateY(-6px);box-shadow:var(--shadow3);}
.svc-card:hover::before{opacity:1;}
.svc-card:hover::after{transform:scaleX(1);}
.svc-num{font-family:'Space Mono',monospace;font-size:10px;color:var(--ink4);letter-spacing:1.5px;margin-bottom:18px;display:flex;align-items:center;gap:6px;}
.svc-num::before{content:'';width:16px;height:1px;background:var(--rule);}
.svc-ic{width:52px;height:52px;background:linear-gradient(135deg,var(--purple-light),rgba(201,150,12,.06));border:1px solid rgba(107,50,200,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;}
.svc-title{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.2;}
.svc-desc{font-size:13.5px;color:var(--ink3);line-height:1.7;font-weight:300;margin-bottom:18px;}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.svc-tag{font-size:11px;background:var(--purple-light);border:1px solid rgba(107,50,200,.15);color:var(--purple2);padding:3px 10px;border-radius:100px;font-weight:500;}

/* ══════════════ PRODUCTS ══════════════ */
#products{background:var(--cream);padding:110px 0;}
.prod-hd{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px;}
.prod-scroll-outer{position:relative;overflow:hidden;}
.prod-scroll-outer::before,.prod-scroll-outer::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;}
.prod-scroll-outer::before{left:0;background:linear-gradient(90deg,var(--cream),transparent);}
.prod-scroll-outer::after{right:0;background:linear-gradient(-90deg,var(--cream),transparent);}
.prod-track{display:flex;gap:20px;padding:10px 56px 40px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.prod-track::-webkit-scrollbar{display:none;}
.prod-card{background:#fff;border:1px solid var(--rule);border-radius:20px;flex-shrink:0;width:300px;scroll-snap-align:start;transition:all .4s;overflow:hidden;}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow3);border-color:rgba(107,50,200,.3);}
.prod-card-top{padding:28px 28px 0;position:relative;}
.pc-num{position:absolute;top:20px;right:22px;font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:700;color:rgba(107,50,200,.07);line-height:1;pointer-events:none;}
.prod-card-ic{font-size:32px;margin-bottom:16px;}
.prod-card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.2;}
.prod-card-desc{font-size:13px;color:var(--ink3);line-height:1.65;font-weight:300;}
.prod-card-feats{padding:20px 28px 28px;margin-top:18px;border-top:1px solid var(--rule2);}
.prod-card-feats li{font-size:12.5px;color:var(--ink3);padding:6px 0;border-bottom:1px solid var(--rule2);list-style:none;display:flex;align-items:center;gap:8px;}
.prod-card-feats li:last-child{border-bottom:none;}
.prod-card-feats li::before{content:'';width:5px;height:5px;background:var(--gold2);border-radius:50%;flex-shrink:0;}
.prod-ctrls{display:flex;align-items:center;gap:14px;padding:0 56px;margin-top:8px;}
.pc-btn{width:42px;height:42px;min-width:42px;border-radius:50%;border:1.5px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;color:var(--ink);font-size:16px;flex-shrink:0;}
.pc-btn:hover{background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(107,50,200,.3);}
.pc-bar{flex:1;height:2px;background:var(--rule);border-radius:2px;overflow:hidden;position:relative;min-width:0;}
.pc-thumb{height:100%;background:linear-gradient(90deg,var(--purple2),var(--gold2));border-radius:2px;position:absolute;left:0;top:0;transition:width .2s,left .1s;}

/* ══════════════ CLIENTS ══════════════ */
#clients{background:var(--white);overflow:hidden;}
.clients-layout{display:grid;grid-template-columns:320px 1fr;gap:80px;align-items:start;}
.cl-runner{overflow:hidden;position:relative;margin-top:32px;max-width:100%;}
.cl-runner::before,.cl-runner::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.cl-runner::before{left:0;background:linear-gradient(90deg,var(--white),transparent);}
.cl-runner::after{right:0;background:linear-gradient(-90deg,var(--white),transparent);}
.cl-track{display:flex;gap:16px;width:max-content;}
.cl-card{background:var(--cream);border:1px solid var(--rule);border-radius:14px;padding:22px 26px;flex-shrink:0;min-width:220px;transition:all .3s;}
.cl-card:hover{border-color:rgba(107,50,200,.35);transform:translateY(-4px);box-shadow:var(--shadow2);background:#fff;}
.cl-name{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.2;}
.cl-loc{font-size:11.5px;color:var(--ink4);margin-bottom:10px;font-weight:300;}
.cl-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--purple2);background:var(--purple-light);border:1px solid rgba(107,50,200,.2);padding:3px 10px;border-radius:100px;}

/* ══════════════ ZOOM / CHAPTERS ══════════════ */
#features{background:var(--cream);}
.zoom-outer{height:500vh;position:relative;}
.zoom-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--cream);}
.z-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.z-ring{position:absolute;border-radius:50%;border:1px solid rgba(107,50,200,.1);}
.z-step{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.88);opacity:0;transition:opacity .55s,transform .55s;max-width:680px;text-align:center;padding:0 48px;width:min(680px,90vw);}
.z-step.on{opacity:1;transform:translate(-50%,-50%) scale(1);}
.z-step-tag{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--purple2);font-weight:600;margin-bottom:18px;display:block;}
.z-step-h{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,76px);font-weight:700;letter-spacing:-2px;color:var(--ink);line-height:1.0;margin-bottom:18px;}
.z-step-h em{color:var(--purple2);font-style:italic;}
.z-step-p{font-size:clamp(14px,2vw,17px);color:var(--ink3);line-height:1.75;font-weight:300;}
.z-prog{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.z-dot{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:.3s;}
.z-dot.on{background:linear-gradient(135deg,var(--purple2),var(--gold2));transform:scale(1.5);}
.z-side{position:absolute;right:56px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;}
.z-si{display:flex;align-items:center;gap:10px;opacity:.2;transition:.35s;}
.z-si.on{opacity:1;}
.z-si-bar{width:18px;height:1.5px;background:var(--purple2);transition:.3s;}
.z-si.on .z-si-bar{width:30px;}
.z-si-lbl{font-size:11px;font-weight:500;color:var(--ink3);white-space:nowrap;}
.chapters-mobile{display:none;}
.chap-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:28px;margin-bottom:16px;}
.chap-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--purple2);font-weight:600;margin-bottom:10px;display:block;}
.chap-h{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;letter-spacing:-1px;color:var(--ink);line-height:1.1;margin-bottom:10px;}
.chap-h em{color:var(--purple2);font-style:italic;}
.chap-p{font-size:14px;color:var(--ink3);line-height:1.7;font-weight:300;}
.chap-num{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:700;color:rgba(107,50,200,.06);float:right;line-height:1;margin-left:10px;}

/* ══════════════ PULL QUOTE ══════════════ */
#pullquote{background:linear-gradient(135deg,var(--purple-deeper),var(--purple-dark),var(--black2));padding:100px 0;}
.pq-inner{text-align:center;}
.pq-mark{font-family:'Cormorant Garamond',serif;font-size:140px;color:rgba(201,150,12,.15);line-height:.5;display:block;}
.pq-text{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,4vw,48px);font-weight:300;line-height:1.4;color:rgba(255,255,255,.9);font-style:italic;max-width:800px;margin:0 auto;}
.pq-text em{color:var(--gold3);font-style:normal;font-weight:600;}
.pq-attr{margin-top:32px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);}

/* ══════════════ TECHNOLOGY ══════════════ */
#technology{background:var(--white);}
.tech-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;}
.tech-stage{height:460px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.sp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;}
.sp-c{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);transition:.3s;cursor:default;}
.sp-c:hover{border-color:rgba(107,50,200,.35);box-shadow:var(--shadow2);transform:translateY(-3px);}
.sp-c .ic{font-size:20px;margin-bottom:5px;}
.sp-c .t{font-size:11.5px;font-weight:700;color:var(--ink);}
.sp-c .d{font-size:10.5px;color:var(--ink4);margin-top:1px;}
.tech-pts{border-top:1px solid var(--rule);margin-top:4px;}
.tech-pt{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--rule2);}
.tech-pt:last-child{border-bottom:none;}
.tp-n{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--purple3);font-style:italic;line-height:1;flex-shrink:0;min-width:36px;}
.tp-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.tp-p{font-size:13px;color:var(--ink3);line-height:1.6;font-weight:300;}

/* ══════════════ STATS ══════════════ */
#stats{background:linear-gradient(135deg,var(--purple-deeper),var(--purple-dark),var(--purple));padding:0;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid rgba(255,255,255,.08);}
.stat-col{padding:56px 44px;border-right:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:.3s;}
.stat-col:hover{background:rgba(201,150,12,.06);}
.stat-col::after{content:attr(data-l);position:absolute;right:-12px;bottom:-20px;font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:700;color:rgba(255,255,255,.04);pointer-events:none;white-space:nowrap;}
.stat-n{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:700;color:var(--gold3);line-height:1;letter-spacing:-2px;}
.stat-l{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:10px;}

/* ══════════════ ROTATION ══════════════ */
#rotation{background:var(--cream);padding:72px 0;overflow:hidden;}
.rot-runner{overflow:hidden;position:relative;margin-top:44px;}
.rot-runner::before,.rot-runner::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.rot-runner::before{left:0;background:linear-gradient(90deg,var(--cream),transparent);}
.rot-runner::after{right:0;background:linear-gradient(-90deg,var(--cream),transparent);}
.rot-track{display:flex;gap:14px;width:max-content;}
.rot-c{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:16px 20px;flex-shrink:0;min-width:155px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.3s;}
.rot-c:hover{background:var(--purple-light);border-color:rgba(107,50,200,.3);transform:translateY(-4px);box-shadow:var(--shadow2);}
.rot-c .ic{font-size:24px;}
.rot-c .nm{font-size:12px;font-weight:500;color:var(--ink2);text-align:center;}

/* ══════════════ PARALLAX CTA ══════════════ */
#cta-band{position:relative;height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cta-dark-bg{position:absolute;inset:0;background:linear-gradient(145deg,var(--black) 0%,var(--black2) 40%,var(--purple-deeper) 70%,var(--purple-dark) 100%);}
.cta-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(107,50,200,.2) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);}
.cta-gold-accent{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:200px;background:radial-gradient(ellipse 60% 60% at 50% 100%,rgba(201,150,12,.12) 0%,transparent 70%);}
.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(107,50,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(107,50,200,.08) 1px,transparent 1px);background-size:56px 56px;}
.cta-layer{position:absolute;width:105%;left:-2.5%;will-change:transform;}
.cta-content{position:relative;z-index:4;text-align:center;padding:0 48px;}
.cta-content h2{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,80px);font-weight:700;color:#fff;letter-spacing:-2px;line-height:1.0;margin-bottom:14px;}
.cta-content h2 em{font-style:italic;color:var(--gold3);}
.cta-content p{font-size:16px;color:rgba(255,255,255,.45);margin-bottom:36px;font-weight:300;}

/* ══════════════ VALUES ══════════════ */
#values{background:var(--white);}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.val-card{border:1px solid var(--rule);border-radius:16px;padding:28px;transition:all .35s;background:#fff;}
.val-card:hover{border-color:rgba(107,50,200,.3);transform:translateY(-4px);box-shadow:var(--shadow2);}
.val-ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;}
.val-card:nth-child(1) .val-ic{background:rgba(107,50,200,.08);border:1px solid rgba(107,50,200,.15);}
.val-card:nth-child(2) .val-ic{background:rgba(201,150,12,.08);border:1px solid rgba(201,150,12,.15);}
.val-card:nth-child(3) .val-ic{background:rgba(75,29,143,.08);border:1px solid rgba(75,29,143,.15);}
.val-card:nth-child(4) .val-ic{background:rgba(139,85,212,.08);border:1px solid rgba(139,85,212,.15);}
.val-h{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.val-p{font-size:13px;color:var(--ink3);line-height:1.65;font-weight:300;}

/* ══════════════ TESTIMONIALS ══════════════ */
#testimonials{background:var(--cream);}
.test-layout{display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:start;}
.test-cards{display:flex;flex-direction:column;gap:20px;}
.test-card{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:32px;transition:.35s;position:relative;overflow:hidden;}
.test-card::before{content:'"';position:absolute;top:-8px;right:16px;font-family:'Cormorant Garamond',serif;font-size:100px;color:rgba(107,50,200,.07);line-height:1;pointer-events:none;}
.test-card:hover{border-color:rgba(107,50,200,.3);box-shadow:var(--shadow2);transform:translateX(6px);}
.test-stars{color:var(--gold2);font-size:13px;letter-spacing:3px;margin-bottom:14px;}
.test-q{font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.65;color:var(--ink2);font-style:italic;margin-bottom:22px;}
.test-author{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule2);padding-top:18px;}
.test-av{width:42px;height:42px;background:linear-gradient(135deg,var(--purple),var(--purple2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;}
.test-nm{font-size:13.5px;font-weight:700;color:var(--ink);}
.test-rl{font-size:12px;color:var(--ink4);margin-top:1px;font-weight:300;}

/* ══════════════ CONTACT ══════════════ */
#contact{background:var(--white);}
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;}
.ci-list{margin-top:36px;border-top:1px solid var(--rule);}
.ci-item{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--rule2);}
.ci-item:last-child{border-bottom:none;}
.ci-ic{width:38px;height:38px;background:var(--purple-light);border:1px solid rgba(107,50,200,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ci-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple2);margin-bottom:3px;}
.ci-val{font-size:14px;color:var(--ink);font-weight:400;}
.cform{background:var(--cream);border:1px solid var(--rule);border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:14px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fg{display:flex;flex-direction:column;gap:6px;}
.flbl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink3);}
.fi,.fs,.ft{background:#fff;border:1.5px solid var(--rule);border-radius:8px;padding:12px 15px;color:var(--ink);font-family:'Outfit',sans-serif;font-size:14px;outline:none;transition:.25s;width:100%;font-weight:300;}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--purple2);box-shadow:0 0 0 3px rgba(107,50,200,.08);}
.ft{resize:vertical;min-height:115px;}
.fsub{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;padding:14px 36px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer;font-family:'Outfit',sans-serif;transition:.3s;align-self:flex-start;box-shadow:0 4px 18px rgba(107,50,200,.3);}
.fsub:hover{background:linear-gradient(135deg,var(--purple2),var(--purple3));transform:translateY(-1px);box-shadow:0 8px 28px rgba(107,50,200,.4);}

/* ══════════════ FOOTER ══════════════ */
footer{background:var(--black);padding:72px 0 36px;}
.ft-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:60px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06);}
.ft-brand .logo{margin-bottom:18px;display:inline-flex;}
.ft-brand p{font-size:13.5px;color:rgba(255,255,255,.35);line-height:1.8;max-width:240px;font-weight:300;}
.ft-col h4{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:18px;font-weight:600;}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft-col ul a{color:rgba(255,255,255,.45);text-decoration:none;font-size:13.5px;font-weight:300;transition:.2s;}
.ft-col ul a:hover{color:var(--gold3);}
.ft-bottom{padding-top:28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.ft-bottom p{font-size:12px;color:rgba(255,255,255,.2);}
.admin-btn{background:none;border:none;color:rgba(255,255,255,.1);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:.2s;font-family:'Outfit',sans-serif;letter-spacing:.5px;}
.admin-btn:hover{color:rgba(255,255,255,.3);}
.ft-logo-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;}
.ft-logo-name em{color:var(--gold3);font-style:normal;}
.ft-logo-sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:400;}

/* ══════════════ REVEALS ══════════════ */
.rv,.rv-l,.rv-r{opacity:0;transition:opacity .8s ease,transform .8s ease;}
.rv{transform:translateY(26px);}.rv-l{transform:translateX(-26px);}.rv-r{transform:translateX(26px);}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none;}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1100px){
  .values-grid{grid-template-columns:1fr 1fr;}
  .ft-grid{grid-template-columns:1fr 1fr;gap:40px;}
}
@media(max-width:960px){
  body{cursor:auto;}
  #cur,#cur-r{display:none;}
  .nav-wrap{padding:0 20px;height:64px;}
  .nav-links{display:none !important;}
  .hbg{display:flex;}
  .logo{max-width:calc(100% - 56px);overflow:hidden;}
  .logo-text{min-width:0;overflow:hidden;flex:1 1 auto;}
  .logo-name{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .logo-sub{display:none;}
  .logo-icon{width:36px;height:36px;min-width:36px;}
  .logo-icon::after{font-size:18px;}
  .wrap{padding:0 24px;}
  .hero-content{grid-template-columns:1fr;padding:90px 24px 60px;gap:40px;}
  .hero-right{display:none;}
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .about-float{top:-12px;right:-8px;}
  .mission-vision{grid-template-columns:1fr;}
  .tech-layout{grid-template-columns:1fr;gap:40px;}
  .tech-stage{height:auto;}
  .contact-layout{grid-template-columns:1fr;gap:40px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .services-head{grid-template-columns:1fr;gap:16px;}
  .prod-hd{grid-template-columns:1fr;gap:16px;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .clients-layout{grid-template-columns:1fr;gap:32px;overflow:hidden;}
  .cl-runner{max-width:100%;width:100%;}
  .test-layout{grid-template-columns:1fr;gap:32px;}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .frow{grid-template-columns:1fr;}
  .prod-track{padding-left:20px;padding-right:20px;}
  .prod-ctrls{padding-left:20px;padding-right:20px;}
  .zoom-outer{display:none !important;}
  .chapters-mobile{display:block;padding:72px 0;}
  .chapters-mobile .wrap{padding:0 24px;}
  .z-side{display:none;}
  .z-step{padding:0 24px;}
  .cta-content{padding:0 24px;}
  .pq-text{padding:0 24px;}
  .sec{padding:72px 0;}
  .stat-col{padding:36px 24px;}
  .stat-n{font-size:48px;}
}
@media(max-width:600px){
  .nav-wrap{padding:0 16px;}
  .logo{max-width:calc(100% - 52px);}
  .logo-name{font-size:13px;}
  .logo-icon{width:32px;height:32px;min-width:32px;}
  .logo-icon::after{font-size:16px;}
  .services-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .ft-grid{grid-template-columns:1fr;}
  .ft-grid .ft-brand{display:none;}
  .hero-h1{font-size:clamp(40px,12vw,64px);}
  .hero-btns{flex-direction:column;}
  .btn-gold,.btn-outline{text-align:center;}
  .cl-card{min-width:160px;padding:16px 18px;}
  .cl-name{font-size:14px;}
  .cform{padding:24px;}
  .contact-layout .sec-p{max-width:100%;}
  .sec{padding:56px 0;}
  #products{padding:56px 0;}
  #rotation{padding:56px 0;}
  .prod-card{width:260px;}
  .chapters-mobile{padding:56px 0;}
}