/* ═══════════════════════════════════════════════════════════
   SITIO — Design System v3 ULTIMATE
   Dark Navy × Gold × Revolutionary
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Core Colors */
  --bg:#04060d;--bg2:#060810;--bg3:#0a0e1a;--bg4:#0d1220;--bg5:#101828;--bg6:#141e2e;
  /* Gold */
  --y:#F5C200;--y2:#FFD740;--y3:#FFEB80;--yd:rgba(245,194,0,.10);--yl:rgba(245,194,0,.04);
  /* Lines */
  --ln:rgba(255,255,255,.07);--ln2:rgba(245,194,0,.20);--ln3:rgba(245,194,0,.08);
  /* Text */
  --t:#dde8f8;--t2:#a8c5d9;--t3:#7aa1d4;--t4:#5a8ac4;
  /* Accent Colors */
  --green:#00e888;--blue:#4d9fff;--purple:#9b5fff;--teal:#00d4e8;--red:#ff4466;--orange:#FF8C42;
  /* Dim overlays */
  --gdim:rgba(0,232,136,.10);--bdim:rgba(77,159,255,.10);--pdim:rgba(155,95,255,.10);--tdim:rgba(0,212,232,.10);
  /* Radius */
  --r:10px;--r2:16px;--r3:24px;
  /* Easing */
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.22,1,.36,1);
  /* Layout */
  --w:1180px;--ph:clamp(16px,4vw,60px);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--t);font-family:"Outfit",sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;cursor:none}
a{text-decoration:none;color:inherit;transition:color .25s}
button{cursor:none;border:none;background:none;font-family:inherit}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
select,input,textarea{font-family:inherit;font-size:14px;outline:none;background:var(--bg4);border:1px solid var(--ln);border-radius:var(--r);padding:12px 14px;color:var(--t);width:100%;transition:border-color .25s,box-shadow .25s}
select:focus,input:focus,textarea:focus{border-color:var(--y);box-shadow:0 0 0 3px rgba(245,194,0,.12)}
textarea{resize:vertical;min-height:100px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' stroke='%238faac4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* ─── PAGE TRANSITION OVERLAY ─── */
#page-transition{position:fixed;inset:0;background:var(--bg);z-index:9999;transform:translateY(100%);pointer-events:none}
#page-transition.entering{animation:ptEnter .5s var(--ease2) forwards}
#page-transition.leaving{animation:ptLeave .5s var(--ease2) forwards}
@keyframes ptEnter{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes ptLeave{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
#pt-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Syne",sans-serif;font-size:32px;font-weight:900;letter-spacing:-.05em;color:var(--y);opacity:0;transition:opacity .3s}
#page-transition.entering #pt-logo{opacity:1}

/* ─── BACKGROUND LAYERS ─── */
#particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 20% 50%,rgba(245,194,0,.04) 0%,transparent 60%),
             radial-gradient(ellipse 50% 70% at 80% 20%,rgba(77,159,255,.03) 0%,transparent 60%),
             radial-gradient(ellipse 40% 40% at 60% 85%,rgba(155,95,255,.02) 0%,transparent 50%)}
.noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg 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)'/%3E%3C/svg%3E");
  background-size:180px}
.page-content{position:relative;z-index:1}

/* ─── CUSTOM CURSOR ─── */
#cur{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--y);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .1s,width .3s,height .3s,opacity .3s;mix-blend-mode:difference}
#cur2{position:fixed;width:36px;height:36px;border-radius:50%;border:1px solid rgba(245,194,0,.4);pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:transform .25s var(--ease),width .3s,height .3s,opacity .3s;mix-blend-mode:difference}
body:hover #cur{opacity:1}
a:hover~#cur,button:hover~#cur{transform:translate(-50%,-50%) scale(2.5)}

/* ─── SCROLL PROGRESS ─── */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--y),var(--y2));z-index:1001;width:0;transition:width .1s linear;pointer-events:none}

/* ─── NAV ─── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;padding:0 var(--ph);height:70px;
  background:rgba(4,6,13,.85);backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.06);transition:all .35s}
#nav.scrolled{height:60px;background:rgba(4,6,13,.95)}
.nlogo{font-family:"Syne",sans-serif;font-size:22px;font-weight:900;letter-spacing:-.05em;color:var(--t);display:flex;align-items:center;gap:4px;flex-shrink:0;transition:color .2s}
.nlogo:hover{color:var(--y)}
.ndot{width:7px;height:7px;border-radius:50%;background:var(--y);animation:dpulse 2s ease-in-out infinite;margin-left:2px}
@keyframes dpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.7)}}
.nlinks{display:flex;align-items:center;gap:28px;margin:0 auto;padding:0 32px}
.nlinks a{font-family:"Syne",sans-serif;font-size:13px;font-weight:600;color:var(--t2);letter-spacing:.01em;transition:color .2s;position:relative}
.nlinks a::after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--y);transition:width .3s var(--ease)}
.nlinks a:hover,.nlinks a.active{color:var(--y)}
.nlinks a:hover::after,.nlinks a.active::after{width:100%}
.nbtns{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:10px;font-family:"Syne",sans-serif;font-size:13.5px;font-weight:700;transition:all .25s;letter-spacing:.01em;cursor:none;border:none;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.06);opacity:0;transition:opacity .2s}
.btn:hover::before{opacity:1}
.btn-y{background:var(--y);color:#000;box-shadow:0 4px 20px rgba(245,194,0,.2)}
.btn-y:hover{background:var(--y2);transform:translateY(-1px);box-shadow:0 8px 28px rgba(245,194,0,.35)}
.btn-g{background:rgba(255,255,255,.07);color:var(--t2);border:1px solid var(--ln)}
.btn-g:hover{border-color:rgba(245,194,0,.3);color:var(--y);background:var(--yd)}
.btn-outline{background:transparent;border:1.5px solid var(--ln);color:var(--t2)}
.btn-outline:hover{border-color:var(--ln2);color:var(--y);background:var(--yd)}
.btn-lg{padding:14px 28px;font-size:14.5px;border-radius:12px}
.btn-xl{padding:16px 36px;font-size:15.5px;border-radius:14px}
.btn-dark{background:var(--bg3);border:1px solid var(--ln);color:var(--t)}
.btn-dark:hover{border-color:var(--ln2);color:var(--y)}

/* ─── MOBILE MENU ─── */
.ham{display:none;flex-direction:column;gap:5px;padding:8px;cursor:none;z-index:1001;position:relative}
.ham span{width:22px;height:2px;background:var(--t);border-radius:2px;transition:all .35s var(--ease);display:block}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(4,6,13,.98);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:28px;backdrop-filter:blur(20px)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:"Syne",sans-serif;font-size:26px;font-weight:800;color:var(--t2);transition:color .2s}
.mobile-menu a:hover{color:var(--y)}

