/* ══════ PRELOADER ══════ */
#preloader{position:fixed;inset:0;z-index:99999;background:var(--preloader-bg,#08080d);display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader{width:40px;height:40px;border:3px solid var(--bd,#1e1e2c);border-top-color:var(--accent,#6366f1);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════ THEMES ══════ */
/* Design Tokens:
   --bg/--bg2   Background primary/secondary
   --card/--card-h  Card surface / hover
   --nav-bg     Navigation backdrop
   --accent     Primary brand color (indigo)
   --accent-l   Lighter accent variant
   --ag/--ags   Accent glow / strong
   --t1/--t2/--t3  Text primary / secondary / tertiary (≥4.5:1 contrast)
   --bd/--bdl   Border / lighter border
   --tbg/--tc   Tag background / color
   --grn/--gg   Success green / glow
   --sh         Box shadow
*/
[data-theme="dark"]{--bg:#08080d;--bg2:#0c0c14;--card:#121219;--card-h:#18181f;--nav-bg:rgba(8,8,13,.8);--accent:#6366f1;--accent-l:#818cf8;--ag:rgba(99,102,241,.1);--ags:rgba(99,102,241,.2);--t1:#eaeaf0;--t2:#9090a8;--t3:#7a7a98;--bd:#1a1a28;--bdl:#262638;--tbg:rgba(99,102,241,.08);--tc:#a5b4fc;--grn:#34d399;--gg:rgba(52,211,153,.08);--sh:0 2px 16px rgba(0,0,0,.2);--preloader-bg:#08080d}
[data-theme="light"]{--bg:#f7f7fb;--bg2:#eeeef5;--card:#ffffff;--card-h:#f8f8ff;--nav-bg:rgba(247,247,251,.85);--accent:#4f46e5;--accent-l:#6366f1;--ag:rgba(79,70,229,.06);--ags:rgba(79,70,229,.12);--t1:#111118;--t2:#555570;--t3:#5e5e78;--bd:#dcdce8;--bdl:#ccccd8;--tbg:rgba(79,70,229,.05);--tc:#4f46e5;--grn:#059669;--gg:rgba(5,150,105,.05);--sh:0 1px 8px rgba(0,0,0,.04);--preloader-bg:#f7f7fb}

/* ══════ BASE ══════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;scrollbar-width:thin;scrollbar-color:var(--bdl) var(--bg);overscroll-behavior-y:none}
body{font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .4s,color .4s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.loading{overflow:hidden}
::selection{background:var(--ags);color:var(--t1)}

/* Focus visible */
:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px}

/* Skip to content */
.skip{position:absolute;top:-100%;left:16px;z-index:100001;padding:8px 16px;background:var(--accent);color:#fff;border-radius:8px;font-size:14px;text-decoration:none;transition:top .2s}
.skip:focus{top:8px}

/* Grain */
body::after{content:'';position:fixed;inset:0;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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}

/* Scroll progress */
.spb{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--grn));z-index:10001;width:var(--progress,0%);border-radius:0 2px 2px 0}

/* Dotted surface */
#shbg{position:fixed;inset:0;z-index:0;pointer-events:none}
#shbg canvas{display:block;width:100%!important;height:100%!important}

/* Cursor glow */
.cg{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--ag) 0%,transparent 70%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cg.on{opacity:1}

.w{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ══════ NAV ══════ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--nav-bg);border-bottom:1px solid var(--bd);transition:background .4s,border-color .4s,box-shadow .3s}
nav.scrolled{box-shadow:0 1px 20px rgba(0,0,0,.06);border-image:linear-gradient(90deg,transparent,var(--accent),var(--grn),transparent) 1;border-bottom-width:1px}
nav .w{display:flex;justify-content:space-between;align-items:center;height:60px}
.logo{font-weight:800;font-size:18px;letter-spacing:-.5px;user-select:none;cursor:pointer;transition:opacity .2s}.logo:hover{opacity:.8}.logo span{color:var(--accent-l)}

/* ═══ EXPANDABLE TABS ═══ */
.etabs{display:flex;align-items:center;border-radius:14px;border:1px solid var(--bd);background:var(--card);padding:4px;gap:2px;transition:background .4s,border-color .4s}
.etab{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 8px;gap:0;border-radius:10px;border:none;background:transparent;color:var(--t3);font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;outline:none;transition:background .2s,color .2s,gap .35s cubic-bezier(.22,1,.36,1),padding .35s cubic-bezier(.22,1,.36,1)}
.etab:focus-visible{outline:2px solid var(--accent-l);outline-offset:-2px}
.etab:hover{background:var(--ag);color:var(--t2)}
.etab[aria-selected="true"]{background:var(--ag);color:var(--accent-l);gap:6px;padding:0 14px}
.etab svg{width:16px;height:16px;flex-shrink:0}
.etab-t{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .3s .04s}
.etab[aria-selected="true"] .etab-t{max-width:90px;opacity:1}
.etab-sep{width:1px;height:16px;background:var(--bd);flex-shrink:0}

/* Nav right */
.nr{display:flex;align-items:center;gap:6px}
.nb{width:34px;height:34px;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--t2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s;font-size:16px;position:relative;flex-shrink:0}
.nb:hover{border-color:var(--bdl);color:var(--t1);background:var(--card-h)}
.nb:active{transform:scale(.94)}
.nb svg{width:16px;height:16px}
.nb[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--card);color:var(--t2);font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--bd);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;font-family:'Outfit'}
.nb[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* Time pill */
.atime{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3);display:flex;align-items:center;gap:5px;margin-right:2px}
.atime .dot{width:5px;height:5px;border-radius:50%;background:var(--grn);animation:pls 2s ease-in-out infinite}

