:root{
  --bg:#F3F4F7; --bg-2:#EAEBF0; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --primary:#0E8E89; --secondary:#B85117; --accent:#B01B78;
  --text:#0A0C10; --muted:#5B6472; --border:rgba(10,12,16,0.10);
  --glass:rgba(255,255,255,0.55); --glass-border:rgba(10,12,16,0.08);
  --grain-op:0.025; --glow-op:0.16;
}
html.dark{
  --bg:#040507; --bg-2:#07090C; --surface:#0B0D12; --surface-2:#0E1117;
  --primary:#48FFDD; --secondary:#FF9153; --accent:#FF3DAE;
  --text:#F2F4F8; --muted:#7C879A; --border:rgba(255,255,255,0.09);
  --glass:rgba(255,255,255,0.045); --glass-border:rgba(255,255,255,0.09);
  --grain-op:0.05; --glow-op:0.5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif;
  overflow-x:hidden; transition:background .6s ease,color .6s ease; position:relative;
}
::selection{background:var(--primary); color:#040507}
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--primary); border-radius:10px}
h1,h2,h3,h4,.font-display{font-family:'Unbounded',sans-serif; letter-spacing:-0.01em}
.font-mono{font-family:'JetBrains Mono',monospace}
.text-muted{color:var(--muted)}
.bg-surface{background:var(--surface)}
.border-subtle{border-color:var(--border)}
.text-primary{color:var(--primary)}

/* grain + scanline atmosphere */
#grain{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#scanlines{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(255,255,255,0.4) 3px, transparent 4px);
  transition:opacity .6s ease; mix-blend-mode:overlay;
}
html.dark #scanlines{opacity:.04}

.gradient-text{background:linear-gradient(100deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent}

.glass{background:var(--glass); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid var(--glass-border)}

/* holographic shimmer border */
.holo-border{position:relative; isolation:isolate}
.holo-border::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ang,0deg), var(--primary), var(--secondary), var(--accent), var(--primary));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s ease; z-index:-1; animation:holoRotate 5s linear infinite paused;
}
.holo-border:hover::before{opacity:1; animation-play-state:running}
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes holoRotate{to{--ang:360deg}}

.btn-primary{position:relative; overflow:hidden; background:var(--text); color:var(--bg); isolation:isolate; font-family:'Unbounded',sans-serif}
.btn-primary::before{content:''; position:absolute; inset:0; background:linear-gradient(100deg,var(--primary),var(--secondary)); opacity:0; transition:opacity .45s ease; z-index:-1}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{color:#040507}
.btn-outline{position:relative; border:1.5px solid var(--border); overflow:hidden; font-family:'Unbounded',sans-serif}
.btn-outline::before{content:''; position:absolute; inset:0; background:var(--primary); opacity:0; transition:opacity .4s ease; z-index:-1}
.btn-outline:hover::before{opacity:.12}
.btn-outline:hover{border-color:var(--primary)}

.link-underline{position:relative}
.link-underline::after{content:''; position:absolute; left:0; bottom:-3px; width:0%; height:1.5px; background:var(--primary); transition:width .35s cubic-bezier(.2,.8,.2,1)}
.link-underline:hover::after{width:100%}

/* HUD label */
.hud-label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* uniform section rhythm: keeps existing mobile/tablet spacing, sets 70px top/bottom on desktop */
.uniform-section{padding-top:128px; padding-bottom:128px}
.uniform-pt{padding-top:128px}
.uniform-pb{padding-bottom:128px}
@media (min-width:1024px){
  .uniform-section{padding-top:70px; padding-bottom:70px}
  .uniform-pt{padding-top:70px}
  .uniform-pb{padding-bottom:70px}
}
.hud-dot{width:5px; height:5px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary)}