/* ─── SCROLL ANIMATIONS ─── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .75s var(--ease2),transform .75s var(--ease2)}
.rv.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.12s}.d2{transition-delay:.22s}.d3{transition-delay:.32s}.d4{transition-delay:.42s}

/* ─── TICKER ─── */
@keyframes ticker-run{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker{background:linear-gradient(90deg,var(--bg2),var(--bg3));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:16px 0;overflow:hidden;position:relative;z-index:1}
.ticker-track{display:flex;gap:36px;animation:ticker-run 28s linear infinite;width:max-content;align-items:center}
.ticker:hover .ticker-track{animation-play-state:paused}
.ti{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);white-space:nowrap;display:flex;align-items:center;gap:7px}
.ti span{font-size:14px}
.tidot{width:4px;height:4px;border-radius:50%;background:var(--y);opacity:.4;flex-shrink:0}

/* ─── SOCIAL ICONS ─── */
.social-icon svg{width:18px;height:18px;fill:currentColor;transition:transform .25s}
.social-icon:hover svg{transform:scale(1.15)}
.si-ig:hover{color:#E1306C}
.si-fb:hover{color:#1877F2}
.si-tt:hover{color:#fff}
.si-li:hover{color:#0A66C2}
.si-wa:hover{color:#25D366}
.si-yt:hover{color:#FF0000}

/* ─── SECTIONS ─── */
.sec{padding:110px var(--ph);position:relative;z-index:1;max-width:calc(var(--w) + var(--ph)*2);margin:0 auto}
.page-hero{padding:160px var(--ph) 60px;max-width:var(--w);margin:0 auto;position:relative;z-index:1}

/* Labels */
.lbl{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--y);margin-bottom:14px}
.lbl::before{content:"";width:24px;height:1.5px;background:var(--y)}

/* Headings */
.sh{font-family:"DM Serif Display",serif;font-size:clamp(42px,5vw,72px);letter-spacing:-2.5px;line-height:.98;margin-bottom:18px}
.sh em{font-style:italic;color:var(--y)}
.sp{font-size:clamp(15px,1.4vw,18px);color:var(--t2);line-height:1.72;max-width:580px}

/* ─── GRID SYSTEM ─── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ─── CARDS ─── */
.card{background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);transition:all .35s var(--ease);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c,var(--y)),transparent);transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease2)}
.card:hover{border-color:var(--ln2);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card:hover::before{transform:scaleX(1)}

/* ─── 3D CARD EFFECT ─── */
.card-3d{transform-style:preserve-3d;transition:transform .4s var(--ease)}
.card-3d:hover{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg) translateY(-5px)}

/* ─── BADGE ─── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.badge-y{background:var(--yd);color:var(--y);border:1px solid rgba(245,194,0,.2)}
.badge-g{background:var(--gdim);color:var(--green);border:1px solid rgba(0,232,136,.2)}
.badge-b{background:var(--bdim);color:var(--blue);border:1px solid rgba(77,159,255,.2)}

/* ─── PROGRESS BARS ─── */
.p-bar{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.p-bar-row{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--t2)}
.p-bar-row span:last-child{color:var(--y);font-weight:600}
.p-track{height:5px;background:var(--bg5);border-radius:3px;overflow:hidden}
.p-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--y),var(--y2));transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease2)}
.p-fill.vis{transform:scaleX(1)}

/* ─── NUMBERS BAND ─── */
.nums-band{background:var(--bg2);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:80px var(--ph);position:relative;z-index:1}
.ni{flex:1;padding:0 36px;border-right:1px solid var(--ln);position:relative}
.ni:first-child{padding-left:0}.ni:last-child{border:none}
.ni-val{font-family:"DM Serif Display",serif;font-size:clamp(52px,5vw,72px);letter-spacing:-3px;line-height:1;display:flex;align-items:baseline;gap:4px}
.ni-sup{font-family:"Syne",sans-serif;font-size:24px;font-weight:800;color:var(--y);margin-left:4px}
.ni-lbl{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.12em;margin-top:8px}