/* Music bars */
.mb .bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.mb .bar{width:3px;background:var(--t3);border-radius:2px;transition:background .2s}
.mb:hover .bar{background:var(--accent-l)}
.mb .bar:nth-child(1){height:4px}.mb .bar:nth-child(2){height:8px}.mb .bar:nth-child(3){height:5px}.mb .bar:nth-child(4){height:10px}
.mb.on .bar{background:var(--accent-l);animation:bb .8s ease-in-out infinite}
.mb.on .bar:nth-child(1){animation-delay:0s}.mb.on .bar:nth-child(2){animation-delay:.15s}.mb.on .bar:nth-child(3){animation-delay:.3s}.mb.on .bar:nth-child(4){animation-delay:.45s}
@keyframes bb{0%,100%{height:4px}50%{height:14px}}

.lb{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.5px;width:auto;padding:0 10px}

/* Hamburger */
.ham{display:none;width:34px;height:34px;border:none;background:none;cursor:pointer;position:relative;padding:0}
.ham span{display:block;width:18px;height:2px;background:var(--t1);border-radius:2px;position:absolute;left:8px;transition:transform .3s,opacity .3s,top .3s}
.ham span:nth-child(1){top:11px}.ham span:nth-child(2){top:16px}.ham span:nth-child(3){top:21px}
.ham.x span:nth-child(1){top:16px;transform:rotate(45deg)}.ham.x span:nth-child(2){opacity:0}.ham.x span:nth-child(3){top:16px;transform:rotate(-45deg)}

/* ══════ HERO ══════ */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:60px}
.hbadge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:100px;padding:7px 16px;font-size:13px;color:var(--t2);margin-bottom:28px;animation:fu .5s ease-out;transition:background .4s,border-color .4s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--grn);animation:pls 2s ease-in-out infinite}
@keyframes pls{0%,100%{opacity:1}50%{opacity:.3}}
.ht{font-size:clamp(44px,7vw,82px);font-weight:900;line-height:1.03;letter-spacing:-3px;margin-bottom:20px;animation:fu .5s ease-out .08s both}
.ht .gr{background:linear-gradient(135deg,var(--accent-l) 0%,var(--grn) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .ht .gr{background:linear-gradient(135deg,#4338ca 0%,#047857 100%);-webkit-background-clip:text;background-clip:text;text-shadow:none}
.htyp{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--accent-l);margin-bottom:20px;animation:fu .5s ease-out .15s both;min-height:24px}
.htyp .cur{display:inline-block;width:2px;height:18px;background:var(--accent-l);margin-left:2px;animation:blk 1s step-end infinite;vertical-align:text-bottom}
@keyframes blk{0%,100%{opacity:1}50%{opacity:0}}
.hd{font-size:17px;color:var(--t2);max-width:580px;line-height:1.7;margin-bottom:36px;font-weight:300;animation:fu .5s ease-out .2s both}
.ha{display:flex;gap:14px;flex-wrap:wrap;animation:fu .5s ease-out .28s both}
.hs{display:flex;gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid var(--bd);animation:fu .5s ease-out .36s both;transition:border-color .4s}
.hsn{font-size:32px;font-weight:800;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.hsn .p{color:var(--accent-l)}.hsl{font-size:13px;color:var(--t3);margin-top:2px}
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* Scroll hint */
.scroll-hint{text-align:center;padding-top:32px;animation:fu .5s ease-out .5s both}
.scroll-hint svg{color:var(--t3);animation:scrollBounce 2s ease-in-out infinite;opacity:.6}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ══════ BUTTONS ══════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;font-size:15px;font-weight:500;text-decoration:none;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;cursor:pointer;border:none;font-family:inherit}
.bp{background:var(--accent);color:#fff}.bp:hover{background:var(--accent-l);transform:translateY(-2px);box-shadow:0 8px 30px var(--ags)}
.bo{background:transparent;color:var(--t1);border:1px solid var(--bdl);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.bo:hover{border-color:var(--t3);background:var(--card);transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)!important}
.btn svg{width:16px;height:16px;flex-shrink:0}

/* ══════ SECTIONS ══════ */
section{padding:100px 0;position:relative;z-index:1;background:var(--bg);transition:background .4s;scroll-margin-top:68px}
section.hero{background:transparent}
section.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none;z-index:0}
section:nth-of-type(even){background:var(--bg2)}
.sh{margin-bottom:52px}.sla{font-family:'JetBrains Mono',monospace;font-size:12px;background:linear-gradient(90deg,var(--accent-l),var(--grn));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:10px}.stl{font-size:34px;font-weight:700;letter-spacing:-1.5px;text-wrap:balance}

/* ══════ SKILLS ══════ */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.sc{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:26px;transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;box-shadow:var(--sh)}
.sc:hover{will-change:transform}.sc:hover{background:var(--card-h);border-color:var(--bdl);transform:translateY(-3px);box-shadow:var(--sh),0 0 20px var(--ag)}
.si{width:42px;height:42px;border-radius:11px;background:var(--ag);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:19px}
.sc h3{font-size:15px;font-weight:600;margin-bottom:8px;letter-spacing:-.2px}.sc p{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{background:var(--tbg);color:var(--tc);font-size:11px;padding:3px 9px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s}
.tag:hover{background:var(--ags);transform:translateY(-1px)}

/* ══════ TIMELINE ══════ */
.tl{position:relative;padding-left:32px}
.tl::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--accent),var(--bd),transparent);border-radius:2px}
.ti{position:relative;margin-bottom:44px}.ti:last-child{margin-bottom:0}
.ti::before{content:'';position:absolute;left:-36px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);transition:border-color .4s,transform .3s}
.ti.rv.vis::before{animation:dotPulse .6s ease-out}
@keyframes dotPulse{0%{transform:scale(0)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
.td{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t3);margin-bottom:3px}
.tr{font-size:19px;font-weight:600;letter-spacing:-.4px;margin-bottom:3px}
.tc{font-size:14px;color:var(--accent-l);margin-bottom:10px}
.tds{font-size:14px;color:var(--t2);line-height:1.7}

/* ══════ CASES ══════ */
.cg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:16px}
.cc{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:28px;transition:background .3s,border-color .3s,transform .3s;position:relative;overflow:hidden;box-shadow:var(--sh)}
.cc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--grn));opacity:0;transition:opacity .3s}
.cc::after{content:'';position:absolute;inset:-1px;border-radius:16px;padding:1px;background:linear-gradient(135deg,var(--accent),var(--grn),var(--accent));background-size:200% 200%;opacity:0;transition:opacity .4s;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.cc:hover{will-change:transform}.cc:hover{background:var(--card-h);transform:translateY(-3px)}.cc:hover::before{opacity:1}.cc:hover::after{opacity:.4;animation:gborder 3s ease infinite}
@keyframes gborder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ct{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.cc h3{font-size:17px;font-weight:600;letter-spacing:-.3px}
.cst{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);white-space:nowrap;flex-shrink:0}
.cc p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:14px}
.ms{display:flex;gap:16px;flex-wrap:wrap}
.m{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--grn);font-weight:500}.m svg{width:13px;height:13px}

