/* Kamal Solanki Portfolio — Main Stylesheet | kamalsolanki.co.in */

:root{--ff:'Syne',sans-serif;--fb:'DM Sans',sans-serif;--r:16px;--rs:8px;--t:.35s cubic-bezier(.4,0,.2,1)}
    [data-theme="dark"]{--bg:#060610;--bg2:#0d0d1f;--bg3:#12122a;--sur:rgba(255,255,255,.04);--sur2:rgba(255,255,255,.08);--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);--tx:#f0f0ff;--tx2:#9898b8;--tx3:#5a5a7a;--ac:#7c6dfa;--ac2:#e056fd;--ac3:#40d9f7;--gl:rgba(124,109,250,.3);--gl2:rgba(224,86,253,.2);--nav:rgba(6,6,16,.88);--cb:rgba(255,255,255,.03)}
    [data-theme="light"]{--bg:#f4f4ff;--bg2:#eaeaff;--bg3:#dedeff;--sur:rgba(255,255,255,.7);--sur2:rgba(255,255,255,.9);--bd:rgba(0,0,20,.08);--bd2:rgba(0,0,20,.14);--tx:#0c0c20;--tx2:#4a4a6a;--tx3:#9090b0;--ac:#5c4ef0;--ac2:#c030e0;--ac3:#0098c8;--gl:rgba(92,78,240,.15);--gl2:rgba(192,48,224,.1);--nav:rgba(244,244,255,.9);--cb:rgba(255,255,255,.6)}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--fb);background:var(--bg);color:var(--tx);transition:background var(--t),color var(--t);overflow-x:hidden;line-height:1.65}
    a{text-decoration:none;color:inherit}ul{list-style:none}button{cursor:pointer;font-family:var(--fb);border:none;background:none}
    ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--ac);border-radius:99px}
    body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.025}
    /* PAGE ROUTER */
    .page{display:none;animation:fadeIn .4s ease}
    .page.active{display:block}
    @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:68px;background:var(--nav);backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--bd);transition:background var(--t)}
    .nav-logo{font-family:var(--ff);font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer}
    .nav-links{display:flex;gap:1.4rem;align-items:center}
    .nav-links a{font-size:.8rem;font-weight:500;color:var(--tx2);transition:color var(--t);cursor:pointer;position:relative;padding-bottom:2px}
    .nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--ac),var(--ac2));transform:scaleX(0);transition:transform var(--t)}
    .nav-links a:hover,.nav-links a.an{color:var(--tx)}.nav-links a.an::after,.nav-links a:hover::after{transform:scaleX(1)}
    .nav-right{display:flex;align-items:center;gap:.9rem}
    .tbtn{width:46px;height:24px;background:var(--sur2);border:1px solid var(--bd2);border-radius:99px;position:relative;transition:background var(--t)}
    .tbtn::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));transition:transform var(--t)}
    [data-theme="light"] .tbtn::after{transform:translateX(22px)}
    .btnav{padding:7px 18px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-radius:99px;font-size:.82rem;font-weight:600;transition:transform var(--t),box-shadow var(--t);cursor:pointer}
    .btnav:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--gl)}
    .ham{display:none;flex-direction:column;gap:5px;padding:4px}
    .ham span{width:22px;height:2px;background:var(--tx);border-radius:2px}
    /* MOBILE MENU */
    .mmenu{position:fixed;inset:0;z-index:999;background:var(--bg);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;transform:translateX(100%);transition:transform var(--t)}
    .mmenu.open{transform:translateX(0)}
    .mmenu a{font-family:var(--ff);font-size:1.7rem;font-weight:700;color:var(--tx2);cursor:pointer;transition:color var(--t)}.mmenu a:hover{color:var(--ac)}
    .mclose{position:absolute;top:22px;right:5vw;font-size:1.4rem;color:var(--tx2);cursor:pointer}
    /* LAYOUT */
    .wrap{max-width:1200px;margin:0 auto;padding:100px 5vw 80px}
    .sl{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ac);margin-bottom:.8rem}.sl::before{content:'';width:18px;height:1.5px;background:var(--ac)}
    .st{font-family:var(--ff);font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin-bottom:.9rem}.st span{background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .ss{font-size:1rem;color:var(--tx2);max-width:540px;line-height:1.75;margin-bottom:3rem}
    /* BUTTONS */
    .bpri{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-radius:99px;font-weight:600;font-size:.92rem;transition:transform var(--t),box-shadow var(--t);cursor:pointer}.bpri:hover{transform:translateY(-3px);box-shadow:0 12px 32px var(--gl)}
    .bsec{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border:1px solid var(--bd2);color:var(--tx);border-radius:99px;font-weight:500;font-size:.92rem;transition:background var(--t),border-color var(--t),transform var(--t)}.bsec:hover{background:var(--sur2);border-color:var(--ac);transform:translateY(-3px)}
    /* CARD */
    .card{background:var(--cb);border:1px solid var(--bd);border-radius:var(--r);backdrop-filter:blur(12px);transition:transform var(--t),border-color var(--t),box-shadow var(--t)}.card:hover{transform:translateY(-5px);border-color:var(--ac);box-shadow:0 16px 48px var(--gl)}
    /* REVEAL */
    .rv{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}.rv.on{opacity:1;transform:translateY(0)}
    .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
    /* ORB */
    .orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
    @keyframes fl{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.05)}}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    /* ── HOME ── */
    #pg-home{position:relative;overflow:hidden}
    .hero{min-height:100vh;display:flex;align-items:center;padding:110px 5vw 80px;position:relative;z-index:1}
    .hero-in{max-width:1200px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
    .hbadge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:var(--sur2);border:1px solid var(--bd2);border-radius:99px;font-size:.75rem;font-weight:500;color:var(--tx2);margin-bottom:1.4rem}
    .hdot{width:7px;height:7px;border-radius:50%;background:#22d36e;box-shadow:0 0 8px #22d36e;animation:pulse 2s infinite}
    .hh1{font-family:var(--ff);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.06;letter-spacing:-2px;margin-bottom:1.2rem}
    .hh1 span{background:linear-gradient(135deg,var(--ac) 20%,var(--ac2) 65%,var(--ac3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .hsub{font-size:1.05rem;color:var(--tx2);line-height:1.75;max-width:480px;margin-bottom:2.2rem}
    .hcta{display:flex;gap:1rem;flex-wrap:wrap}
    .hstats{display:flex;gap:2.2rem;margin-top:2.8rem}
    .stn{font-family:var(--ff);font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--ac3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .stl{font-size:.75rem;color:var(--tx3);margin-top:1px}
    .pcard{background:var(--cb);border:1px solid var(--bd);border-radius:22px;padding:2.2rem;backdrop-filter:blur(20px);position:relative;overflow:hidden}
    .pcard::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gl),var(--gl2));opacity:.5}
    .avring{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));padding:3px;margin:0 auto 1.3rem}
    .av{width:100%;height:100%;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-size:2.1rem;font-weight:800;color:var(--ac)}
    .pcname{font-family:var(--ff);font-size:1.3rem;font-weight:700;text-align:center;position:relative}
    .pcrole{font-size:.82rem;color:var(--tx2);text-align:center;margin-top:3px;position:relative}
    .pctags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.3rem;position:relative}
    .tag{padding:4px 11px;background:var(--sur2);border:1px solid var(--bd2);border-radius:99px;font-size:.72rem;color:var(--tx2)}
    .tag.a{background:rgba(124,109,250,.15);border-color:var(--ac);color:var(--ac)}
    .pcrows{margin-top:1.3rem;position:relative}
    .pcrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--bd);font-size:.8rem;color:var(--tx2)}.pcrow:last-child{border-bottom:none}
    /* stats strip */
    .sstrip{background:var(--bg3);padding:40px 5vw;position:relative;z-index:1}
    .ssinner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
    .sc{background:var(--cb);border:1px solid var(--bd);border-radius:var(--r);padding:1.6rem 1.2rem;text-align:center;backdrop-filter:blur(10px);transition:transform var(--t),border-color var(--t)}.sc:hover{transform:translateY(-4px);border-color:var(--ac)}
    .sci{font-size:1.7rem;margin-bottom:.6rem}.scn{font-family:var(--ff);font-size:2.1rem;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.scl{font-size:.78rem;color:var(--tx2);margin-top:3px}
    /* home service preview */
    .hsvg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.3rem}
    .hsc{padding:1.8rem;position:relative;overflow:hidden}.hsc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gl),transparent);opacity:0;transition:opacity var(--t)}.hsc:hover::before{opacity:1}
    .hsico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem;position:relative}
    .hsn{font-family:var(--ff);font-size:1rem;font-weight:700;margin-bottom:.5rem;position:relative}.hsd{font-size:.83rem;color:var(--tx2);line-height:1.65;position:relative}
    /* testimonials */
    .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem}
    .tc{padding:1.8rem}.tcst{color:#f5b31a;font-size:.85rem;margin-bottom:.9rem}
    .tcq{font-size:.87rem;color:var(--tx2);line-height:1.75;font-style:italic;margin-bottom:1.3rem}
    .tcauth{display:flex;align-items:center;gap:11px}
    .tcav{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-weight:700;font-size:.85rem;color:#fff}
    .tcn{font-weight:600;font-size:.87rem}.tcr{font-size:.72rem;color:var(--tx3)}
    /* cta banner */
    .ctab{background:linear-gradient(135deg,var(--ac),var(--ac2));border-radius:22px;padding:3.5rem 2.5rem;text-align:center;overflow:hidden}
    .ctab h2{font-family:var(--ff);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;margin-bottom:.9rem}
    .ctab p{color:rgba(255,255,255,.75);max-width:460px;margin:0 auto 1.8rem}
    .ctabtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
    .bwh{padding:13px 28px;background:#fff;color:var(--ac);border-radius:99px;font-weight:700;display:inline-flex;gap:8px;align-items:center;transition:transform var(--t),box-shadow var(--t);cursor:pointer}.bwh:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
    .bwh2{padding:12px 26px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:99px;font-weight:600;display:inline-flex;gap:8px;align-items:center;transition:background var(--t)}.bwh2:hover{background:rgba(255,255,255,.3)}
    /* ── ABOUT ── */
    .agrid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
    .atp p{color:var(--tx2);line-height:1.82;margin-bottom:1.1rem;font-size:.97rem}
    .apills{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem}
    .apill{padding:6px 14px;border:1px solid var(--bd2);border-radius:6px;font-size:.78rem;color:var(--tx2);background:var(--sur)}
    .acards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .ac{padding:1.5rem}.aci{font-size:1.7rem;margin-bottom:.7rem}.act{font-family:var(--ff);font-weight:700;font-size:.97rem;margin-bottom:.35rem}.acd{font-size:.8rem;color:var(--tx2);line-height:1.6}
    .igrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2rem}
    .irow{display:flex;flex-direction:column;gap:3px}.ilbl{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ac)}.ival{font-size:.88rem;color:var(--tx2)}
    /* ── TIMELINE ── */
    .tl{position:relative;padding-left:2rem}
    .tl::before{content:'';position:absolute;left:0;top:8px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--ac),var(--ac2),transparent)}
    .tli{position:relative;padding-bottom:2.8rem;opacity:0;transform:translateX(-18px);transition:opacity .6s ease,transform .6s ease}.tli.on{opacity:1;transform:translateX(0)}
    .tld{position:absolute;left:-2.3rem;top:6px;width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 0 10px var(--gl)}
    .tldt{font-size:.73rem;font-weight:700;letter-spacing:1px;color:var(--ac);text-transform:uppercase;margin-bottom:.4rem}
    .tlr{font-family:var(--ff);font-size:1.15rem;font-weight:700;margin-bottom:.2rem}.tlco{font-size:.87rem;color:var(--tx2);margin-bottom:.7rem}.tlde{font-size:.87rem;color:var(--tx3);line-height:1.72}
    .tltags{display:flex;flex-wrap:wrap;gap:6px;margin-top:.7rem}.tlt{padding:3px 10px;background:var(--sur);border:1px solid var(--bd);border-radius:4px;font-size:.7rem;color:var(--tx2)}
    /* ── SKILLS ── */
    .skgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem}
    .skc{padding:1.8rem}.sktit{font-family:var(--ff);font-weight:700;font-size:.97rem;margin-bottom:1.3rem;display:flex;align-items:center;gap:8px}
    .skr{margin-bottom:.95rem}.skr:last-child{margin-bottom:0}.sktop{display:flex;justify-content:space-between;font-size:.79rem;margin-bottom:5px;color:var(--tx2)}
    .skb{height:5px;background:var(--sur2);border-radius:99px;overflow:hidden}.skf{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ac),var(--ac2));width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
    .aibox{background:linear-gradient(135deg,rgba(124,109,250,.1),rgba(224,86,253,.1));border:1px solid var(--ac);border-radius:var(--r);padding:1.8rem;margin-top:2rem;grid-column:1/-1}
    .aitools{display:flex;flex-wrap:wrap;gap:9px;margin-top:1rem}
    .aitool{padding:6px 15px;background:var(--sur2);border:1px solid var(--bd2);border-radius:99px;font-size:.78rem;font-weight:500;transition:background var(--t),transform var(--t),color var(--t);cursor:default}.aitool:hover{background:var(--ac);color:#fff;transform:translateY(-2px)}
    /* ── SERVICES ── */
    .svgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem}
    .svc{padding:1.9rem;position:relative;overflow:hidden}.svc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gl),transparent);opacity:0;transition:opacity var(--t)}.svc:hover::before{opacity:1}
    .svico{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.1rem;position:relative}
    .svn{font-family:var(--ff);font-size:1.05rem;font-weight:700;margin-bottom:.5rem;position:relative}.svd{font-size:.84rem;color:var(--tx2);line-height:1.65;position:relative}
    .svdls{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bd);position:relative}.svdl{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--tx2);padding:2px 0}.svdl::before{content:'✓';color:var(--ac);font-weight:700}
    /* process steps */
    .psteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem}
    .pstep{padding:1.7rem 1.4rem;text-align:center}.psn{font-family:var(--ff);font-size:3rem;font-weight:800;color:var(--bd2);line-height:1;margin-bottom:.4rem}
    .pstit{font-family:var(--ff);font-weight:700;font-size:.97rem;margin-bottom:.4rem}.psd{font-size:.78rem;color:var(--tx2);line-height:1.6}
    /* ── PROJECTS ── */
    .pjgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.4rem}
    .pjc{overflow:hidden}.pjth{height:190px;background:linear-gradient(135deg,var(--bg3),var(--bg2));position:relative;display:flex;align-items:center;justify-content:center;font-size:3.2rem}
    .pjtg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,109,250,.2),rgba(224,86,253,.2))}
    .pjb{padding:1.5rem}.pjtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.7rem}.pjtag{padding:3px 9px;background:var(--sur2);border:1px solid var(--bd);border-radius:4px;font-size:.68rem;color:var(--ac);font-weight:500}
    .pjn{font-family:var(--ff);font-size:1.05rem;font-weight:700;margin-bottom:.45rem}.pjd{font-size:.83rem;color:var(--tx2);line-height:1.65}
    .pjout{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bd);display:flex;gap:1rem}.pjo{text-align:center;flex:1}
    .pjon{font-family:var(--ff);font-size:1.25rem;font-weight:800;color:var(--ac)}.pjol{font-size:.66rem;color:var(--tx3)}
    /* ── CASE STUDIES ── */
    .csgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.8rem}
    .csc{padding:2rem}.csn{font-family:var(--ff);font-size:3.5rem;font-weight:800;color:var(--bd2);line-height:1;margin-bottom:.9rem}
    .cstit{font-family:var(--ff);font-size:1.15rem;font-weight:700;margin-bottom:1rem}
    .csstep{margin-bottom:.9rem;padding-left:1rem;border-left:2px solid var(--bd)}.csstep.hl{border-left-color:var(--ac)}
    .cssl{font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ac);margin-bottom:3px}.csstep p{font-size:.83rem;color:var(--tx2);line-height:1.65}
    .csmet{display:flex;gap:1rem;margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--bd)}.csm{text-align:center;flex:1}
    .csmn{font-family:var(--ff);font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.csml{font-size:.67rem;color:var(--tx3)}
    /* ── BLOG ── */
    .blgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem}
    .blc{overflow:hidden}.blth{height:150px;background:linear-gradient(135deg,var(--bg3),var(--bg2));display:flex;align-items:center;justify-content:center;font-size:2.4rem}
    .blb{padding:1.4rem}.blcat{font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ac);margin-bottom:.45rem}
    .blt{font-family:var(--ff);font-size:.97rem;font-weight:700;margin-bottom:.4rem}.blex{font-size:.8rem;color:var(--tx2);line-height:1.65}
    .blmeta{display:flex;justify-content:space-between;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--bd);font-size:.72rem;color:var(--tx3)}
    /* ── CONTACT ── */
    .cgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem}
    .cii{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.4rem}
    .ciico{width:42px;height:42px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:1rem}
    .cilbl{font-size:.7rem;color:var(--tx3);text-transform:uppercase;letter-spacing:1px}.cival{font-weight:500;font-size:.92rem;margin-top:2px}
    .socials{display:flex;gap:9px;margin-top:1.8rem}
    .sob{width:40px;height:40px;border-radius:10px;background:var(--sur2);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:background var(--t),transform var(--t)}.sob:hover{background:var(--ac);transform:translateY(-3px)}
    .cform{display:flex;flex-direction:column;gap:.95rem}
    .fg{display:flex;flex-direction:column;gap:5px}.fg label{font-size:.78rem;font-weight:500;color:var(--tx2)}
    .fg input,.fg textarea{padding:11px 15px;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--rs);color:var(--tx);font-family:var(--fb);font-size:.87rem;transition:border-color var(--t);resize:none}
    .fg input:focus,.fg textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--gl)}.fg textarea{min-height:110px}
    /* FAQ */
    .flist{max-width:700px}.fi{border-bottom:1px solid var(--bd);padding:1.1rem 0}
    .fq{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:.92rem}
    .fq .arr{transition:transform var(--t);font-size:.95rem;color:var(--tx3)}.fi.open .fq .arr{transform:rotate(180deg)}
    .fa{font-size:.84rem;color:var(--tx2);line-height:1.72;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}.fi.open .fa{max-height:200px;padding-top:.7rem}
    /* FOOTER */
    footer{background:var(--bg2);border-top:1px solid var(--bd);padding:3.5rem 5vw 1.8rem}
    .ftg{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
    .ftb p{font-size:.83rem;color:var(--tx2);line-height:1.7;margin-top:.9rem}.ftct{font-family:var(--ff);font-weight:700;font-size:.88rem;margin-bottom:.9rem}
    .ftl li{margin-bottom:.45rem}.ftl a{font-size:.8rem;color:var(--tx2);cursor:pointer;transition:color var(--t)}.ftl a:hover{color:var(--ac)}
    .ftbot{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:1.8rem;border-top:1px solid var(--bd);font-size:.77rem;color:var(--tx3)}
    /* RESPONSIVE */
    @media(max-width:900px){.hero-in,.agrid,.cgrid{grid-template-columns:1fr}.hero-right,.pcard{display:none}.ftg{grid-template-columns:1fr 1fr}.nav-links{display:none}.ham{display:flex}}
    @media(max-width:600px){.wrap{padding:90px 5vw 60px}.ssinner{grid-template-columns:1fr 1fr}.ftg{grid-template-columns:1fr}.hstats{gap:1.4rem}}

    /* ── STORYTELLING EXPERIENCE ──────────────────────────── */
    .exp-story { position: relative; }

    /* chapter label */
    .ch-label {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: .7rem; font-weight: 800; letter-spacing: 3px;
      text-transform: uppercase; color: var(--ac); margin-bottom: 1rem;
    }
    .ch-label::before { content:''; width:28px; height:1.5px; background: var(--ac); }

    /* big chapter hero block */
    .ch-hero {
      position: relative; border-radius: 24px; overflow: hidden;
      background: linear-gradient(135deg, var(--bg2), var(--bg3));
      border: 1px solid var(--bd); margin-bottom: 3.5rem;
      padding: 3.5rem; display: grid;
      grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    }
    .ch-hero::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(124,109,250,.08), rgba(224,86,253,.05));
      pointer-events: none;
    }
    .ch-num {
      font-family: var(--ff); font-size: clamp(5rem, 12vw, 9rem);
      font-weight: 800; line-height: 1;
      background: linear-gradient(135deg, var(--bd2), var(--bd));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      position: absolute; right: 3rem; top: 50%; transform: translateY(-50%);
      pointer-events: none;
    }
    .ch-eyebrow {
      font-size: .72rem; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--ac); margin-bottom: .5rem;
    }
    .ch-title {
      font-family: var(--ff); font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800; letter-spacing: -1px; line-height: 1.1;
      margin-bottom: .8rem;
    }
    .ch-title span {
      background: linear-gradient(135deg, var(--ac), var(--ac2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .ch-period {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 4px 14px; border-radius: 99px;
      background: rgba(124,109,250,.12); border: 1px solid var(--ac);
      font-size: .75rem; font-weight: 600; color: var(--ac); margin-bottom: 1.2rem;
    }
    .ch-period .dot { width:6px; height:6px; border-radius:50%; background:#22d36e; animation: pulse 2s infinite; }
    .ch-desc { font-size: .92rem; color: var(--tx2); line-height: 1.8; }

    /* responsibilities grid */
    .ch-resp {
      display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
      position: relative; z-index: 1;
    }
    .ch-r {
      display: flex; align-items: flex-start; gap: 10px;
      padding: .75rem 1rem; border-radius: 10px;
      background: var(--sur); border: 1px solid var(--bd);
      font-size: .79rem; color: var(--tx2); line-height: 1.5;
      transition: border-color var(--t), background var(--t);
    }
    .ch-r:hover { border-color: var(--ac); background: var(--sur2); }
    .ch-r-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

    /* promotion badge */
    .promo-badge {
      position: relative; margin: -1rem 0 3rem;
      display: flex; align-items: center; justify-content: center;
    }
    .promo-badge::before, .promo-badge::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, var(--ac));
    }
    .promo-badge::after { background: linear-gradient(90deg, var(--ac), transparent); }
    .promo-pill {
      margin: 0 1.5rem; display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 20px; border-radius: 99px;
      background: linear-gradient(135deg, var(--ac), var(--ac2));
      color: #fff; font-size: .78rem; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      box-shadow: 0 8px 28px var(--gl);
      white-space: nowrap;
    }

    /* lead BA block */
    .lead-block {
      border-radius: 24px; overflow: hidden;
      background: linear-gradient(160deg, var(--bg2) 0%, #0a0a1e 100%);
      border: 1px solid var(--ac); position: relative;
    }
    .lead-block::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,109,250,.22), transparent 70%);
    }
    .lead-header {
      padding: 3rem 3rem 2rem; border-bottom: 1px solid var(--bd);
      position: relative;
    }
    .lead-tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: 99px;
      background: linear-gradient(135deg, var(--ac), var(--ac2));
      color: #fff; font-size: .68rem; font-weight: 800;
      letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem;
    }
    .lead-title {
      font-family: var(--ff); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 800; letter-spacing: -1.5px; line-height: 1.05;
      color: var(--tx); margin-bottom: .6rem;
    }
    .lead-sub { font-size: .95rem; color: var(--tx2); line-height: 1.7; max-width: 540px; }
    .lead-body { padding: 2.5rem 3rem; position: relative; }
    .lead-pillars {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
    }
    .lp {
      display: flex; align-items: flex-start; gap: 1rem;
      padding: 1.2rem 1.4rem; border-radius: 14px;
      background: var(--sur); border: 1px solid var(--bd);
      transition: border-color var(--t), transform var(--t), background var(--t);
    }
    .lp:hover { border-color: var(--ac); transform: translateY(-3px); background: var(--sur2); }
    .lp-ico {
      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
      background: linear-gradient(135deg, var(--ac), var(--ac2));
      display: flex; align-items: center; justify-content: center; font-size: .95rem;
    }
    .lp-text {}
    .lp-title { font-family: var(--ff); font-size: .88rem; font-weight: 700; margin-bottom: 3px; }
    .lp-desc { font-size: .77rem; color: var(--tx2); line-height: 1.55; }

    /* prev roles strip */
    .prev-strip {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1rem; margin-top: 3.5rem;
    }
    .prev-card {
      padding: 1.5rem; border-radius: var(--r);
      background: var(--cb); border: 1px solid var(--bd);
      position: relative; overflow: hidden;
      transition: border-color var(--t), transform var(--t);
    }
    .prev-card:hover { border-color: var(--ac); transform: translateY(-4px); }
    .prev-card::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: linear-gradient(to bottom, var(--ac), var(--ac2));
    }
    .prev-yr { font-size: .7rem; font-weight: 700; color: var(--ac);
      letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .4rem; }
    .prev-role { font-family: var(--ff); font-size: .97rem; font-weight: 700; margin-bottom: .25rem; }
    .prev-co { font-size: .8rem; color: var(--tx2); margin-bottom: .8rem; }
    .prev-pts { display: flex; flex-direction: column; gap: .35rem; }
    .prev-pt { font-size: .76rem; color: var(--tx3); display: flex; gap: 7px; align-items: flex-start; }
    .prev-pt::before { content: '›'; color: var(--ac); font-weight: 700; flex-shrink: 0; }

    @media(max-width:900px) {
      .ch-hero { grid-template-columns: 1fr; padding: 2rem; }
      .ch-num { display: none; }
      .ch-resp { grid-template-columns: 1fr; }
      .lead-header, .lead-body { padding: 2rem 1.5rem; }
    }


    /* ── 3D GLOBE CANVAS ── */
    #globe-canvas{position:absolute;top:0;right:0;width:55%;height:100%;pointer-events:none;z-index:0;opacity:.85}
    @media(max-width:900px){#globe-canvas{width:100%;height:340px;position:relative;opacity:.6}}

    /* ── CHART CONTAINERS ── */
    .chart-wrap{position:relative;width:100%;background:var(--cb);border:1px solid var(--bd);border-radius:var(--r);padding:1.6rem;backdrop-filter:blur(12px);transition:border-color var(--t)}
    .chart-wrap:hover{border-color:var(--ac)}
    .chart-title{font-family:var(--ff);font-size:.92rem;font-weight:700;margin-bottom:1.2rem;display:flex;align-items:center;gap:8px}
    .chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:2.5rem}
    .chart-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem;margin-top:2.5rem}
    @media(max-width:800px){.chart-grid-3{grid-template-columns:1fr}}

    /* ── 3D TILT CARD ── */
    .tilt-card{transform-style:preserve-3d;transition:transform .1s ease;cursor:pointer}
    .tilt-card-inner{transform:translateZ(20px)}

    /* ── FLOATING RINGS (hero decoration) ── */
    .ring-wrap{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:420px;height:420px;pointer-events:none}
    @media(max-width:900px){.ring-wrap{display:none}}
    .ring{position:absolute;border-radius:50%;border:1px solid}
    .ring1{inset:0;border-color:rgba(124,109,250,.25);animation:spin1 18s linear infinite}
    .ring2{inset:30px;border-color:rgba(224,86,253,.2);animation:spin1 12s linear infinite reverse}
    .ring3{inset:70px;border-color:rgba(64,217,247,.15);animation:spin1 8s linear infinite}
    .ring-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ac);top:-4px;left:50%;transform:translateX(-50%);box-shadow:0 0 12px var(--ac)}
    .ring-dot2{background:var(--ac2);box-shadow:0 0 12px var(--ac2);top:auto;bottom:-4px}
    .ring-dot3{background:var(--ac3);box-shadow:0 0 12px var(--ac3);top:50%;left:-4px;transform:translateY(-50%)}
    @keyframes spin1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

    /* ── RADAR CHART SECTION ── */
    .radar-section{background:linear-gradient(135deg,var(--bg2),var(--bg3));padding:70px 5vw;position:relative;overflow:hidden}
    .radar-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(124,109,250,.06),transparent 70%);pointer-events:none}

    /* ── IMPACT NUMBERS with ring progress (canvas-based) ── */
    .impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin-top:2.5rem}
    .impact-item{text-align:center;padding:1rem}
    .impact-name{font-size:.78rem;color:var(--tx2);line-height:1.4;margin-top:0.4rem}

    /* ── 3D HERO SCENE ── */
    #hero-3d{position:absolute;right:0;top:0;width:50%;height:100%;pointer-events:none}
    @media(max-width:900px){#hero-3d{width:100%;height:300px;position:relative}}


    /* ══════════════════ BLOG REDESIGN ══════════════════ */

    /* Filter tabs */
    .bl-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.8rem }
    .bl-tab {
      padding:7px 18px; border-radius:99px; font-size:.78rem; font-weight:600;
      border:1px solid var(--bd2); color:var(--tx2); cursor:pointer;
      transition:all var(--t); background:transparent;
    }
    .bl-tab:hover { border-color:var(--ac); color:var(--ac); }
    .bl-tab.act { background:linear-gradient(135deg,var(--ac),var(--ac2)); border-color:transparent; color:#fff; }

    /* Featured hero post */
    .bl-hero {
      display:grid; grid-template-columns:1.1fr 1fr; gap:0;
      border-radius:22px; overflow:hidden;
      border:1px solid var(--bd); margin-bottom:3rem;
      background:var(--cb); cursor:pointer;
      transition:transform var(--t), box-shadow var(--t);
    }
    .bl-hero:hover { transform:translateY(-4px); box-shadow:0 24px 60px var(--gl); }
    .bl-hero-art {
      position:relative; min-height:360px;
      background:linear-gradient(135deg,#0d0a2e,#1a0a3e);
      display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .bl-hero-art canvas { position:absolute; inset:0; width:100%; height:100%; }
    .bl-hero-art-inner { position:relative; z-index:1; text-align:center; padding:2rem; }
    .bl-hero-emoji { font-size:5rem; display:block; margin-bottom:1rem;
      filter:drop-shadow(0 0 30px rgba(124,109,250,.6)); }
    .bl-hero-art-label {
      display:inline-block; padding:4px 12px; border-radius:99px;
      background:rgba(124,109,250,.25); border:1px solid rgba(124,109,250,.4);
      font-size:.68rem; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color:#a89cff;
    }
    .bl-hero-body { padding:2.8rem 2.8rem; display:flex; flex-direction:column; justify-content:center; }
    .bl-hero-cat {
      font-size:.68rem; font-weight:800; letter-spacing:2.5px;
      text-transform:uppercase; color:var(--ac); margin-bottom:.8rem;
      display:flex; align-items:center; gap:6px;
    }
    .bl-hero-cat::before { content:''; width:16px; height:1.5px; background:var(--ac); }
    .bl-hero-title {
      font-family:var(--ff); font-size:clamp(1.4rem,2.8vw,2rem);
      font-weight:800; letter-spacing:-1px; line-height:1.15;
      margin-bottom:1rem;
    }
    .bl-hero-title span { background:linear-gradient(135deg,var(--ac),var(--ac2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .bl-hero-ex { font-size:.9rem; color:var(--tx2); line-height:1.8; margin-bottom:1.5rem; }
    .bl-hero-meta {
      display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
      padding-top:1.2rem; border-top:1px solid var(--bd);
    }
    .bl-author { display:flex; align-items:center; gap:9px; }
    .bl-av {
      width:36px; height:36px; border-radius:50%;
      background:linear-gradient(135deg,var(--ac),var(--ac2));
      display:flex; align-items:center; justify-content:center;
      font-family:var(--ff); font-size:.75rem; font-weight:800; color:#fff;
      overflow:hidden; flex-shrink:0;
    }
    .bl-av img { width:100%; height:100%; object-fit:cover; }
    .bl-author-name { font-size:.8rem; font-weight:600; }
    .bl-author-role { font-size:.7rem; color:var(--tx3); }
    .bl-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
    .bl-chip { font-size:.68rem; color:var(--tx3); display:flex; align-items:center; gap:4px; }

    /* Read more button on hero */
    .bl-read-btn {
      display:inline-flex; align-items:center; gap:7px; margin-top:1.4rem;
      padding:10px 22px; border-radius:99px;
      border:1px solid var(--ac); color:var(--ac); font-size:.82rem; font-weight:600;
      transition:all var(--t); width:fit-content;
    }
    .bl-read-btn:hover { background:var(--ac); color:#fff; transform:translateX(4px); }
    .bl-read-btn .arr { transition:transform var(--t); }
    .bl-read-btn:hover .arr { transform:translateX(4px); }

    /* Card grid */
    .bl-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
      gap:1.5rem;
    }

    /* Individual blog card */
    .bl-card {
      border-radius:18px; overflow:hidden;
      background:var(--cb); border:1px solid var(--bd);
      cursor:pointer; transition:transform var(--t), border-color var(--t), box-shadow var(--t);
      display:flex; flex-direction:column;
    }
    .bl-card:hover { transform:translateY(-6px); border-color:var(--ac); box-shadow:0 20px 50px var(--gl); }

    /* Card top art */
    .bl-card-art {
      position:relative; height:180px; overflow:hidden;
      background:linear-gradient(135deg,var(--bg2),var(--bg3));
      display:flex; align-items:center; justify-content:center;
    }
    .bl-card-art canvas { position:absolute; inset:0; }
    .bl-card-art-emoji { font-size:3rem; position:relative; z-index:1;
      filter:drop-shadow(0 0 20px rgba(124,109,250,.5)); }
    .bl-card-art-overlay {
      position:absolute; inset:0; z-index:1;
      background:linear-gradient(to top, rgba(6,6,16,.6) 0%, transparent 60%);
    }
    /* Category badge floated on the art */
    .bl-card-cat-badge {
      position:absolute; top:12px; left:12px; z-index:2;
      padding:3px 10px; border-radius:99px; font-size:.65rem; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase; color:#fff;
    }
    /* Read time badge */
    .bl-card-time {
      position:absolute; top:12px; right:12px; z-index:2;
      padding:3px 10px; border-radius:99px; font-size:.65rem; font-weight:600;
      background:rgba(0,0,0,.5); color:rgba(255,255,255,.8);
      backdrop-filter:blur(6px);
    }

    /* Card body */
    .bl-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
    .bl-card-title {
      font-family:var(--ff); font-size:1rem; font-weight:700;
      line-height:1.3; margin-bottom:.6rem;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .bl-card-ex {
      font-size:.8rem; color:var(--tx2); line-height:1.7; flex:1;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .bl-card-footer {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:1rem; padding-top:1rem; border-top:1px solid var(--bd);
    }
    .bl-card-date { font-size:.72rem; color:var(--tx3); }
    .bl-card-link {
      font-size:.75rem; font-weight:600; color:var(--ac);
      display:flex; align-items:center; gap:4px;
      transition:gap var(--t);
    }
    .bl-card:hover .bl-card-link { gap:8px; }

    /* Newsletter */
    .bl-newsletter {
      margin-top:4rem; border-radius:22px; overflow:hidden; position:relative;
      background:linear-gradient(135deg,var(--bg2),var(--bg3));
      border:1px solid var(--bd); padding:3.5rem;
    }
    .bl-newsletter::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 70% 80% at 50% 0%, rgba(124,109,250,.12), transparent 70%);
    }
    .bl-nl-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
    .bl-nl-title { font-family:var(--ff); font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; letter-spacing:-1px; margin-bottom:.7rem; }
    .bl-nl-title span { background:linear-gradient(135deg,var(--ac),var(--ac2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .bl-nl-sub { font-size:.88rem; color:var(--tx2); line-height:1.75; }
    .bl-nl-topics { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
    .bl-nl-topic { padding:4px 11px; border-radius:99px; font-size:.7rem; font-weight:600; background:var(--sur2); border:1px solid var(--bd2); color:var(--tx2); }
    .bl-nl-form { display:flex; flex-direction:column; gap:.8rem; }
    .bl-nl-input {
      padding:13px 18px; background:var(--sur); border:1px solid var(--bd2);
      border-radius:12px; color:var(--tx); font-family:var(--fb); font-size:.9rem;
      transition:border-color var(--t);
    }
    .bl-nl-input:focus { outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--gl); }
    .bl-nl-trust { font-size:.72rem; color:var(--tx3); display:flex; align-items:center; gap:5px; }

    /* Stats bar */
    .bl-stats { display:flex; gap:2rem; margin-bottom:2.5rem; flex-wrap:wrap; }
    .bl-stat { display:flex; flex-direction:column; gap:2px; }
    .bl-stat-n { font-family:var(--ff); font-size:1.5rem; font-weight:800; color:var(--ac); line-height:1; }
    .bl-stat-l { font-size:.7rem; color:var(--tx3); }

    @media(max-width:900px) {
      .bl-hero { grid-template-columns:1fr; }
      .bl-hero-art { min-height:220px; }
      .bl-nl-inner { grid-template-columns:1fr; gap:2rem; }
      .bl-newsletter { padding:2rem; }
    }
    @media(max-width:600px) {
      .bl-hero-body { padding:1.8rem; }
      .bl-grid { grid-template-columns:1fr; }
    }