/* ─── PORTFOLIO GRID — FIXED ─── */
.pf-grid-full{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.pi{position:relative;overflow:hidden;cursor:pointer;background:var(--bg4)}
.pi.wide{grid-column:span 2}
.pi img{width:100%;height:280px;object-fit:cover;object-position:center;transition:transform .7s var(--ease),filter .4s;filter:brightness(.75) saturate(.8);display:block}
.pi.wide img{height:280px}
.pi:hover img{transform:scale(1.07);filter:brightness(.55) saturate(1.1)}
.pi-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;opacity:0;transition:opacity .35s}
.pi.wide .pi-ov,.pi:hover .pi-ov{opacity:1}
.pi-tag{font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:6px}
.pi-title{font-family:"DM Serif Display",serif;font-size:20px;letter-spacing:-.5px;margin-bottom:2px}
.pi-sub{font-size:12px;color:rgba(255,255,255,.6)}
.pi-badge{position:absolute;top:12px;right:12px;background:var(--y);color:#000;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;padding:3px 9px;border-radius:6px;opacity:0;transform:translateY(-6px);transition:all .3s}
.pi:hover .pi-badge{opacity:1;transform:translateY(0)}

/* Portfolio filters */
.pf-filter{font-family:"JetBrains Mono",monospace;font-size:10px;padding:6px 14px;border-radius:99px;border:1px solid var(--ln);color:var(--t3);background:transparent;cursor:none;transition:all .25s}
.pf-filter.on,.pf-filter:hover{border-color:var(--y);color:var(--y);background:var(--yd)}
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ─── PORTFOLIO MASONRY (homepage) ─── */
.pf-masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:48px}
.pm-item{position:relative;overflow:hidden;background:var(--bg4)}
.pm-item:first-child{grid-column:span 2}
.pm-item img{width:100%;height:240px;object-fit:cover;object-position:center;transition:transform .7s var(--ease),filter .4s;filter:brightness(.8) saturate(.8);display:block}
.pm-item:first-child img{height:240px}
.pm-item:hover img{transform:scale(1.07);filter:brightness(.55) saturate(1.1)}
.pm-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;opacity:0;transition:opacity .35s}
.pm-item:first-child .pm-overlay,.pm-item:hover .pm-overlay{opacity:1}
.pm-cat{font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:5px}
.pm-name{font-family:"DM Serif Display",serif;font-size:20px;letter-spacing:-.5px}
.pm-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:3px}
.pm-badge{position:absolute;top:12px;right:12px;background:var(--y);color:#000;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;padding:3px 9px;border-radius:6px;opacity:0;transform:translateY(-6px);transition:all .3s}
.pm-item:hover .pm-badge{opacity:1;transform:translateY(0)}

/* ─── SERVICE CARDS ─── */
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.srv-card{background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);padding:28px;transition:all .35s var(--ease);position:relative;overflow:hidden;cursor:none}
.srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--y));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease2)}
.srv-card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,194,0,.05),transparent);opacity:0;transition:opacity .3s}
.srv-card:hover{border-color:rgba(245,194,0,.25);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.srv-card:hover::before{transform:scaleX(1)}
.srv-card:hover::after{opacity:1}
.srv-ico{font-size:32px;margin-bottom:16px;display:block;transition:transform .35s var(--ease)}
.srv-card:hover .srv-ico{transform:scale(1.2) rotate(-8deg)}
.srv-name{font-family:"Syne",sans-serif;font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px;position:relative;z-index:1}
.srv-desc{font-size:13.5px;color:var(--t2);line-height:1.65;margin-bottom:14px;position:relative;z-index:1}
.srv-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;position:relative;z-index:1}
.srv-tag{font-family:"JetBrains Mono",monospace;font-size:9px;padding:2px 8px;border-radius:5px;background:var(--bg5);color:var(--t3);border:1px solid var(--ln)}
.srv-price{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--y);padding-top:14px;border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}

/* ─── SERVICES MEGA GRID ─── */
.srv-mega{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:var(--r2);overflow:hidden;margin-top:52px}
.sm-card{background:var(--bg2);padding:32px;transition:all .3s;position:relative;overflow:hidden;cursor:none}
.sm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,194,0,.05),transparent);opacity:0;transition:opacity .3s}
.sm-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c,var(--y));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease2)}
.sm-card:hover{background:var(--bg3)}.sm-card:hover::before{opacity:1}.sm-card:hover::after{transform:scaleX(1)}
.sm-ico{font-size:32px;margin-bottom:16px;display:block;transition:transform .3s}
.sm-card:hover .sm-ico{transform:scale(1.15) rotate(-5deg)}
.sm-name{font-family:"Syne",sans-serif;font-size:17px;font-weight:800;margin-bottom:8px}
.sm-desc{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:16px}
.sm-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.sm-tag{font-family:"JetBrains Mono",monospace;font-size:9px;padding:2px 8px;border-radius:5px;background:var(--bg4);color:var(--t3);border:1px solid var(--ln)}
.sm-price{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--y);padding-top:14px;border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center}
.sm-arrow{opacity:0;transition:opacity .25s;font-size:16px;color:var(--y)}
.sm-card:hover .sm-arrow{opacity:1}

/* ─── STEPS ─── */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:22px;padding:28px 0;border-bottom:1px solid var(--ln);transition:all .3s}
.step:last-child{border:none}
.step:hover .sico{background:var(--y);border-color:var(--y);color:var(--bg)}
.snum{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;color:var(--t3);min-width:20px;padding-top:4px;flex-shrink:0}
.sico{width:46px;height:46px;border-radius:13px;border:1px solid var(--ln);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all .3s}
.sbody{flex:1}
.sbody h4{font-family:"Syne",sans-serif;font-size:15px;font-weight:700;margin-bottom:6px}
.sbody p{font-size:13.5px;color:var(--t2);line-height:1.65}
.sdur{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--y);font-weight:600;white-space:nowrap;padding-top:4px;flex-shrink:0}