/* ══════ CONTACT ══════ */
.cog{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.ci h3{font-size:26px;font-weight:700;letter-spacing:-1px;margin-bottom:14px}.ci>p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:28px}
.cls2{display:flex;flex-direction:column;gap:10px}
.cl{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--card);border:1px solid var(--bd);border-radius:12px;text-decoration:none;color:var(--t1);transition:background .25s,border-color .25s,transform .25s;font-size:14px}
.cl:hover{background:var(--card-h);border-color:var(--bdl);transform:translateX(4px)}
.cl:hover .cli{background:var(--ags);color:var(--accent-l)}
.cli{width:38px;height:38px;border-radius:10px;background:var(--ag);display:flex;align-items:center;justify-content:center;flex-shrink:0}.cli svg{width:18px;height:18px}
.clsub{color:var(--t3);font-size:12px}

/* Email copy toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--card);border:1px solid var(--bd);color:var(--t1);font-size:13px;padding:10px 20px;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:9999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.vis{opacity:1;transform:translateX(-50%) translateY(0)}

.csid{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:32px;transition:background .4s,border-color .4s}
.csid h4{font-size:17px;font-weight:600;margin-bottom:6px}.csid>p{font-size:13px;color:var(--t2);margin-bottom:20px}
.lgr{display:flex;flex-wrap:wrap;gap:8px}
.lp{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;font-size:13px;transition:border-color .2s,transform .2s}
.lp:hover{border-color:var(--bdl);transform:translateY(-1px)}
.ll{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--accent-l);background:var(--tbg);padding:2px 7px;border-radius:4px}

/* ══════ BTT ══════ */
.btt{position:fixed;bottom:28px;right:28px;width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--bd);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s,color .2s,border-color .2s;pointer-events:none}
.btt.vis{opacity:1;transform:translateY(0);pointer-events:all}
.btt:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.btt svg{width:20px;height:20px}

/* ══════ CONFETTI ══════ */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:99998;overflow:hidden}
.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;opacity:0;animation:confettiFall 3s ease-out forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

/* ══════ FOOTER ══════ */
footer{border-top:1px solid var(--bd);padding:22px 0;transition:border-color .4s;background:var(--bg);position:relative;z-index:1}
footer .w{display:flex;justify-content:space-between;align-items:center}footer p{font-size:13px;color:var(--t3)}

/* ══════ REVEAL ══════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}.rv.vis{opacity:1;transform:translateY(0)}

/* ══════ TRUST BAR ══════ */
.trust-bar{overflow:hidden;padding:20px 0;position:relative}
.trust-bar::before,.trust-bar::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.trust-bar::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.trust-bar::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.trust-track{display:flex;gap:48px;animation:trustScroll 25s linear infinite;width:max-content;align-items:center}
.trust-track:hover{animation-play-state:paused}
.trust-item{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--t3);white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color .2s}
.trust-item:hover{color:var(--t1)}
.trust-item span{font-size:18px}
@keyframes trustScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════ POPULAR BADGE ══════ */
.price-badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--accent),var(--grn));color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:100px;letter-spacing:.3px;animation:badgeShimmer 3s ease-in-out infinite}
@keyframes badgeShimmer{0%,100%{box-shadow:0 0 0 rgba(99,102,241,0)}50%{box-shadow:0 0 12px rgba(99,102,241,.4)}}