/* custom cursor */
.cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%)}
.cursor-dot{width:6px; height:6px; background:var(--primary)}
.cursor-ring{width:38px; height:38px; border:1px solid var(--primary); transition:width .25s ease,height .25s ease,opacity .25s ease,border-color .25s ease}
.cursor-ring::before,.cursor-ring::after{content:''; position:absolute; background:var(--primary)}
.cursor-ring::before{left:50%; top:-5px; width:1px; height:4px; transform:translateX(-50%)}
.cursor-ring::after{left:-5px; top:50%; width:4px; height:1px; transform:translateY(-50%)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

#loader{position:fixed; inset:0; z-index:10000; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .7s ease,visibility .7s ease}

.marquee-track{display:flex; width:max-content; animation:marquee 30s linear infinite}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

input[type="checkbox"].toggle-switch{display:none}
.toggle-track{width:54px; height:28px; border-radius:999px; background:var(--border); position:relative; cursor:pointer; transition:background .3s ease}
.toggle-thumb{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:linear-gradient(100deg,var(--primary),var(--secondary)); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
input:checked + .toggle-track .toggle-thumb{transform:translateX(26px)}

.accordion-content{max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.accordion-item.open .accordion-content{max-height:300px}
.accordion-icon{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.accordion-item.open .accordion-icon{transform:rotate(135deg)}

/* 3D tilt card */
.tilt-card{transform-style:preserve-3d; transition:transform .15s ease-out, box-shadow .4s ease, border-color .4s ease; will-change:transform}
.tilt-card:hover{box-shadow:0 40px 80px -30px rgba(0,0,0,.5); border-color:var(--primary)}
.tilt-inner{transform:translateZ(30px); transform-style:preserve-3d}

.portfolio-item{position:relative; overflow:hidden; cursor:pointer}
.portfolio-item img{transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; filter:grayscale(60%) brightness(.75)}
.portfolio-item:hover img{transform:scale(1.06); filter:grayscale(0%) brightness(.9)}
.portfolio-overlay{position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.9)); opacity:0; transition:opacity .4s ease; display:flex; align-items:flex-end}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-expand{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.7); transition:opacity .35s ease, transform .35s ease}
.portfolio-item:hover .portfolio-expand{opacity:1; transform:scale(1)}
.h-panel{transition:opacity .45s ease, transform .45s ease}
.h-panel.filtering-out{opacity:0; transform:scale(.94) translateY(10px)}

.counter{font-variant-numeric:tabular-nums}

.toast{transform:translateX(140%); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.toast.show{transform:translateX(0)}

[data-reveal]{opacity:0; transform:translateY(50px)}

/* Process — premium ambient + active pulse */
.process-node{
  transition: box-shadow .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 26px -10px color-mix(in srgb, var(--primary) 35%, transparent);
}
.process-node.process-active{
  border-color: color-mix(in srgb, var(--active-color, var(--primary)) 55%, var(--border)) !important;
  transform: translateY(-5px);
  animation: processPulse 0.7s ease-in-out infinite;
}
@keyframes processPulse{
  0%,100%{ box-shadow: 0 0 30px 0 color-mix(in srgb, var(--active-color, var(--primary)) 35%, transparent); }
  50%{ box-shadow: 0 0 52px 8px color-mix(in srgb, var(--active-color, var(--primary)) 65%, transparent); }
}
.process-dot{ transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
#trailLine, #traveler, #travelerGlow{ transition: opacity .1s linear; }

/* CTA — premium floating + glass */
.cta-orb{ animation: ctaFloat 9s ease-in-out infinite; }
.cta-orb-2{ animation: ctaFloat 7s ease-in-out infinite reverse; }
@keyframes ctaFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(14px,-22px) scale(1.12); }
}
.cta-card{
  box-shadow: 0 30px 90px -30px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 0 1px var(--glass-border) inset;
}
.cta-field input:focus, .cta-field select:focus, .cta-field textarea:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.cta-field select{ cursor:pointer; }
#ctaForm .btn-primary{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
#ctaForm .btn-primary:hover{ box-shadow: 0 10px 40px -8px color-mix(in srgb, var(--primary) 55%, transparent); }
.icon-move{transition:transform .35s ease}
.group:hover .icon-move{transform:translate(6px,-4px) rotate(8deg)}

#work-track{display:flex; will-change:transform}
.h-panel{flex:0 0 auto}

/* device mockup previews (project modal) */
.device-card{cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.device-card:hover{transform:translateY(-6px)}
.device-card:hover .device-frame{border-color:var(--primary); box-shadow:0 20px 45px -20px color-mix(in srgb, var(--primary) 45%, transparent)}
.device-frame{background:var(--bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .35s ease, box-shadow .35s ease; position:relative}
.device-frame img{width:100%; height:100%; object-fit:cover; display:block}

.mockup-desktop .device-frame{aspect-ratio:16/10}
.mockup-desktop .device-bar{height:22px; background:var(--bg-2); display:flex; align-items:center; gap:5px; padding:0 10px; border-bottom:1px solid var(--border)}
.mockup-desktop .device-bar span{width:6px; height:6px; border-radius:50%; background:var(--border)}
.mockup-desktop .device-shot{height:calc(100% - 22px)}

.mockup-tablet .device-frame{aspect-ratio:3/4; border-radius:22px; border-width:6px; max-width:100%; margin:0 auto}
.mockup-mobile .device-frame{aspect-ratio:10/18.5; border-radius:26px; border-width:7px; max-width:100%; margin:0 auto}
.mockup-mobile .device-frame::before{content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:5px; border-radius:4px; background:var(--border); z-index:2}

.device-label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px}

/* focused stage — larger versions */
#pmFocusStage .mockup-desktop{width:min(680px,100%)}
#pmFocusStage .mockup-tablet{width:min(360px,80%)}
#pmFocusStage .mockup-mobile .device-frame{max-width:230px}
#pmFocusStage .device-frame{border-width:2px}
#pmFocusStage .mockup-tablet .device-frame{border-width:8px}
#pmFocusStage .mockup-mobile .device-frame{border-width:9px}

.pm-tab{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 14px; border-radius:999px; color:var(--muted); transition:background .3s ease, color .3s ease}
.pm-tab.active{background:var(--primary); color:#040507}

body.modal-open{overflow:hidden}

.kinetic span{display:inline-block; will-change:transform}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
:focus-visible{outline:2px solid var(--primary); outline-offset:3px}

/* ===== About ===== */
.about-stat{border-left:1.5px solid var(--border); padding-left:1.1rem}

/* ===== Service cards ===== */
.service-card{position:relative; overflow:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease}
.service-card:hover{transform:translateY(-8px); border-color:var(--primary); box-shadow:0 30px 60px -25px rgba(0,0,0,.45)}
.service-card .service-icon{transition:transform .45s cubic-bezier(.2,.8,.2,1), background .45s ease, border-color .45s ease}
.service-card:hover .service-icon{transform:scale(1.08) rotate(-6deg); border-color:var(--primary)}
.service-card .service-glow{position:absolute; inset:-40% -40% auto auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent), transparent 70%);
  opacity:0; transition:opacity .5s ease; pointer-events:none}
.service-card:hover .service-glow{opacity:1}

/* ===== Technologies ===== */
.tech-tile{transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease}
.tech-tile:hover{transform:translateY(-6px); border-color:var(--primary); box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.tech-tile i{transition:transform .35s ease; color:var(--text)}
.tech-tile:hover i{transform:scale(1.12)}

/* ===== Testimonial carousel ===== */
.testimonial-page{width:100%; flex-shrink:0}
.t-nav-btn{transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease}
.t-nav-btn:hover{background:var(--primary); border-color:var(--primary); color:#040507; transform:scale(1.06); box-shadow:0 8px 24px -6px color-mix(in srgb, var(--primary) 60%, transparent)}

.test-card{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease}
.test-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(0,0,0,.55); border-color:color-mix(in srgb, var(--primary) 50%, var(--border))}

.why-card{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease}
.why-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -25px rgba(0,0,0,.55); border-color:var(--primary)}
.why-ghost-num{color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--primary) 35%, transparent); opacity:.5; z-index:0}