/* ─── PRICING ─── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);padding:32px;position:relative;overflow:hidden;transition:all .35s}
.plan:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.plan.featured{border-color:rgba(245,194,0,.3);background:linear-gradient(145deg,rgba(245,194,0,.06),var(--bg3))}
.plan.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--y),transparent)}
.plan-badge{position:absolute;top:16px;right:16px;background:var(--y);color:#000;font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700}
.plan-tag{font-family:"JetBrains Mono",monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:8px;display:block}
.plan-name{font-family:"Syne",sans-serif;font-size:22px;font-weight:800;margin-bottom:6px}
.plan-desc{font-size:13.5px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.plan-price{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--ln)}
.plan-price-num{font-family:"DM Serif Display",serif;font-size:42px;letter-spacing:-2px;color:var(--y)}
.plan-price-unit{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--t3);margin-left:4px}
.plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.plan-feat{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--t2)}
.plan-feat-check{width:18px;height:18px;border-radius:5px;background:var(--gdim);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.plan-feat-check.x{background:var(--bg4);color:var(--t3)}
.plan-cta{display:block;text-align:center;padding:13px;border-radius:10px;font-family:"Syne",sans-serif;font-size:13.5px;font-weight:700;transition:all .25s;cursor:none}
.plan-cta.gold{background:var(--y);color:#000}.plan-cta.gold:hover{background:var(--y2)}
.plan-cta.outline{border:1.5px solid var(--ln);color:var(--t2)}.plan-cta.outline:hover{border-color:var(--ln2);color:var(--y);background:var(--yd)}

/* ─── TESTIMONIALS ─── */
.ttrack{display:flex;gap:20px;transition:transform .6s var(--ease2)}
.tc{min-width:calc((100% - 40px)/3);background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);padding:28px;flex-shrink:0}
.tq{font-size:15px;line-height:1.74;color:var(--t2);margin-bottom:22px;font-style:italic;position:relative}
.tq::before{content:"\201C";position:absolute;top:-12px;left:-8px;font-family:"DM Serif Display",serif;font-size:48px;color:rgba(245,194,0,.18);line-height:1}
.ta{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.taav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"DM Serif Display",serif;font-size:16px;font-weight:700;flex-shrink:0}
.tainfo{display:flex;flex-direction:column;gap:2px}
.tainfo strong{font-family:"Syne",sans-serif;font-size:14px;font-weight:700}
.tainfo span{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--t3)}
.tstars{color:var(--y);font-size:13px;letter-spacing:2px}
.testi-note{font-family:"JetBrains Mono",monospace;font-size:8.5px;color:var(--t4);margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.04)}
.tctl{width:38px;height:38px;border-radius:10px;border:1px solid var(--ln);background:var(--bg3);color:var(--t);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:none;transition:all .25s}
.tctl:hover{border-color:var(--ln2);color:var(--y);background:var(--yd)}

/* ─── FAQ ─── */
.faq-item{border-bottom:1px solid var(--ln)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:none;font-family:"Syne",sans-serif;font-size:15.5px;font-weight:700;transition:color .25s}
.faq-q:hover{color:var(--y)}
.faq-icon{width:28px;height:28px;border-radius:8px;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;flex-shrink:0;transition:all .3s;color:var(--t3)}
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--y);color:var(--y);background:var(--yd)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease2),padding .3s}
.faq-item.open .faq-a{max-height:300px;padding-bottom:20px}
.faq-a p{font-size:14.5px;color:var(--t2);line-height:1.72}

/* ─── BLOG ─── */
.bc{background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);overflow:hidden;transition:all .35s;display:flex;flex-direction:column}
.bc:hover{border-color:var(--ln2);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.bc-img{overflow:hidden;display:flex;align-items:center;justify-content:center;height:160px;background:var(--bg4);flex-shrink:0}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease),filter .4s;filter:brightness(.8)}
.bc:hover .bc-img img{transform:scale(1.07);filter:brightness(1)}
.bc-body{padding:22px;display:flex;flex-direction:column;flex:1}
.bc-body h3{font-family:"DM Serif Display",serif;font-size:19px;letter-spacing:-.4px;margin-bottom:8px;line-height:1.3}
.bc-body p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:14px;flex:1}
.bc-cat{font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:8px}
.bc-foot{display:flex;align-items:center;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--t3);margin-top:auto;padding-top:14px;border-top:1px solid var(--ln)}
.bc-foot a{color:var(--y);font-size:11px;transition:opacity .2s}
.bc-foot a:hover{opacity:.7}
.blog-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.blog-main .bc-img{height:220px}
.blog-main .bc-body h3{font-size:22px}

/* ─── TEAM ─── */
.team-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.tv-card{background:var(--bg3);position:relative;overflow:hidden;transition:all .35s}
.tv-card:hover{z-index:2;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.tv-img{height:280px;background:var(--bg4);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tv-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s,filter .4s;filter:grayscale(30%) brightness(.8)}
.tv-card:hover .tv-img img{transform:scale(1.06);filter:grayscale(0%) brightness(1)}
.tv-ph{font-family:"DM Serif Display",serif;font-size:80px;opacity:.15;color:var(--y)}
.tv-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.95),transparent 70%);padding:22px;transform:translateY(12px);transition:transform .35s}
.tv-card:hover .tv-overlay{transform:translateY(0)}
.tv-role{font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:4px}
.tv-name{font-family:"Syne",sans-serif;font-size:17px;font-weight:800;margin-bottom:6px}
.tv-bio{font-size:11.5px;color:var(--t2);line-height:1.55;max-height:0;overflow:hidden;transition:max-height .35s var(--ease2)}
.tv-card:hover .tv-bio{max-height:80px}
.tv-skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;max-height:0;overflow:hidden;transition:max-height .35s var(--ease2)}
.tv-card:hover .tv-skills{max-height:60px}