/* ══════ BLOG CTA ══════ */
.blog-cta{background:linear-gradient(135deg,var(--accent),#4338ca);border-radius:20px;padding:48px;text-align:center;position:relative;overflow:hidden}
.blog-cta::before{content:'';position:absolute;inset:0;background: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='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");pointer-events:none}
.blog-cta h3{font-size:28px;font-weight:700;color:#fff;margin-bottom:10px;position:relative;letter-spacing:-.5px}
.blog-cta p{font-size:15px;color:rgba(255,255,255,.8);margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto;position:relative;line-height:1.6}
.blog-cta .btn{position:relative}

/* ══════ ESTIMATE CTA ══════ */
.estimate-cta{margin-top:20px;background:linear-gradient(135deg,var(--accent),var(--grn));border-radius:14px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:transform .2s}
.estimate-cta:hover{transform:translateY(-2px)}
.estimate-cta-text{color:#fff}
.estimate-cta-text h4{font-size:15px;font-weight:600;margin-bottom:2px}
.estimate-cta-text p{font-size:12px;opacity:.8}
.estimate-cta a{background:#fff;color:var(--accent);padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.estimate-cta a:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}

/* ══════ ENHANCED FOOTER ══════ */
footer .w{flex-wrap:wrap;gap:12px}
.footer-social{display:flex;gap:8px;align-items:center}
.footer-social a{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--t3);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.footer-social a:hover{background:var(--ag);border-color:var(--bdl);color:var(--accent-l)}
.footer-social a svg{width:14px;height:14px}

/* ══════ HERO LAYOUT WITH AVATAR ══════ */
.hero-inner{display:flex;align-items:center;gap:60px}
.hero-text{flex:1}
.hero-avatar{flex-shrink:0;width:200px;height:200px;border-radius:28px;background:linear-gradient(135deg,var(--accent) 0%,var(--grn) 100%);display:flex;align-items:center;justify-content:center;font-size:80px;line-height:1;box-shadow:0 20px 60px var(--ags);position:relative;overflow:hidden;animation:fu .5s ease-out .1s both}
.hero-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.08));pointer-events:none}
.hero-avatar img{width:100%;height:100%;object-fit:cover;border-radius:28px}

/* ══════ METRICS DASHBOARD ══════ */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.metric-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px;text-align:center;transition:background .3s,border-color .3s,transform .3s;box-shadow:var(--sh)}
.metric-card:hover{background:var(--card-h);border-color:var(--bdl);transform:translateY(-3px)}
.metric-val{font-size:36px;font-weight:800;letter-spacing:-2px;line-height:1;margin-bottom:6px}
.metric-val.accent{color:var(--accent-l)}
.metric-val.green{color:var(--grn)}
.metric-label{font-size:13px;color:var(--t2);line-height:1.4}

/* ══════ PROCESS ══════ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.process-grid::before{content:'';position:absolute;top:36px;left:60px;right:60px;height:2px;background:linear-gradient(90deg,var(--accent),var(--grn));opacity:.3;z-index:0}
.pstep{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:28px 20px;text-align:center;position:relative;z-index:1;transition:background .3s,border-color .3s,transform .3s;box-shadow:var(--sh)}
.pstep:hover{background:var(--card-h);border-color:var(--bdl);transform:translateY(-3px)}
.pstep-num{width:44px;height:44px;border-radius:12px;background:var(--ag);color:var(--accent-l);font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:background .3s,color .3s}
.pstep:hover .pstep-num{background:linear-gradient(135deg,var(--accent),var(--grn));color:#fff}
.pstep h3{font-size:15px;font-weight:600;margin-bottom:6px;letter-spacing:-.2px}
.pstep p{font-size:13px;color:var(--t2);line-height:1.5}
.pstep-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--grn);margin-top:8px;font-weight:500}

/* ══════ TESTIMONIALS ══════ */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.tcard{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:28px;position:relative;transition:background .3s,border-color .3s,transform .3s;box-shadow:var(--sh)}
.tcard:hover{background:var(--card-h);border-color:var(--bdl);transform:translateY(-3px)}
.tcard-quote{font-size:14px;color:var(--t1);line-height:1.7;margin-bottom:18px;font-style:italic}
.tcard-quote::before{content:'\201C';font-size:48px;font-weight:800;color:var(--accent-l);line-height:0;position:relative;top:16px;margin-right:4px;opacity:.5;transition:opacity .3s}
.tcard:hover .tcard-quote::before{opacity:.8}
.tcard-author{display:flex;align-items:center;gap:12px}
.tcard-ava{width:40px;height:40px;border-radius:10px;background:var(--ag);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tcard-name{font-size:14px;font-weight:600}
.tcard-role{font-size:12px;color:var(--t3)}

/* VIDEO DEMO — removed (unused, no HTML) */

/* ══════ PRICING ══════ */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.price-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:32px 28px;transition:background .3s,border-color .3s,transform .3s;position:relative;box-shadow:var(--sh)}
.price-card:hover{background:var(--card-h);border-color:var(--bdl);transform:translateY(-3px)}
.price-card.featured{border-color:var(--accent);box-shadow:var(--sh),0 0 30px var(--ag)}
.price-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--grn));border-radius:16px 16px 0 0}
.price-icon{font-size:28px;margin-bottom:12px}
.price-card h3{font-size:18px;font-weight:700;margin-bottom:4px;letter-spacing:-.3px}
.price-card .price-sub{font-size:13px;color:var(--t3);margin-bottom:16px}
.price-from{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--accent-l);margin-bottom:6px}
.price-from span{font-size:13px;font-weight:400;color:var(--t3)}
.price-list{list-style:none;padding:0;margin:16px 0 20px}
.price-list li{font-size:13px;color:var(--t2);padding:5px 0;display:flex;align-items:center;gap:8px}
.price-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--grn);flex-shrink:0}
.price-cta{display:block;text-align:center;padding:12px;border-radius:10px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s,transform .15s;border:1px solid var(--bdl);color:var(--t1);background:transparent}
.price-cta:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}
.price-card.featured .price-cta{background:var(--accent);color:#fff;border-color:var(--accent)}
.price-card.featured .price-cta:hover{background:var(--accent-l)}

/* ══════ FLOATING TELEGRAM ══════ */
.float-tg{position:fixed;bottom:28px;left:28px;z-index:90;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .4s;pointer-events:none}
.float-tg.vis{opacity:1;transform:translateY(0);pointer-events:all}
.float-tg-btn{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(42,171,238,.35);cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none;border:none;position:relative}
.float-tg-btn:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(42,171,238,.45)}
.float-tg-btn:active{transform:scale(.97)}
.float-tg-btn svg{width:26px;height:26px}
.float-tg-btn .pulse-ring{position:absolute;inset:-4px;border-radius:20px;border:2px solid #2AABEE;animation:tgPulse 2s ease-out infinite;opacity:0}
@keyframes tgPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.3);opacity:0}}
.float-tg-tip{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--t2);box-shadow:var(--sh);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;pointer-events:none}
.float-tg:hover .float-tg-tip{opacity:1;transform:translateX(0)}

/* ══════ FAQ ══════ */
.faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:background .3s,border-color .3s}
.faq-item:hover{border-color:var(--bdl)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;gap:16px;user-select:none;transition:background .2s}
.faq-q:hover{background:var(--ag)}
.faq-q h4{font-size:15px;font-weight:500;line-height:1.4}
.faq-q .faq-arrow{width:20px;height:20px;flex-shrink:0;color:var(--t3);transition:transform .3s,color .3s}
.faq-item.open .faq-q .faq-arrow{transform:rotate(180deg);color:var(--accent-l)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .3s}
.faq-a-inner{padding:0 22px 18px;font-size:14px;color:var(--t2);line-height:1.7}
.faq-item.open .faq-a{max-height:300px}

/* ══════ CASE RESULT BADGES ══════ */
.case-results{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.case-result{display:inline-flex;align-items:center;gap:5px;background:var(--gg);color:var(--grn);font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace}
.case-result svg{width:12px;height:12px}

/* ══════ MOBILE STICKY CTA ══════ */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:89;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--bd);padding:12px 16px;transform:translateY(100%);transition:transform .3s}
.sticky-cta.vis{transform:translateY(0)}
.sticky-cta-inner{display:flex;gap:10px;max-width:600px;margin:0 auto}
.sticky-cta .btn{flex:1;justify-content:center;padding:12px;font-size:14px}

/* ══════ AVAILABILITY DOT ══════ */
.avail-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--grn);font-weight:500;margin-top:12px}
.avail-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grn);animation:pls 2s ease-in-out infinite}

/* ══════ CASE FILTERS ══════ */
.case-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.cf-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:100px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.cf-btn:hover{border-color:var(--bdl);color:var(--t1);background:var(--ag)}
.cf-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cf-btn .cf-count{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.7}
.cc[data-cat]{transition:opacity .3s,transform .3s}
.cc.hide-case{opacity:0;transform:scale(.95);position:absolute;pointer-events:none;height:0;overflow:hidden;margin:0;padding:0;border:0}