/* ─── CASE STUDIES ─── */
.case-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs{background:var(--bg3);border:1px solid var(--ln);border-radius:var(--r2);overflow:hidden;transition:all .35s;position:relative}
.cs:hover{border-color:var(--ln2);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.cs-header{padding:22px 22px 16px;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:12px}
.cs-logo{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:"DM Serif Display",serif;font-weight:700;font-size:14px;flex-shrink:0}
.cs-name{font-family:"Syne",sans-serif;font-size:14px;font-weight:700;margin-bottom:2px}
.cs-type{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr)}
.cm{padding:16px;border-right:1px solid var(--ln);text-align:center}
.cm:last-child{border:none}
.cm-val{font-family:"DM Serif Display",serif;font-size:26px;letter-spacing:-1.5px;color:var(--y);line-height:1;margin-bottom:4px}
.cm-lbl{font-family:"JetBrains Mono",monospace;font-size:8px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.cs-tag{position:absolute;top:14px;right:14px;font-family:"JetBrains Mono",monospace;font-size:8.5px;padding:3px 9px;border-radius:99px;font-weight:700}

/* ─── FORM ─── */
.fg{margin-bottom:14px}
.fg label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--t2);margin-bottom:6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ─── CTA BLOCK ─── */
.cta-block{background:linear-gradient(135deg,rgba(245,194,0,.06),rgba(245,194,0,.02));border-top:1px solid rgba(245,194,0,.12);border-bottom:1px solid rgba(245,194,0,.12);padding:110px var(--ph);position:relative;z-index:1;overflow:hidden}
.cta-block::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(245,194,0,.07),transparent 70%);pointer-events:none}
.cta-inner{max-width:680px;margin:0 auto;text-align:center;position:relative}
.cta-acts{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.cta-trust{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--t3)}
.ct{display:flex;align-items:center;gap:6px}
.ct-tick{color:var(--y)}

/* ─── FOOTER ─── */
footer{background:var(--bg2);border-top:1px solid var(--ln);padding:80px var(--ph) 32px;position:relative;z-index:1}
.foot-grid{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.foot-brand p{font-size:13.5px;color:var(--t2);line-height:1.7;margin:14px 0 20px}
.flogo{font-family:"Syne",sans-serif;font-size:24px;font-weight:900;letter-spacing:-.05em;color:var(--t);display:flex;align-items:center;gap:4px;transition:color .2s}
.flogo:hover{color:var(--y)}
.fsocials{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fsoc{width:36px;height:36px;border-radius:10px;border:1px solid var(--ln);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .25s;flex-shrink:0}
.fsoc:hover{border-color:var(--ln2);color:var(--y);transform:translateY(-2px)}
.fsoc svg{width:16px;height:16px;fill:currentColor}
.fcol h4{font-family:"Syne",sans-serif;font-size:13px;font-weight:700;color:var(--t);margin-bottom:16px}
.fcol ul{display:flex;flex-direction:column;gap:10px}
.fcol ul li a{font-size:13px;color:var(--t2);transition:color .2s}
.fcol ul li a:hover{color:var(--y)}
.foot-bottom{max-width:var(--w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--ln);font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--t3)}
.foot-bottom a{transition:color .2s}
.foot-bottom a:hover{color:var(--y)}

/* ─── WHATSAPP FLOAT ─── */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:200}
.wa-btn{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.35);transition:all .3s;border:none;cursor:none;position:relative}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,211,102,.5)}
.wa-badge{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--bg);animation:dpulse 2s ease-in-out infinite}

/* ─── SKILL TAGS ─── */
.skill-tag{font-family:"JetBrains Mono",monospace;font-size:9px;padding:2px 8px;border-radius:5px;background:var(--bg5);color:var(--t3);border:1px solid var(--ln)}