/* ══════ WHATSAPP MOCKUP ══════ */
.wa-mockup{max-width:420px;margin:0 auto;background:var(--card);border:1px solid var(--bd);border-radius:20px;overflow:hidden;box-shadow:var(--sh)}
.wa-header{background:linear-gradient(135deg,#075e54,#128c7e);padding:14px 18px;display:flex;align-items:center;gap:12px}
.wa-header-ava{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.wa-header-info{flex:1}
.wa-header-name{color:#fff;font-size:14px;font-weight:600}
.wa-header-status{color:rgba(255,255,255,.7);font-size:11px}
.wa-chat{padding:16px;min-height:280px;background:var(--bg2);display:flex;flex-direction:column;gap:8px}
.wa-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;opacity:0;transform:translateY(10px);animation:waMsgIn .4s ease-out forwards}
.wa-msg-in{background:var(--card);border:1px solid var(--bd);align-self:flex-start;border-bottom-left-radius:4px}
.wa-msg-out{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.wa-msg-bot{background:var(--gg);border:1px solid rgba(52,211,153,.2);align-self:flex-start;border-bottom-left-radius:4px;color:var(--t1)}
.wa-msg .wa-time{font-size:10px;opacity:.6;text-align:right;margin-top:4px}
.wa-typing{align-self:flex-start;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 18px;display:flex;gap:4px;opacity:0;transform:translateY(10px);animation:waMsgIn .3s ease-out forwards}
.wa-typing span{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:typDot 1.4s ease-in-out infinite}
.wa-typing span:nth-child(2){animation-delay:.2s}
.wa-typing span:nth-child(3){animation-delay:.4s}
@keyframes typDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@keyframes waMsgIn{to{opacity:1;transform:translateY(0)}}

/* ══════ BOOK CALL BUTTON ══════ */
.book-call{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--grn),#047857);color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(52,211,153,.25);margin-top:16px;border:none;cursor:pointer;font-family:inherit}
.book-call:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(52,211,153,.35)}
.book-call svg{width:18px;height:18px}

/* ══════ CARD HOVER GLOW ══════ */
.sc::after,.metric-card::after,.pstep::after,.tcard::after,.price-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--accent),var(--grn));opacity:0;transition:opacity .3s;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.sc:hover::after,.metric-card:hover::after,.pstep:hover::after,.tcard:hover::after{opacity:.25}
.price-card.featured:hover::after{opacity:.5}
.sc,.metric-card,.pstep,.tcard,.price-card{position:relative;overflow:visible}

/* ══════ SECTION PROGRESS DOTS ══════ */
.sec-progress{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .3s}
.sec-progress.vis{opacity:1}
.sec-dot{width:8px;height:8px;border-radius:50%;background:var(--bd);cursor:pointer;transition:background .2s,transform .2s;position:relative}
.sec-dot:hover{background:var(--t3);transform:scale(1.3)}
.sec-dot.active{background:var(--accent-l);transform:scale(1.3)}
.sec-dot[data-tip]::before{content:attr(data-tip);position:absolute;right:20px;top:50%;transform:translateY(-50%);background:var(--card);border:1px solid var(--bd);padding:4px 10px;border-radius:6px;font-size:10px;color:var(--t2);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.sec-dot:hover[data-tip]::before{opacity:1}

/* ══════ QUICK CONTACT FORM ══════ */
.quick-form{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:28px;transition:background .4s,border-color .4s}
.quick-form:focus-within{border-color:var(--accent-l)}
.quick-form h4{font-size:17px;font-weight:600;margin-bottom:6px}
.quick-form>p{font-size:13px;color:var(--t2);margin-bottom:18px}
.qf-input{flex:1;padding:12px 16px;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--t1);font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;transition:border-color .2s;outline:none}
.qf-input:focus{border-color:var(--accent-l)}
.qf-input::placeholder{color:var(--t3)}
.qf-textarea{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--t1);font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;resize:vertical;min-height:80px;transition:border-color .2s;outline:none;margin-bottom:12px}
.qf-textarea:focus{border-color:var(--accent-l)}
.qf-textarea::placeholder{color:var(--t3)}
.qf-submit{width:100%;padding:13px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s}
.qf-submit:hover:not(:disabled){background:var(--accent-l);transform:translateY(-1px)}
.qf-submit:active:not(:disabled){transform:translateY(0)}
.qf-submit:disabled{opacity:.6;cursor:not-allowed}
.qf-success{display:none;text-align:center;padding:20px}
.qf-success.show{display:block}
.qf-success .qf-check{font-size:48px;margin-bottom:8px}
.qf-success p{font-size:14px;color:var(--t2)}

/* ══════ SKILL PROFICIENCY BARS ══════ */
.skill-bar{height:4px;background:var(--bd);border-radius:4px;margin-top:10px;overflow:hidden}
.skill-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--grn));width:0%;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.skill-bar-fill.animated{width:var(--fill)}

/* ══════ TIMELINE ENHANCEMENT ══════ */
.ti-duration{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-l);background:var(--tbg);padding:3px 10px;border-radius:6px;margin-top:8px}

/* ══════ PHONE COPY ══════ */
.cl-copyable{cursor:pointer}
.cl-copyable:active{transform:translateX(2px)}

/* ══════ MULTI-STEP FORM ══════ */
.msf{position:relative}
.msf-progress{display:flex;gap:4px;margin-bottom:18px}
.msf-bar{flex:1;height:4px;border-radius:4px;background:var(--bd);transition:background .3s}
.msf-bar.done{background:var(--accent)}
.msf-bar.active{background:linear-gradient(90deg,var(--accent),var(--grn))}
.msf-step{display:none}
.msf-step.active{display:block}
.msf-step h5{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--t1)}
.msf-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.msf-opt{padding:14px;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);cursor:pointer;text-align:center;font-size:13px;color:var(--t2);transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.msf-opt:hover,.msf-opt:focus-visible{border-color:var(--accent-l);color:var(--t1);background:var(--ag)}
.msf-opt.selected{border-color:var(--accent);background:var(--ag);color:var(--accent-l);font-weight:600}
.msf-opt .msf-ico{font-size:22px}
.msf-back{background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;padding:8px 0;font-family:inherit;transition:color .2s}
.msf-back:hover{color:var(--t1)}

/* ══════ SOCIAL PROOF TOASTS ══════ */
.sp-toast{position:fixed;bottom:90px;left:28px;z-index:88;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px 18px 12px 14px;box-shadow:0 8px 32px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;max-width:340px;opacity:0;transform:translateX(-20px);transition:opacity .4s,transform .4s;pointer-events:none}
.sp-toast.vis{opacity:1;transform:translateX(0);pointer-events:all}
.sp-toast-ava{width:36px;height:36px;border-radius:10px;background:var(--ag);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sp-toast-text{font-size:12px;color:var(--t2);line-height:1.4}
.sp-toast-text strong{color:var(--t1);font-weight:600}
.sp-toast-time{font-size:10px;color:var(--t3);margin-top:2px}
.sp-toast-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;line-height:1;padding:2px}

/* ══════ EXIT-INTENT POPUP ══════ */
.exit-overlay{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.exit-overlay.vis{display:flex;opacity:1}
.exit-popup{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:40px;max-width:420px;width:90%;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:fu .4s ease-out}
.exit-popup .exit-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--t3);cursor:pointer;font-size:20px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.exit-popup .exit-close:hover{background:var(--ag)}
.exit-popup .exit-icon{font-size:48px;margin-bottom:12px}
.exit-popup h3{font-size:22px;font-weight:700;margin-bottom:8px;letter-spacing:-.5px}
.exit-popup p{font-size:14px;color:var(--t2);margin-bottom:20px;line-height:1.6}
.exit-popup .btn{width:100%;justify-content:center}

/* ══════ ROI CALCULATOR ══════ */
.roi-calc{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:28px;max-width:600px;margin:24px auto 0}
.roi-row{margin-bottom:16px}
.roi-row label{display:flex;justify-content:space-between;font-size:13px;color:var(--t2);margin-bottom:6px}
.roi-row label span{font-family:'JetBrains Mono',monospace;color:var(--accent-l);font-weight:600}
.roi-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:6px;background:var(--bd);outline:none;transition:background .2s}
.roi-slider{touch-action:manipulation}
.roi-slider:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px;border-radius:6px}
.roi-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 2px 8px var(--ags)}
.roi-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
.roi-result{background:linear-gradient(135deg,var(--accent),var(--grn));border-radius:12px;padding:18px;text-align:center;color:#fff;margin-top:16px}
.roi-result .roi-big{font-size:32px;font-weight:800;letter-spacing:-1px;font-family:'JetBrains Mono',monospace}
.roi-result .roi-label{font-size:12px;opacity:.8;margin-top:4px}

/* ══════ CONTEXTUAL CTA ══════ */
.ctx-cta{margin-top:24px;padding:18px 24px;background:var(--ag);border:1px solid var(--bd);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .2s}
.ctx-cta:hover{background:var(--ags)}
.ctx-cta p{font-size:14px;color:var(--t1);font-weight:500}
.ctx-cta a{flex-shrink:0}

/* ══════ CONTENT-VISIBILITY ══════ */
#skills,#process,#exp,#testimonials,#cases,#demo,#pricing,#faq,#blog{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* ══════ GUARANTEE BADGES ══════ */
.guarantees{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.guar{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:100px;border:1px solid var(--bd);background:var(--card);font-size:12px;color:var(--t2);transition:border-color .2s,background .2s}
.guar:hover{border-color:var(--bdl);background:var(--card-h)}
.guar svg{width:14px;height:14px;color:var(--grn);flex-shrink:0}

/* ══════ ANCHOR PRICE ══════ */
.price-anchor{font-size:12px;color:var(--t3);text-decoration:line-through;margin-bottom:4px;font-family:'JetBrains Mono',monospace}

/* ══════ COMMAND PALETTE ══════ */
.cmd-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding-top:20vh}
.cmd-overlay.vis{display:flex}
.cmd-box{background:var(--card);border:1px solid var(--bd);border-radius:16px;width:90%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;animation:fu .2s ease-out}
.cmd-input{width:100%;padding:16px 20px;border:none;background:transparent;color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:15px;outline:none;border-bottom:1px solid var(--bd)}
.cmd-input:focus-visible{border-bottom-color:var(--accent-l)}
.cmd-input::placeholder{color:var(--t3)}
.cmd-results{max-height:300px;overflow-y:auto;padding:6px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:10px;cursor:pointer;transition:background .15s;color:var(--t2);font-size:14px}
.cmd-item:hover,.cmd-item.active{background:var(--ag);color:var(--t1)}
.cmd-item .cmd-ico{width:28px;height:28px;border-radius:8px;background:var(--ag);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.cmd-hint{text-align:center;padding:12px;font-size:11px;color:var(--t3)}
.cmd-hint kbd{background:var(--bg2);border:1px solid var(--bd);border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:11px}

/* ══════ PLATFORM TRUST BADGES ══════ */
.platform-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.pbadge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:var(--tbg);font-size:12px;color:var(--tc);font-family:'JetBrains Mono',monospace;font-weight:500;transition:background .2s}
.pbadge:hover{background:var(--ags)}

/* ══════ CTRL+K HINT IN NAV ══════ */
.cmd-trigger{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3);display:flex;align-items:center;gap:4px;cursor:pointer;padding:4px 8px;border:1px solid var(--bd);border-radius:6px;background:transparent;transition:border-color .2s}
.cmd-trigger:hover{border-color:var(--bdl)}
.cmd-trigger kbd{font-size:10px}

/* ══════ CHECKMARK ICON (deduped) ══════ */
.ck::before{content:'';display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;flex-shrink:0}

/* ══════ JOB ACHIEVEMENTS ══════ */
.ti-achievements{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ti-ach{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--grn);background:var(--gg);padding:3px 10px;border-radius:6px;font-weight:500}

/* ══════ EDUCATION ══════ */
.edu-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.edu-icon{width:32px;height:32px;border-radius:8px;background:var(--ag);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.edu-text{font-size:13px;color:var(--t1)}
.edu-sub{font-size:11px;color:var(--t3);margin-top:1px}

/* ══════ HEADLINE STRIP ══════ */
.headline-strip{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;animation:fu .5s ease-out .32s both}
.hl-item{display:flex;align-items:baseline;gap:6px}
.hl-num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;color:var(--accent-l);letter-spacing:-1px}
.hl-label{font-size:12px;color:var(--t3)}