/* ─── MISC ─── */
.ttest-wrap{position:relative;overflow:hidden}
.job-type.alt{background:var(--bdim);color:#4d9fff;border:1px solid rgba(77,159,255,.2);font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700;display:inline-block;margin-bottom:12px}
.job-type.stage{background:var(--pdim);color:#9b5fff;border:1px solid rgba(155,95,255,.2);font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700;display:inline-block;margin-bottom:12px}
.job-type.com{background:var(--gdim);color:var(--green);border:1px solid rgba(0,232,136,.2);font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700;display:inline-block;margin-bottom:12px}
.job-type.cdi{background:var(--yd);color:var(--y);border:1px solid rgba(245,194,0,.2);font-family:"JetBrains Mono",monospace;font-size:9px;padding:3px 10px;border-radius:99px;font-weight:700;display:inline-block;margin-bottom:12px}

/* ─── CHATBOT ─── */
#chatbot-btn{position:fixed;bottom:88px;right:24px;z-index:200;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--y),#FF8C00);color:#000;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(245,194,0,.35);border:none;cursor:none;transition:all .3s}
#chatbot-btn:hover{transform:scale(1.1)}
#chatbot-btn .cb-notif{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--bg)}
#chatbot-win{position:fixed;bottom:152px;right:24px;width:340px;height:480px;background:var(--bg3);border:1px solid var(--ln2);border-radius:20px;overflow:hidden;z-index:200;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.7);transform:scale(.9) translateY(20px);opacity:0;transition:all .35s var(--ease2);pointer-events:none}
#chatbot-win.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.cb-head{padding:16px 18px;background:linear-gradient(135deg,rgba(245,194,0,.12),rgba(245,194,0,.04));border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:10px;flex-shrink:0}
.cb-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--y),#FF8C00);color:#000;font-family:"DM Serif Display",serif;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cb-name{font-family:"Syne",sans-serif;font-size:13px;font-weight:700}
.cb-status{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--green);display:flex;align-items:center;gap:4px}
.cb-status::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.cb-close{margin-left:auto;color:var(--t3);font-size:18px;cursor:none;transition:color .2s;background:none;border:none}
.cb-close:hover{color:var(--y)}
.cb-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--t3) transparent}
.cb-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;animation:msgIn .3s var(--ease2)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cb-msg.bot{background:var(--bg4);border:1px solid var(--ln);color:var(--t2);align-self:flex-start;border-radius:4px 12px 12px 12px}
.cb-msg.user{background:linear-gradient(135deg,var(--y),#FF8C00);color:#000;font-weight:600;align-self:flex-end;border-radius:12px 4px 12px 12px}
.cb-typing{display:flex;gap:4px;padding:10px 14px;background:var(--bg4);border:1px solid var(--ln);border-radius:4px 12px 12px 12px;align-self:flex-start;width:56px}
.cb-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:cbdot 1.2s ease-in-out infinite}
.cb-dot:nth-child(2){animation-delay:.2s}
.cb-dot:nth-child(3){animation-delay:.4s}
@keyframes cbdot{0%,80%,100%{transform:scale(0.6);opacity:.4}40%{transform:scale(1);opacity:1}}
.cb-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex-shrink:0}
.cb-chip{font-family:"JetBrains Mono",monospace;font-size:10px;padding:5px 10px;border-radius:99px;border:1px solid var(--ln);color:var(--t3);background:var(--bg4);cursor:none;transition:all .2s;white-space:nowrap}
.cb-chip:hover{border-color:var(--y);color:var(--y);background:var(--yd)}
.cb-input-row{padding:12px;border-top:1px solid var(--ln);display:flex;gap:8px;flex-shrink:0}
.cb-input-row input{flex:1;padding:9px 13px;font-size:13px;border-radius:10px}
.cb-send{width:36px;height:36px;border-radius:10px;background:var(--y);color:#000;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:none;border:none;transition:all .2s}
.cb-send:hover{background:var(--y2);transform:scale(1.05)}

/* ─── GLITCH EFFECT ─── */
@keyframes glitch{0%{clip-path:inset(40% 0 61% 0);transform:translateX(-2px)}20%{clip-path:inset(92% 0 1% 0);transform:translateX(2px)}40%{clip-path:inset(43% 0 1% 0);transform:translateX(-2px)}60%{clip-path:inset(25% 0 58% 0);transform:translateX(0)}80%{clip-path:inset(54% 0 7% 0);transform:translateX(2px)}100%{clip-path:inset(58% 0 43% 0);transform:translateX(-2px)}}

/* ─── SKELETON LOADING ─── */
.skeleton{position:relative;overflow:hidden;background:var(--bg3);border-radius:var(--r)}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-text{height:14px;margin-bottom:8px;border-radius:4px}
.skeleton-text.w60{width:60%}
.skeleton-text.w80{width:80%}
.skeleton-img{width:100%;aspect-ratio:16/9}
img[loading="lazy"]{background:var(--bg3);transition:opacity .3s}

/* ─── FORM VALIDATION ─── */
.field-wrap{position:relative}
.field-wrap input:valid:not(:placeholder-shown){border-color:var(--green)}
.field-wrap input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--red)}
.field-error{color:#ff4466;font-size:11px;margin-top:4px;opacity:0;transition:opacity .2s}
.field-wrap.has-error .field-error{opacity:1}
.field-wrap input:focus~.field-line,.field-wrap textarea:focus~.field-line{width:100%}
.field-line{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--y);transition:width .4s var(--ease2)}

/* ─── SCROLL SNAP (Testimonials) ─── */
.ttrack{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.tc{scroll-snap-align:start;scroll-snap-stop:always}

/* ─── TOUCH TARGETS ─── */
.ham,.btn,.nlinks a,button[type="submit"],.cb-chip,.pill{min-height:44px;min-width:44px}

/* ─── ACCESSIBLE CURSOR ─── */
body{cursor:auto}
body.cursor-ready{cursor:none}
body.cursor-ready a,body.cursor-ready button{cursor:none}

/* ─── RESPONSIVE (7 breakpoints) ─── */
@media(max-width:1400px){
  .srv-mega{grid-template-columns:1fr 1fr 1fr}
  :root{--w:1080px}
}
@media(max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .pricing-grid,.case-row{grid-template-columns:1fr 1fr}
  .blog-row{grid-template-columns:1fr}
  .team-grid-v2{grid-template-columns:1fr 1fr}
  .srv-mega{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .mega-marquee-item{font-size:clamp(36px,5vw,64px)}
}
@media(max-width:1024px){
  .hero-inner{gap:32px}
  .hv-phone{max-width:280px}
}
@media(max-width:768px){
  .ham{display:flex}
  .nlinks,.nbtns{display:none}
  .f2{grid-template-columns:1fr}
  .g2,.g3,.srv-grid,.srv-mega,.pricing-grid,.case-row{grid-template-columns:1fr}
  .pf-grid-full,.pf-masonry{grid-template-columns:1fr}
  .pi.wide,.pm-item:first-child{grid-column:span 1}
  .team-grid-v2{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .blog-row{grid-template-columns:1fr}
  .ttrack .tc{min-width:100%}
  .mega-marquee-item{font-size:clamp(28px,8vw,48px);padding:0 20px}
  .blob{display:none}
  #cur,#cur2{display:none!important}
  body,body.cursor-ready{cursor:auto}
  button,a,.btn{cursor:pointer}
  /* Chatbot responsive */
  #chatbot-win{width:calc(100vw - 24px);right:12px;max-height:min(480px,calc(100vh - 160px))}
  /* Safe area for notched devices */
  body{padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:640px){
  .sh{font-size:clamp(38px,9vw,56px)}
  .hero-inner{padding-top:90px;padding-bottom:50px}
  .sec{padding:clamp(40px,8vw,80px) var(--ph)}
}
@media(max-width:480px){
  .team-grid-v2{grid-template-columns:1fr}
  .sh{font-size:clamp(32px,9vw,48px)}
  #chatbot-win{max-height:70vh;border-radius:16px}
  :root{--ph:clamp(12px,3vw,16px)}
}
@media(max-width:380px){
  .sh{font-size:28px}
  .hero-inner{gap:16px}
}

/* ─── CORE WEB VITALS — Performance ─── */
/* content-visibility: reduce layout work for off-screen sections */
#services,#portfolio,#process,#testimonials,#team,#blog{
  content-visibility:auto;
  contain-intrinsic-size:0 600px}
/* Reduce CLS: preserve aspect ratios for images */
.pm-item img,.tv-img img,.blog-img img{
  aspect-ratio:16/9;
  width:100%;
  height:auto}
.tv-img img{aspect-ratio:3/4}
/* Font display swap hint (already loaded via preconnect, reinforce) */
@font-face{font-display:swap}
/* Reduce paint on scroll: promote sticky nav to GPU layer */
#nav{transform:translateZ(0);will-change:background-color}
/* Smooth scrolling only when no reduced motion preference */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* ═══════════════════════════════════════════════════════════
   SITIO v5 — WORLD-CLASS EFFECTS
   Glass · Blobs · Text Reveal · Glow · Marquee · Parallax
   ═══════════════════════════════════════════════════════════ */

/* ─── LOADING SCREEN ─── */
#sitio-loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .6s,visibility .6s}
#sitio-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-family:"Syne",sans-serif;font-size:48px;font-weight:900;letter-spacing:-.06em;color:var(--t);opacity:0;transform:translateY(20px);animation:loaderIn .8s var(--ease2) .2s forwards}
.loader-logo span{color:var(--y)}
.loader-bar{width:120px;height:2px;background:var(--bg5);border-radius:2px;overflow:hidden;opacity:0;animation:loaderIn .5s var(--ease2) .5s forwards}
.loader-fill{width:0;height:100%;background:linear-gradient(90deg,var(--y),var(--y2));border-radius:2px;animation:loaderFill 1.2s var(--ease2) .6s forwards}
@keyframes loaderIn{to{opacity:1;transform:translateY(0)}}
@keyframes loaderFill{to{width:100%}}

/* ─── SMOOTH SCROLL BODY ─── */
html.smooth{overflow:hidden;height:100%}
html.smooth body{overflow:hidden;height:100%}
.smooth-wrapper{overflow:hidden;position:fixed;inset:0;height:100%}
.smooth-content{will-change:transform}

/* ─── TEXT SPLIT REVEAL ─── */
.split-word{display:inline-block;overflow:hidden;vertical-align:top}
.split-word .sw-inner{display:inline-block;transform:translateY(105%);transition:transform .7s var(--ease2);will-change:transform}
.split-word.vis .sw-inner{transform:translateY(0)}
/* Stagger delays for split words */
.split-word:nth-child(1) .sw-inner{transition-delay:0s}
.split-word:nth-child(2) .sw-inner{transition-delay:.04s}
.split-word:nth-child(3) .sw-inner{transition-delay:.08s}
.split-word:nth-child(4) .sw-inner{transition-delay:.12s}
.split-word:nth-child(5) .sw-inner{transition-delay:.16s}
.split-word:nth-child(6) .sw-inner{transition-delay:.2s}
.split-word:nth-child(7) .sw-inner{transition-delay:.24s}
.split-word:nth-child(8) .sw-inner{transition-delay:.28s}
.split-word:nth-child(9) .sw-inner{transition-delay:.32s}
.split-word:nth-child(10) .sw-inner{transition-delay:.36s}
.split-word:nth-child(n+11) .sw-inner{transition-delay:.4s}

/* ─── IMAGE REVEAL ─── */
.img-reveal{position:relative;overflow:hidden}
.img-reveal::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:left;transition:transform .9s var(--ease2)}
.img-reveal.vis::after{transform:scaleX(0)}
.img-reveal img{transform:scale(1.2);transition:transform 1.2s var(--ease2)}
.img-reveal.vis img{transform:scale(1)}

/* ─── GLASS MORPHISM ─── */
.glass{background:rgba(10,14,26,.6);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.08)}
.glass-y{background:rgba(245,194,0,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(245,194,0,.15)}

/* ─── ORGANIC BLOB ─── */
.blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.5;animation:blobFloat 12s ease-in-out infinite}
.blob-y{background:rgba(245,194,0,.08);width:400px;height:400px}
.blob-b{background:rgba(77,159,255,.06);width:350px;height:350px;animation-delay:-4s}
.blob-p{background:rgba(155,95,255,.05);width:300px;height:300px;animation-delay:-8s}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}25%{transform:translate(30px,-40px) scale(1.1) rotate(90deg)}50%{transform:translate(-20px,30px) scale(.95) rotate(180deg)}75%{transform:translate(40px,20px) scale(1.05) rotate(270deg)}}

/* ─── GLOW SPOTLIGHT ─── */
.glow-card{position:relative;overflow:hidden}
.glow-card::before{content:"";position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(245,194,0,.12),transparent 70%);border-radius:50%;transform:translate(var(--gx,-50%),var(--gy,-50%));pointer-events:none;transition:opacity .3s;opacity:0;z-index:0}
.glow-card:hover::before{opacity:1}
.glow-card>*{position:relative;z-index:1}

/* ─── MEGA MARQUEE ─── */
.mega-marquee{overflow:hidden;white-space:nowrap;padding:40px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);position:relative;z-index:1}
.mega-marquee-track{display:flex;animation:marqueeScroll 25s linear infinite;width:max-content}
.mega-marquee:hover .mega-marquee-track{animation-play-state:paused}
.mega-marquee-item{font-family:"Syne",sans-serif;font-size:clamp(48px,7vw,96px);font-weight:900;letter-spacing:-.04em;padding:0 40px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);transition:all .4s}
.mega-marquee-item:hover{color:var(--y);-webkit-text-stroke-color:var(--y)}
.mega-marquee-sep{font-size:clamp(32px,5vw,64px);color:var(--y);opacity:.3;padding:0 20px;align-self:center}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── HORIZONTAL SCROLL SECTION ─── */
.hscroll-section{overflow:hidden;position:relative}
.hscroll-track{display:flex;gap:24px;will-change:transform}
.hscroll-card{min-width:clamp(280px,30vw,400px);flex-shrink:0}