/* ══════ TOUCH TARGETS ══════ */
@media(pointer:coarse){
    .etab{min-height:44px;min-width:44px}
    .nb{min-width:44px;min-height:44px}
    .sec-dot{width:12px;height:12px}
    .cf-btn{min-height:44px}
    .faq-q{min-height:48px}
    .tag{min-height:28px;padding:4px 10px}
    .price-cta{min-height:48px}
    .qf-submit,.msf-opt{min-height:48px}
}

/* ══════ HIGH CONTRAST ══════ */
@media(prefers-contrast:more){
    :root{--t2:#b0b0c8;--t3:#9090a8;--bd:#303048;--bdl:#404060}
}
@media(forced-colors:active){
    .btn,.price-cta,.qf-submit,.book-call{border:2px solid ButtonText}
    .tag,.case-result,.ti-ach,.pbadge,.guar{border:1px solid ButtonText}
    .skill-bar-fill{forced-color-adjust:none}
}

/* ══════ REDUCED MOTION ══════ */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
    .rv{opacity:1;transform:none!important;transition:opacity .2s!important}
    #preloader{display:none}
    .trust-track{animation:none!important}
    .hero-avatar svg animate{display:none}
    .wa-msg{animation:none!important;opacity:1!important;transform:none!important}
    .float-tg-btn .pulse-ring{display:none}
    .skill-bar-fill{transition:none!important;width:var(--fill)!important}
}

/* ══════ PRINT ══════ */
@media print{
    nav,.btt,.spb,#shbg,.cg,body::after,.confetti,#preloader,#scFrame,.skip,.toast,.float-tg,.sticky-cta,.trust-bar,.blog-cta,.hero-avatar,.book-call,.cmd-overlay,.sp-toast,.exit-overlay,.cmd-trigger{display:none!important}
    body{background:#fff;color:#000;font-size:11pt}
    .w{max-width:100%;padding:0 15mm}
    section{padding:12px 0;page-break-inside:avoid}
    .hero{min-height:auto;padding-top:20px}
    .hero-inner{display:block}
    .ht{font-size:28pt;letter-spacing:-1px}.ht .gr{-webkit-text-fill-color:#333;color:#333;background:none}
    .htyp{display:none}.hbadge{display:none}
    .ha{display:none}
    .hs{margin-top:12px;padding-top:8px;border-top:1px solid #ddd;gap:24px}
    .hsn{font-size:22pt}.hsn .p{color:#333}
    .sc,.cc,.cl,.csid,.metric-card,.pstep,.tcard,.price-card,.faq-item{border:1px solid #ddd;box-shadow:none;break-inside:avoid}
    .tag{border:1px solid #ccc;background:#f5f5f5;color:#333}
    .case-result{background:#e8fdf5;border:1px solid #ccc;color:#059669}
    .estimate-cta{background:#f0f0ff;border:1px solid #ddd}
    .estimate-cta a{background:#4f46e5;color:#fff}
    a{color:#333;text-decoration:none}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666;word-break:break-all}
    a[href^="tel"]::after,a[href^="mailto"]::after,a[href^="#"]::after,a[download]::after{content:none}
    .sg,.cg2,.metrics,.pricing-grid,.process-grid,.testimonials-grid{gap:8px}
    .sg{grid-template-columns:repeat(2,1fr)}
    .cg2{grid-template-columns:1fr}
    .sh{margin-bottom:16px}
    .stl{font-size:18pt}
    .rv{opacity:1;transform:none}
    .faq-a{max-height:none!important}
    footer::after{content:'pavelte382@gmail.com | +7 (707) 244-87-45 | t.me/xCYRAXx1';display:block;font-size:10pt;color:#666;margin-top:8px;text-align:center}
}

/* ══════ MOBILE ══════ */
@media(max-width:768px){
    .etabs{display:none;position:absolute;top:60px;left:12px;right:12px;flex-direction:column;padding:6px;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:101;gap:2px}
    .etabs.open{display:flex;animation:menuSlide .25s ease-out}
    @keyframes menuSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
    .etab{height:42px;justify-content:flex-start;padding:0 14px;gap:10px;border-radius:10px}
    .etab-t{max-width:none!important;opacity:1!important}
    .etab[aria-selected="true"]{gap:10px;padding:0 14px}
    .etab-sep{width:auto;height:1px;margin:2px 6px}
    .ham{display:block}
    .atime{display:none}
    .ht{letter-spacing:-2px}
    .hs{gap:20px;flex-wrap:wrap}
    .sg{grid-template-columns:1fr}
    .cg2{grid-template-columns:1fr}
    .process-grid{grid-template-columns:repeat(2,1fr)}
    .pricing-grid{grid-template-columns:1fr}
    .testimonials-grid{grid-template-columns:1fr}
    .hero-inner{flex-direction:column-reverse;gap:24px;text-align:center}
    .hero-avatar{width:140px;height:140px;font-size:56px;border-radius:22px}
    .ha{align-items:center}
    .cog{grid-template-columns:1fr}
    .ha{flex-direction:column}.btn{justify-content:center}
    .cg{display:none}
    body::after{display:none}
    .nb[data-tip]:hover::after{display:none}
}
@media(max-width:480px){
    .w{padding:0 16px}
    .hs{gap:16px}.hsn{font-size:26px}
    .cc{padding:20px}
    .nr{gap:4px}
    .nb{width:32px;height:32px}
    .nb svg{width:14px;height:14px}
    .process-grid{grid-template-columns:1fr}
    .sticky-cta{display:block;padding-bottom:max(12px, env(safe-area-inset-bottom))}
    .float-tg{bottom:80px}
    .process-grid::before{display:none}
}