/* ─── AURORA GRADIENT BACKGROUND ─── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora-beam{position:absolute;width:40%;height:200%;filter:blur(100px);opacity:.04;animation:auroraMove 15s ease-in-out infinite}
.aurora-beam:nth-child(1){background:linear-gradient(180deg,transparent,var(--y),transparent);left:10%;animation-delay:0s}
.aurora-beam:nth-child(2){background:linear-gradient(180deg,transparent,#4d9fff,transparent);left:40%;animation-delay:-5s}
.aurora-beam:nth-child(3){background:linear-gradient(180deg,transparent,#9b5fff,transparent);left:70%;animation-delay:-10s}
@keyframes auroraMove{0%,100%{transform:translateY(-30%) rotate(-5deg)}50%{transform:translateY(-60%) rotate(5deg)}}

/* ─── LINE DRAW ─── */
.line-draw{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2s var(--ease2)}
.line-draw.vis{stroke-dashoffset:0}

/* ─── STAGGER GRID ─── */
.stagger-grid>.rv:nth-child(1){transition-delay:0s}
.stagger-grid>.rv:nth-child(2){transition-delay:.08s}
.stagger-grid>.rv:nth-child(3){transition-delay:.16s}
.stagger-grid>.rv:nth-child(4){transition-delay:.24s}
.stagger-grid>.rv:nth-child(5){transition-delay:.32s}
.stagger-grid>.rv:nth-child(6){transition-delay:.40s}
.stagger-grid>.rv:nth-child(7){transition-delay:.48s}
.stagger-grid>.rv:nth-child(8){transition-delay:.56s}
.stagger-grid>.rv:nth-child(9){transition-delay:.64s}

/* ─── MAGNETIC LINK ─── */
.mag-link{position:relative;display:inline-block;transition:color .3s}
.mag-link::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:1.5px;background:var(--y);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease2)}
.mag-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ─── COUNTER MORPH ─── */
.counter-morph{font-family:"DM Serif Display",serif;display:inline-block;position:relative}
.counter-morph .digit{display:inline-block;transition:transform .4s var(--ease2)}

/* ─── ENHANCED CARD HOVER — Perspective + Glow ─── */
.card-premium{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s;perspective:800px}
.card-premium:hover{transform:rotateX(-2deg) rotateY(2deg) translateZ(8px) translateY(-6px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(245,194,0,.1)}

/* ─── SCROLL-TRIGGERED LINE ─── */
.reveal-line{width:0;height:1px;background:linear-gradient(90deg,var(--y),transparent);transition:width 1.2s var(--ease2)}
.reveal-line.vis{width:100%}

/* ─── FLOATING ELEMENTS ─── */
.float{animation:floatSoft 6s ease-in-out infinite}
.float-alt{animation:floatSoft 8s ease-in-out 2s infinite}
@keyframes floatSoft{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1deg)}}

/* ─── GRADIENT TEXT ─── */
.grad-text{background:linear-gradient(135deg,var(--y),#FF8C42,var(--y2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-text-cool{background:linear-gradient(135deg,#4d9fff,#9b5fff,#00d4e8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ─── NOISE OVERLAY (enhanced) ─── */
.noise-strong{position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px}

/* ─── FOCUS RING ─── */
:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:var(--r)}

/* ─── ENHANCED RESPONSIVE ─── */
@media(max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .pricing-grid,.case-row{grid-template-columns:1fr 1fr}
  .blog-row{grid-template-columns:1fr}
  .team-grid-v2{grid-template-columns:1fr 1fr}
  .srv-mega{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .mega-marquee-item{font-size:clamp(36px,5vw,64px)}
}
@media(max-width:768px){
  .ham{display:flex}
  .nlinks,.nbtns{display:none}
  .f2{grid-template-columns:1fr}
  .g2,.g3,.srv-grid,.srv-mega,.pricing-grid,.case-row{grid-template-columns:1fr}
  .pf-grid-full,.pf-masonry{grid-template-columns:1fr}
  .pi.wide,.pm-item:first-child{grid-column:span 1}
  .team-grid-v2{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .blog-row{grid-template-columns:1fr}
  .ttrack .tc{min-width:100%}
  #chatbot-win{width:calc(100vw - 24px);right:12px}
  .mega-marquee-item{font-size:clamp(28px,8vw,48px);padding:0 20px}
  .blob{display:none}
  #cur,#cur2{display:none!important}
  body{cursor:auto}
  button,a,.btn{cursor:pointer}
}
@media(max-width:480px){
  .team-grid-v2{grid-template-columns:1fr}
  .sh{font-size:clamp(36px,9vw,56px)}
}

/* ─── CORE WEB VITALS — Performance ─── */
#services,#portfolio,#process,#testimonials,#team,#blog{
  content-visibility:auto;
  contain-intrinsic-size:0 600px}
.pm-item img,.tv-img img,.blog-img img{
  aspect-ratio:16/9;
  width:100%;
  height:auto}
.tv-img img{aspect-ratio:3/4}
@font-face{font-display:swap}
#nav{transform:translateZ(0);will-change:background-color}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .blob,.aurora-beam{display:none}
  #sitio-loader{display:none}
  .split-word .sw-inner{transform:none!important;opacity:1!important}
  .img-reveal::before{transform:none!important;opacity:0!important}
  .card-premium:hover{transform:none!important}
  .glow-card::before{display:none}
  .rv{opacity:1!important;transform:none!important}
  .float,.float-alt{animation:none!important}
  #particle-canvas{display:none}
  body,body.cursor-ready{cursor:auto!important}
  #cur,#cur2{display:none!important}
  .ttrack{scroll-snap-type:none}
}