/* ── LOADER ── */
.preloader-w{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  background:#080808;
  z-index:999999;
  overflow:hidden;
  transition:transform 1.3s cubic-bezier(0.65,0,0.35,1);
}
.preloader-inner{
  position:relative;width:100%;height:100%;
  display:flex;justify-content:center;align-items:center;
}
.preloader-logo-w{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,3.5vw,3rem);
  z-index:5;position:relative;
}
.logo-half{
  display:flex;
  gap:clamp(0.5rem,2vw,1.5rem);
  transition:transform 1.3s cubic-bezier(0.65,0,0.35,1),
             opacity 1.3s cubic-bezier(0.65,0,0.35,1),
             filter 1.3s cubic-bezier(0.65,0,0.35,1);
  will-change:transform,opacity,filter;
}
.logo-half .letter{
  font-family:'Syne',sans-serif;
  font-size:clamp(3.5rem,8.5vw,8rem);
  font-weight:800;
  color:#fff;
  line-height:1;
  letter-spacing:-0.2em;
}
.logo-center{
  width:clamp(5.5rem,9.5vw,9.25rem);
  height:clamp(5.5rem,9.5vw,9.25rem);
  display:flex;align-items:center;justify-content:center;
  transition:transform 1.3s cubic-bezier(0.65,0,0.35,1),
             opacity 1.3s cubic-bezier(0.65,0,0.35,1),
             filter 1.3s cubic-bezier(0.65,0,0.35,1);
  will-change:transform,opacity,filter;
}
.glow-sphere{
  width:80%;height:80%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffffff 0%,#0055FF 45%,#010358 85%,#01021d 100%);
  box-shadow:0 0 35px rgba(0,85,255,0.45),
             inset 0 -5px 12px rgba(0,0,0,0.7),
             inset 0 3px 8px rgba(255,255,255,0.6);
  animation:corePulse 3s ease-in-out infinite alternate;
}
@keyframes corePulse{
  0%{transform:scale(1)}
  100%{transform:scale(1.08)}
}
.preloader-sketch-w{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-1deg);
  width:90vw;max-width:920px;height:220px;
  z-index:10;pointer-events:none;
}
.sketch-svg{width:100%;height:100%;overflow:visible}
.sketch-line{fill:none;transition:opacity 0.5s ease}
.sketch-line.line-fg{stroke-dasharray:1000;stroke-dashoffset:1000}
.preloader-footer{
  position:absolute;bottom:3.5rem;left:4rem;right:4rem;
  display:flex;justify-content:space-between;align-items:flex-end;
  z-index:5;
  border-top:1px solid rgba(255,255,255,0.04);
  padding-top:2rem;
  transition:opacity 0.5s cubic-bezier(0.65,0,0.35,1),
             transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.percentage-w{display:flex;align-items:baseline}
.percent-num{
  font-family:'Outfit',sans-serif;
  font-size:clamp(2rem,4.2vw,3.7rem);
  font-weight:600;line-height:0.85;
  color:#fff;letter-spacing:-0.01em;
}
.percent-symbol{
  font-size:clamp(1.2rem,2.5vw,2.2rem);
  font-weight:600;color:#0055FF;margin-left:0.15rem;
}
.tagline-w{max-width:320px;text-align:right}
.tagline-text{
  font-size:0.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.15em;
  color:#888;line-height:1.5;
}
/* Transition states */
.preloader-w.break .logo-half.is-left{
  transform:translateX(-160px) scale(0.9);opacity:0;filter:blur(10px);
}
.preloader-w.break .logo-half.is-right{
  transform:translateX(160px) scale(0.9);opacity:0;filter:blur(10px);
}
.preloader-w.break .logo-center{transform:scale(0);opacity:0;filter:blur(10px)}
.preloader-w.break .sketch-line{opacity:0}
.preloader-w.break .preloader-footer{opacity:0;transform:translateY(20px)}
.preloader-w.end{transform:translateY(-100%)}
@media(max-width:768px){
  .preloader-footer{left:2rem;right:2rem;bottom:2.5rem}
  .preloader-sketch-w{width:95vw;height:180px}
}
@media(max-width:500px){
  .preloader-logo-w{gap:0.4rem}
  .logo-half{gap:0.25rem}
  .logo-half .letter{font-size:clamp(2.2rem,10vw,3rem);letter-spacing:-0.15em}
  .logo-center{width:clamp(3rem,11vw,4.5rem);height:clamp(3rem,11vw,4.5rem)}
  .preloader-footer{flex-direction:column;align-items:center;gap:1rem;bottom:2rem;left:1.5rem;right:1.5rem;padding-top:1.25rem}
  .tagline-w{max-width:100%;text-align:center}
  .percent-num{font-size:2.2rem}
  .preloader-sketch-w{height:140px}
  .preloader-w.break .logo-half.is-left{transform:translateX(-80px) scale(0.9)}
  .preloader-w.break .logo-half.is-right{transform:translateX(80px) scale(0.9)}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#080808;
--card:#0D0D0D;
--accent:#0055FF;
--accent-dim:rgba(0,85,255,0.15);
--text:#FFFFFF;
--muted:#888888;
--white-section:#F5F5F0;
--nav-h:0px;
}
html{scroll-behavior:auto;cursor:auto}
body{
background:var(--bg);
color:var(--text);
font-family:'DM Sans',sans-serif;
overflow-x:hidden;
cursor:auto;
line-height:1.618;
padding-bottom:88px;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none;cursor:pointer}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;cursor:pointer}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}

/* CURSOR — spotlight canvas */
#spotlight-canvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:99998;
}
/* Tiny dot cursor */
#cursor-dot{display:none}
#cursor-ring{display:none}

/* NAV — floating logo mark */
.site-logo-mark{
  position:fixed;top:24px;left:28px;
  z-index:10000;display:flex;
  opacity:1;transition:opacity .2s;
  cursor:pointer;
  /* Always on top, never hidden by scroll */
  will-change:transform;
}
.site-logo-mark:hover{opacity:.8}

/* NAV — bottom pill */
#nav{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%);
  z-index:1000;
  height:auto;width:auto;
  display:flex;align-items:center;
  padding:0;background:none;
}
.nav-pill{
  background:#fff;
  border-radius:100px;
  padding:5px 5px;
  display:flex;align-items:center;gap:2px;
  box-shadow:0 8px 48px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.15);
}
.nav-pill-item{
  font-size:14px;font-weight:500;
  color:#111;padding:10px 20px;
  border-radius:100px;border:none;
  background:none;white-space:nowrap;
  transition:background .18s,color .18s;
  font-family:inherit;letter-spacing:0;
  cursor:pointer;
  line-height:1;
}
.nav-pill-item:hover{background:rgba(0,0,0,0.07)}
.nav-cta-pill{
  background:#0055FF;color:#fff;
  padding:10px 22px;border-radius:100px;
  font-size:14px;font-weight:600;
  border:none;white-space:nowrap;
  transition:box-shadow .2s,transform .2s;
  font-family:inherit;letter-spacing:0;
  cursor:pointer;
  line-height:1;
}
.nav-cta-pill:hover{
  box-shadow:0 6px 28px rgba(0,85,255,.45);
  transform:translateY(-1px);
}
.nav-hover-wrap{position:relative}

/* Hover dropdowns (above the pill) */
.nav-drop{
  position:fixed;
  bottom:calc(24px + 60px + 12px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  z-index:999;
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 60px rgba(0,0,0,0.2),0 2px 12px rgba(0,0,0,0.08);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  min-width:620px;
}
.nav-drop.is-open{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-drop-inner{
  display:grid;grid-template-columns:1fr 220px;
  min-height:320px;
}
.nav-drop-inner--rev{grid-template-columns:220px 1fr}
.nav-drop-links{
  padding:24px 20px;
  display:flex;flex-direction:column;gap:4px;
}
.ndl-item{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:12px;
  transition:background .15s;
  text-decoration:none;
}
.ndl-item:hover{background:rgba(0,0,0,0.04)}
.ndl-name{font-size:14px;font-weight:600;color:#111;line-height:1.3}
.ndl-desc{font-size:12px;color:rgba(0,0,0,0.4);line-height:1.4}
.nav-drop-preview{
  background:#111;
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px;
}
.ndp-card{color:#fff}
.ndp-stat-num{
  font-family:'Unbounded',sans-serif;
  font-size:40px;font-weight:900;
  color:#fff;letter-spacing:-.03em;
  line-height:1;margin-bottom:6px;
}
.ndp-stat-lbl{
  font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);margin-bottom:20px;
}
.ndp-sep{width:32px;height:1px;background:rgba(255,255,255,0.15);margin-bottom:20px}
.ndp-brand{
  font-family:'Unbounded',sans-serif;
  font-size:12px;font-weight:700;
  color:#fff;margin-bottom:8px;letter-spacing:-.01em;
}
.ndp-sub{
  font-size:12px;color:rgba(255,255,255,0.4);
  line-height:1.6;
}

.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;
  margin-left:12px;padding:8px;
}
.hamburger span{
  display:block;width:22px;height:1.5px;background:#111;
  transition:transform .3s,opacity .3s;
}
#mobile-menu{
  display:none;
  position:fixed;inset:0;
  background:var(--bg);
  z-index:9999;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:32px;
}
#mobile-menu.open{display:flex}
#mobile-menu a{
  font-family:'Unbounded',sans-serif;
  font-size:32px;font-weight:700;
  color:var(--muted);
  transition:color .2s;
}
#mobile-menu a:hover{color:#fff}
.menu-close{
  position:absolute;top:24px;right:32px;
  background:none;border:none;
  color:#fff;font-size:28px;
}

/* PAGE TRANSITION */
#page-transition{
position:fixed;inset:0;
background:var(--bg);
z-index:9000;
transform:translateX(-100%);
pointer-events:none;
}
#transition-line{
position:fixed;top:0;left:0;width:0;height:2px;
background:var(--accent);z-index:9001;
}

/* PAGES */
.page{display:none}
.page.active{display:block}

/* TYPOGRAPHY */

/* Playfair accent — one italic word in headings */
.display-xl em,
.display-lg em,
.display-md em,
.accent-text em,
.svc-hero-title em,
.svc-section-title em,
.svc-cta-title em {
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-style:italic;
  letter-spacing:-.01em;
}
/* Service detail pages use <span> for the accent word */
.svc-hero-title span {
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-style:italic;
}

.display-xl{
font-family:'Unbounded',sans-serif;
font-weight:900;
font-size:clamp(44px,6.5vw,100px);
line-height:.93;
letter-spacing:-.04em;
text-transform:uppercase;
}
.display-lg{
font-family:'Nohemi','DM Sans',sans-serif;
font-weight:600;
font-size:clamp(32px,4.5vw,72px);
line-height:1;
letter-spacing:-.03em;
text-transform:none;
}
.display-md{
font-family:'Nohemi','DM Sans',sans-serif;
font-weight:600;
font-size:clamp(22px,2.8vw,44px);
line-height:1.08;
letter-spacing:-.02em;
}
.label{
font-size:11px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);
}
.accent-text{color:var(--accent)}

/* SECTION BASE */
section{position:relative}
.container{max-width:1320px;margin:0 auto;padding:0 40px}
.section-pad{padding:144px 0}

/* GLASS CARD */
.glass{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.06);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border-radius:16px;
transition:border-color .3s,box-shadow .3s;
}
.glass:hover{
border-color:rgba(0,85,255,0.3);
box-shadow:0 0 40px rgba(0,85,255,0.08);
}

/* BUTTONS — liquid metal (enhanced by js/liquid-metal.js) */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:100px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:rgba(220,220,220,0.95);cursor:pointer;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,0.13);
  background:linear-gradient(180deg,#1e1e1e 0%,#0c0c0c 100%);
  box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.09);
  transition:transform .25s ease,box-shadow .25s ease;
  text-decoration:none;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.13);
}
.btn-primary:active{transform:translateY(0);}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:100px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,0.9);cursor:pointer;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.btn-outline:hover{
  border-color:rgba(0,85,255,0.5);
  background:rgba(0,85,255,0.08);
  box-shadow:0 4px 20px rgba(0,85,255,0.15),inset 0 1px 0 rgba(255,255,255,0.1);
}

/* MARQUEE */
.marquee-wrapper{overflow:hidden}
.marquee-track{
display:flex;gap:48px;
animation:marquee 25s linear infinite;
white-space:nowrap;
}
.marquee-track.reverse{animation-direction:reverse;animation-duration:30s}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
font-family:'Unbounded',sans-serif;
font-size:14px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;
flex-shrink:0;
display:flex;align-items:center;gap:16px;
}
.marquee-item::after{content:'✦';color:var(--accent);font-size:10px}

/* STATS SECTION */
.stats-section{
  background:#060608;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;overflow:hidden;
}
.stats-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,85,255,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.stat-card-new{
  position:relative;text-align:center;padding:55px 34px;
  border-right:1px solid rgba(255,255,255,0.05);
}
.stat-card-new:last-child{border-right:none}
.stat-num{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(48px,6.5vw,90px);
  font-weight:900;
  color:#fff;
  line-height:1;
  letter-spacing:-.04em;
}
.stat-suffix{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(24px,3vw,44px);
  font-weight:900;
  background:linear-gradient(135deg,#6366f1,#0055FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;
}
.stat-label{
  font-size:12px;color:rgba(255,255,255,0.35);
  margin-top:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
}
.stat-bar{
  width:32px;height:2px;
  background:linear-gradient(90deg,#0055FF,#6366f1);
  margin:12px auto 0;border-radius:2px;
}

/* ELEGANT SHAPES (HeroGeometric) */
@keyframes esIn{
  from{opacity:0;transform:translateY(-150px) rotate(calc(var(--r) - 15deg))}
  to{opacity:1;transform:translateY(0) rotate(var(--r))}
}
@keyframes esFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(15px)}
}
.es-wrap{position:absolute;pointer-events:none}
.es-inner{width:100%;height:100%}
.es-shape{
  width:100%;height:100%;
  border-radius:100px;
  border:1.5px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(2px);
  box-shadow:0 8px 32px rgba(255,255,255,0.06);
  position:relative;
}
.es-shape::after{
  content:'';position:absolute;inset:0;border-radius:100px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.18),transparent 70%);
}

/* DISPLAY CARDS */
.dc-stack{position:relative;width:380px;height:260px;flex-shrink:0}
.dc-card{
  position:absolute;top:0;left:0;
  width:340px;height:136px;
  border-radius:12px;
  border:1.5px solid rgba(255,255,255,0.1);
  background:rgba(18,18,22,0.82);
  backdrop-filter:blur(12px);
  padding:14px 16px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:skewY(-8deg);
  transition:transform .5s ease,filter .5s ease,border-color .4s;
  overflow:hidden;
}
.dc-card::after{
  content:'';position:absolute;right:-4px;top:-5%;
  height:110%;width:160px;
  background:linear-gradient(to left,#030303,transparent);
  pointer-events:none;z-index:2;
}
.dc-card::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:rgba(3,3,3,0.45);
  z-index:1;
  transition:opacity .5s ease;
  pointer-events:none;
}
.dc-card:hover::before{opacity:0}
.dc-card:hover{border-color:rgba(255,255,255,0.2)}
.dc-c1{transform:skewY(-8deg) translateX(0) translateY(0);filter:grayscale(100%)}
.dc-c1:hover{transform:skewY(-8deg) translateX(0) translateY(-40px);filter:grayscale(0%)}
.dc-c2{transform:skewY(-8deg) translateX(44px) translateY(44px);filter:grayscale(100%)}
.dc-c2:hover{transform:skewY(-8deg) translateX(44px) translateY(8px);filter:grayscale(0%)}
.dc-c3{transform:skewY(-8deg) translateX(88px) translateY(88px)}
.dc-c3:hover{transform:skewY(-8deg) translateX(88px) translateY(116px)}
.dc-row{display:flex;align-items:center;gap:8px;position:relative;z-index:3}
.dc-icon{
  width:28px;height:28px;flex-shrink:0;
  border-radius:50%;
  background:#1a2050;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.dc-title{font-size:15px;font-weight:600;color:#6090ff}
.dc-desc{font-size:14px;color:rgba(255,255,255,0.85);position:relative;z-index:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-date{font-size:12px;color:rgba(255,255,255,0.4);position:relative;z-index:3}

/* FOLDER ANIMATION — Panel 2 service cards */
.svc-folder{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid #0055FF;
  border-radius:12px;
  padding:20px 24px;
  opacity:0;
  transform:translateY(50px);
  transition:opacity .55s ease,transform .55s ease,background .25s,border-color .25s;
}
.svc-folder.folded-in{opacity:1;transform:translateY(0)}
.svc-folder:hover{background:rgba(0,85,255,0.07);border-color:rgba(0,85,255,0.4)}
.svc-folder-name{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(16px,1.8vw,22px);
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.svc-folder-desc{font-size:14px;color:rgba(255,255,255,0.55);line-height:1.7}
.svc-folder-tag{
  display:inline-flex;align-items:center;
  background:rgba(0,85,255,0.15);
  color:#6090ff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;
  margin-bottom:12px;
}

/* REALISM BUTTON */
.realism-btn{
  position:relative;
  padding:2px;
  border-radius:16px;
  border:none;
  cursor:pointer;
  background:radial-gradient(circle 80px at 80% -10%,#2a2a2a,#101010);
  transition:all .3s;
  font-family:'DM Sans',sans-serif;
  display:inline-block;
  flex-shrink:0;
}
.realism-glow{
  position:absolute;top:0;right:0;
  width:65%;height:60%;
  border-radius:120px;
  box-shadow:0 0 22px rgba(0,85,255,0.35);
  z-index:0;
  transition:box-shadow .3s ease;
  pointer-events:none;
}
.realism-btn:hover .realism-glow{box-shadow:0 0 44px rgba(0,85,255,0.6)}
.realism-blob{
  position:absolute;bottom:0;left:0;
  width:50px;height:50%;
  border-radius:17px;
  background:radial-gradient(circle 60px at 0% 100%,#0055FF,rgba(0,85,255,0.35),transparent);
  box-shadow:-2px 9px 40px rgba(0,85,255,0.35);
  transition:all .3s ease;
  pointer-events:none;
}
.realism-btn:hover .realism-blob{width:90px;box-shadow:-4px 1px 48px rgba(0,85,255,0.58)}
.realism-inner{
  position:relative;
  padding:14px 28px;
  border-radius:14px;
  color:#fff;
  background:radial-gradient(circle 80px at 80% -50%,#555,#0e1010);
  z-index:10;
  transition:transform .3s ease;
  font-size:14px;font-weight:600;letter-spacing:.05em;
  white-space:nowrap;
}
.realism-btn:hover .realism-inner{transform:scale(1.07)}
.realism-inner-glow{
  position:absolute;inset:0;
  border-radius:14px;
  background:radial-gradient(circle 60px at 0% 100%,rgba(0,85,255,0.12),rgba(0,60,255,0.08),transparent);
  z-index:-1;pointer-events:none;
}
/* Outline variant */
.realism-btn-outline{
  background:radial-gradient(circle 80px at 80% -10%,rgba(255,255,255,0.08),rgba(0,0,0,0));
  outline:1px solid rgba(255,255,255,0.15);
}
.realism-btn-outline .realism-inner{
  background:radial-gradient(circle 80px at 80% -50%,rgba(80,80,80,0.4),rgba(8,8,8,0.9));
  color:rgba(255,255,255,0.85);
}
.realism-btn-outline .realism-blob{
  background:radial-gradient(circle 60px at 0% 100%,rgba(0,85,255,0.5),rgba(0,85,255,0.18),transparent);
  box-shadow:-2px 9px 30px rgba(0,85,255,0.2);
}
.realism-btn-outline:hover .realism-blob{box-shadow:-4px 1px 40px rgba(0,85,255,0.38)}

/* LAPTOP SECTION */
.laptop-section{
height:300vh;
position:relative;
}
.laptop-sticky{
position:sticky;top:0;
height:100vh;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.laptop-frame{
width:min(600px,80vw);
position:relative;
transform-style:preserve-3d;
perspective:1000px;
}
.laptop-body{
width:100%;
background:#1a1a1a;
border-radius:16px 16px 4px 4px;
border:1px solid #333;
padding:12px 12px 0;
}
.laptop-screen-wrap{
background:#000;
border-radius:8px;
overflow:hidden;
aspect-ratio:16/10;
position:relative;
}
.laptop-screen-inner{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
background:var(--bg);
opacity:0;
transition:opacity .5s;
flex-direction:column;gap:24px;
padding:32px;text-align:center;
}
.laptop-base{
height:12px;background:#222;
border-radius:0 0 8px 8px;
width:90%;margin:0 auto;
}
.laptop-stand{
height:8px;background:#1a1a1a;
width:60%;margin:0 auto;
border-radius:0 0 8px 8px;
}
.laptop-lid{
transform-origin:bottom center;
transform:rotateX(-90deg);
transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.laptop-lid.open{transform:rotateX(0deg)}

/* WORK CARDS */
.work-staircase{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
align-items:end;
}
.work-card{
position:relative;overflow:hidden;border-radius:12px;
}
.work-card:nth-child(1){margin-bottom:0}
.work-card:nth-child(2){margin-bottom:60px}
.work-card:nth-child(3){margin-bottom:0}
.work-card img{width:100%;height:auto;display:block;
transition:transform .6s cubic-bezier(.16,1,.3,1)}
.work-card:hover img{transform:scale(1.05)}
.work-card-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);
display:flex;align-items:flex-end;padding:24px;
opacity:0;transition:opacity .3s;
}
.work-card:hover .work-card-overlay{opacity:1}

/* SERVICES GRID */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{padding:32px;position:relative;overflow:hidden}
.service-icon{
width:48px;height:48px;
background:var(--accent-dim);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
margin-bottom:20px;
}
.service-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.5}
.service-card h3{
font-family:'Unbounded',sans-serif;
font-size:15px;font-weight:700;
margin-bottom:10px;
}
.service-card p{font-size:13px;color:var(--muted);line-height:1.7}

/* SHOWREEL */
.showreel-box{
aspect-ratio:16/9;
background:#0a0a0a;
border:1px solid rgba(255,255,255,0.06);
border-radius:16px;
display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:16px;
position:relative;overflow:hidden;
}
.play-btn{
width:72px;height:72px;
background:var(--accent);border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:transform .3s,box-shadow .3s;
}
.play-btn:hover{transform:scale(1.1);box-shadow:0 0 40px rgba(0,85,255,.5)}
.play-btn svg{width:24px;height:24px;fill:#fff;margin-left:3px}

/* CTA STRIP */
.cta-strip{
display:flex;align-items:center;justify-content:space-between;
gap:40px;flex-wrap:wrap;
padding:80px 0;
border-top:1px solid rgba(255,255,255,0.06);
border-bottom:1px solid rgba(255,255,255,0.06);
}
.rotating-badge{
width:120px;height:120px;
position:relative;flex-shrink:0;
}
.badge-ring{
animation:spin 8s linear infinite;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.badge-center{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
}
.badge-dot{
width:16px;height:16px;
background:var(--accent);border-radius:50%;
}

/* ACCORDION */
.accordion-item{
border-bottom:1px solid rgba(255,255,255,0.08);
overflow:hidden;
}
.accordion-header{
display:flex;align-items:center;gap:24px;
padding:28px 0;
background:none;border:none;color:#fff;
width:100%;text-align:left;
transition:color .2s;
}
.accordion-header:hover{color:var(--accent)}
.accordion-num{
font-family:'Unbounded',sans-serif;
font-size:13px;color:var(--muted);
min-width:40px;
}
.accordion-title{
font-family:'Unbounded',sans-serif;
font-size:clamp(18px,2.5vw,28px);
font-weight:700;flex:1;
}
.accordion-icon{
width:36px;height:36px;
border:1px solid rgba(255,255,255,0.15);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:transform .3s,background .3s;
flex-shrink:0;
}
.accordion-item.open .accordion-icon{
transform:rotate(45deg);
background:var(--accent);border-color:var(--accent);
}
.accordion-body{height:0;overflow:hidden;transition:height .5s cubic-bezier(.16,1,.3,1)}
.accordion-inner{
padding:0 0 40px 64px;
display:grid;grid-template-columns:1fr 1fr;
gap:40px;align-items:start;
}
.deliverables{list-style:none;margin-top:16px}
.deliverables li{
font-size:14px;color:var(--muted);padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.05);
display:flex;align-items:center;gap:8px;
}
.deliverables li::before{
content:'';width:4px;height:4px;
background:var(--accent);border-radius:50%;flex-shrink:0;
}

/* PORTFOLIO */
.filter-tabs{
display:flex;gap:8px;flex-wrap:wrap;
margin-bottom:55px;
}
.filter-tab{
padding:8px 20px;border-radius:100px;
font-size:13px;font-weight:600;letter-spacing:.04em;
border:1px solid rgba(255,255,255,0.12);
background:transparent;color:var(--muted);
transition:all .2s;
}
.filter-tab.active,
.filter-tab:hover{
background:var(--accent);color:#fff;
border-color:var(--accent);
}
.portfolio-section{
margin-bottom:89px;
content-visibility:auto;
contain-intrinsic-size:0 900px;
}
.portfolio-label{
writing-mode:vertical-rl;
font-size:11px;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);
position:absolute;left:-40px;top:0;
}
.image-grid{display:grid;gap:21px}
.portfolio-card{
position:relative;overflow:hidden;border-radius:12px;
}
.portfolio-card img{
width:100%;height:auto;display:block;
transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.portfolio-card:hover img{will-change:transform;transform:scale(1.04)}
.portfolio-card[data-natural] img{
height:auto;object-fit:unset;
}
/* Brand grid — 2 col desktop, 1 col mobile */
#grid-brand{ grid-template-columns:1fr 1fr !important; }
@media(max-width:768px){ #grid-brand{ grid-template-columns:1fr !important; } }

/* Social Media grid — 3 col → 2 col → 1 col */
#grid-social{ grid-template-columns:repeat(3,1fr) !important; }
@media(max-width:900px){ #grid-social{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:480px){ #grid-social{ grid-template-columns:1fr !important; } }

/* Website grid — full width always */
#grid-website{ grid-template-columns:1fr !important; }

/* UI/UX grid — 3 col → 2 col → 1 col */
#grid-uiux{ grid-template-columns:repeat(3,1fr) !important; }
@media(max-width:900px){ #grid-uiux{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:480px){ #grid-uiux{ grid-template-columns:1fr !important; } }

/* LinkedIn Branding grid — 4 col → 2 col → 1 col */
#grid-linkedin{ grid-template-columns:repeat(4,1fr) !important; }
@media(max-width:900px){ #grid-linkedin{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:480px){ #grid-linkedin{ grid-template-columns:1fr !important; } }

/* LinkedIn Banners grid — 2 col → 1 col */
#grid-linkedin-banner{ grid-template-columns:1fr 1fr !important; }
@media(max-width:768px){ #grid-linkedin-banner{ grid-template-columns:1fr !important; } }

/* Packaging grid — 3 col → 2 col → 1 col */
#grid-packaging{ grid-template-columns:repeat(3,1fr) !important; }
@media(max-width:900px){ #grid-packaging{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:480px){ #grid-packaging{ grid-template-columns:1fr !important; } }

.portfolio-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%);
padding:21px;
display:flex;flex-direction:column;justify-content:flex-end;
opacity:0;transition:opacity .25s;
}
.portfolio-card:hover .portfolio-overlay{opacity:1}
.category-pill{
display:inline-flex;align-items:center;
background:var(--accent);color:#fff;
font-size:11px;font-weight:600;letter-spacing:.08em;
padding:4px 12px;border-radius:100px;
margin-bottom:8px;align-self:flex-start;
}

/* TESTIMONIALS */
.big-quote{
font-family:'Unbounded',sans-serif;
font-size:clamp(80px,15vw,180px);
color:rgba(0,85,255,0.3);
line-height:1;
position:absolute;top:-30px;left:-10px;
font-weight:900;
pointer-events:none;
}
.testimonials-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:16px;
}
.testimonial-card{padding:28px}
.stars{color:var(--accent);font-size:16px;margin-bottom:16px;letter-spacing:2px}
.testimonial-quote{
font-size:14px;color:rgba(255,255,255,0.8);
line-height:1.8;margin-bottom:20px;
}
.testimonial-author{
display:flex;align-items:center;gap:12px;
}
.author-avatar{
width:44px;height:44px;border-radius:50%;object-fit:cover;
border:1.5px solid rgba(0,85,255,0.3);
}
.author-info p:first-child{font-size:13px;font-weight:600}
.author-info p:last-child{font-size:12px;color:var(--muted)}
.client-pill{
display:inline-flex;align-items:center;gap:4px;
background:rgba(0,85,255,0.1);
border:1px solid rgba(0,85,255,0.2);
padding:2px 10px;border-radius:100px;
font-size:11px;color:var(--accent);margin-top:2px;
}

/* LOGOS MARQUEE */
.logo-box{
width:auto;height:52px;
padding:0 16px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:11px;color:var(--muted);letter-spacing:.1em;
text-transform:uppercase;font-weight:600;
flex-shrink:0;
}

/* CONTACT */
.contact-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:80px;align-items:start;
}
.contact-info h2{
font-family:'Unbounded',sans-serif;
font-size:clamp(24px,3vw,42px);
font-weight:700;margin-bottom:24px;
}
.contact-detail{
display:flex;align-items:center;gap:16px;
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:14px;color:var(--muted);
}
.contact-detail strong{color:#fff}
.social-row{display:flex;gap:12px;margin-top:24px}
.social-btn{
width:40px;height:40px;
border:1px solid rgba(255,255,255,0.12);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:border-color .2s,background .2s;
}
.social-btn:hover{border-color:var(--accent);background:var(--accent-dim)}
.social-btn svg{width:16px;height:16px;fill:#fff}

/* FORM */
.contact-form{padding:40px}
.form-group{margin-bottom:20px}
.form-group label{
display:block;font-size:12px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
padding:14px 16px;
color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;
transition:border-color .2s,box-shadow .2s;
outline:none;
}
.form-group select{
-webkit-appearance:none;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='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 16px center;
}
.form-group select option{background:#111;color:#fff}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(0,85,255,0.12);
}
.form-group textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#form-success{
display:none;
text-align:center;padding:40px;
flex-direction:column;align-items:center;gap:16px;
}
#form-success.show{display:flex}
.checkmark-circle{
width:64px;height:64px;
background:var(--accent);border-radius:50%;
display:flex;align-items:center;justify-content:center;
animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.checkmark-circle svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spinner{
width:28px;height:28px;
border:2px solid rgba(255,255,255,0.1);
border-top-color:var(--accent);
border-radius:50%;
animation:spin .6s linear infinite;
}

/* FOOTER */
footer{
border-top:none;
padding:0;
}
.footer-grid{
display:grid;grid-template-columns:1.5fr 1fr 1fr;
gap:48px;margin-bottom:48px;
}
.footer-brand .wordmark{
font-family:'Unbounded',sans-serif;
font-size:22px;font-weight:900;
margin-bottom:12px;
}
.footer-brand p{font-size:13px;color:var(--muted);line-height:1.7;max-width:280px}
.footer-col h4{
font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);
margin-bottom:20px;
}
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{font-size:13px;color:var(--muted);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-bottom{
display:flex;align-items:center;justify-content:space-between;
padding-top:24px;
border-top:1px solid rgba(255,255,255,0.06);
font-size:12px;color:var(--muted);
}

/* ABOUT PAGE */
.about-hero-grid{
display:grid;grid-template-columns:1fr auto;
align-items:end;gap:40px;
padding-top:calc(var(--nav-h) + 80px);
padding-bottom:80px;
}
.years-badge{
font-family:'Unbounded',sans-serif;
font-size:clamp(60px,10vw,120px);
font-weight:900;
color:var(--accent);
line-height:1;
}
.studio-image{
width:100%;border-radius:16px;overflow:hidden;
clip-path:inset(0 100% 0 0);
}
.manifesto-section{
background:var(--white-section);
color:#080808;
padding:100px 0;
}
.manifesto-line{
font-family:'Unbounded',sans-serif;
font-size:clamp(18px,3vw,38px);
font-weight:700;line-height:1.3;
margin-bottom:8px;
opacity:0;transform:translateY(24px);
}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:600px}
.team-card{padding:0;overflow:hidden}
.team-img{width:100%;aspect-ratio:5/6;object-fit:cover;display:block}
.team-info{padding:20px}
.team-info h3{
font-family:'Unbounded',sans-serif;
font-size:16px;font-weight:700;margin-bottom:4px;
}
.team-info p{font-size:13px;color:var(--muted)}
.team-role{
display:inline-flex;
background:var(--accent-dim);
color:var(--accent);
font-size:11px;font-weight:600;
padding:4px 12px;border-radius:100px;
margin-top:8px;letter-spacing:.06em;
}

/* HERO PAGE TOP */
.hero-section{
min-height:100vh;
display:flex;align-items:center;
padding-top:var(--nav-h);
position:relative;overflow:hidden;
}
.hero-inner{
padding-top:40px;
position:relative;z-index:1;
}

/* SECTION HEADINGS */
.section-eyebrow{
display:flex;align-items:center;gap:13px;
margin-bottom:21px;
}
.section-eyebrow::before{
content:'';width:34px;height:1px;background:var(--accent);
}

/* WHITE SECTION TEXT OVERRIDE */
.stats-section .label{color:#555}
.stats-section .section-eyebrow::before{background:#555}

/* TESTIMONIAL COLUMNS RESPONSIVE */
.testi-col-md{display:block}
.testi-col-lg{display:block}
@media(max-width:1023px){.testi-col-lg{display:none!important}}
@media(max-width:767px){.testi-col-md{display:none!important}}

/* TESTIMONIAL CARD (column variant) */
.testi-card-col{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:24px;
  padding:28px;
  width:300px;
  box-shadow:0 4px 40px rgba(0,85,255,0.06);
  flex-shrink:0;
}
.testi-card-col .tc-text{
  font-size:14px;
  color:rgba(255,255,255,0.82);
  line-height:1.75;
  margin-bottom:20px;
}
.testi-card-col .tc-footer{
  display:flex;align-items:center;gap:10px;
}
.testi-card-col .tc-avatar{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(0,85,255,0.3);
}
.testi-card-col .tc-name{
  font-size:13px;font-weight:600;line-height:1.3;
}
.testi-card-col .tc-role{
  font-size:12px;color:var(--muted);line-height:1.3;margin-top:1px;
}

/* RESPONSIVE */
@media(max-width:1024px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.testimonials-grid{grid-template-columns:repeat(2,1fr)}
.work-staircase .work-card:nth-child(2){margin-bottom:0}
.contact-grid{grid-template-columns:1fr;gap:40px}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
:root{--nav-h:0px}
.container{padding:0 20px}
/* Show full desktop pill nav on mobile — scaled down and scrollable */
.hamburger{display:none!important}
.nav-hover-wrap{display:flex}
/* Mobile dropdown — full width, stacked, no preview panel */
.nav-drop{
  min-width:calc(100vw - 32px);
  left:16px;
  transform:translateX(0) translateY(6px);
}
.nav-drop.is-open{opacity:1;pointer-events:auto;transform:translateX(0) translateY(0)}
.nav-drop .nav-drop-inner{grid-template-columns:1fr;min-height:auto}
.nav-drop .nav-drop-preview{display:none}
.nav-drop .nav-drop-inner--rev{grid-template-columns:1fr}
.nav-pill a.nav-pill-item{display:flex}
.nav-pill-item{font-size:11px;padding:7px 10px}
.nav-cta-pill{font-size:11px;padding:7px 12px}
#nav{max-width:calc(100vw - 24px)}
.nav-pill{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-pill::-webkit-scrollbar{display:none}
.services-grid{grid-template-columns:1fr}
.testimonials-grid{grid-template-columns:repeat(3,1fr)}
.work-staircase{grid-template-columns:1fr}
.values-grid{grid-template-columns:1fr}
.team-grid{grid-template-columns:1fr;max-width:100%}
.accordion-inner{grid-template-columns:1fr;padding-left:0}
.about-hero-grid{grid-template-columns:1fr}
.years-badge{font-size:60px}
.cta-strip{flex-direction:column;text-align:center}
.contact-form{padding:24px}
.form-row{grid-template-columns:1fr}
#stats-grid{grid-template-columns:1fr 1fr!important;gap:24px}
.team-card-new.member-card[style*="grid-column"]{grid-column:span 1!important}
.svc-folders-grid{grid-template-columns:1fr!important}
#svc-folders{grid-template-columns:1fr!important}
}
@media(max-width:375px){
.display-xl{font-size:36px}
.display-lg{font-size:28px}
}

/* CLIP PATH ANIM */
@keyframes clipReveal{
from{clip-path:inset(0 100% 0 0)}
to{clip-path:inset(0 0% 0 0)}
}

:root{--nav-h:0px}

/* ══════════════════════════════════════════════════════════════
   SCROLL PORTRAIT WALL HERO  (port of scroll-portrait-wall.tsx)
══════════════════════════════════════════════════════════════ */
#spw-hero{
  position:relative;
  width:100%;
  background:#030303;
  color:#fff;
  /* Push hero content down so title is naturally centred on first load */
  padding-top:calc(50vh - var(--nav-h) - 110px);
}

/* Sticky centred logo — no blend mode so gradient colours stay true */
.spw-logo-sticky{
  position:fixed;
  top:28px;left:0;right:0;
  z-index:9999;
  text-align:center;
  pointer-events:none;
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.spw-logo-img{
  height:32px;width:auto;
  display:inline-block;
}

/* Sticky centred title — mix-blend-mode:exclusion inverts text against images */
.spw-sticky-title{
  position:sticky;
  top:50%;
  z-index:20;
  transform:translateY(-50%);
  text-align:center;
  mix-blend-mode:exclusion;
  pointer-events:none;
}
.spw-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(28px,6.5vw,120px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.92;
  color:#fff;
  margin:0;
}
/* Gradient on second line — still works under mix-blend-mode:exclusion */
.spw-grad{
  background:linear-gradient(135deg,#a5b4fc 0%,#fff 50%,#fda4af 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.spw-sub{
  margin-top:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* Scattered image grid — starts well below the initial viewport */
.spw-grid{
  position:relative;
  z-index:0;
  margin-top:40vh;
  margin-bottom:0;
}
.spw-row{ display:flex;width:100% }
.spw-cell{ flex:1;aspect-ratio:2/3 }
.spw-cell:empty{ aspect-ratio:unset;height:0;overflow:hidden;flex:1 }
.spw-item{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  opacity:0;
  transform:scale(0.88);
  transition:none;
}
.spw-item img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.15);
  transition:transform .5s ease;
}
.spw-item:hover img{ transform:scale(0.95) }
.spw-caption{
  position:absolute;
  bottom:0;left:0;width:100%;
  transform:translateY(calc(100% + 4px));
  display:flex;justify-content:space-between;gap:8px;
  font-size:10px;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  padding:0 6px;
  white-space:nowrap;overflow:hidden;
}

/* CTA strip below the wall */
.spw-cta-strip{
  display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;
  padding:64px 24px 100px;
  background:#030303;
}

/* Primary CTA button */
.hero-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 40px;
  border-radius:100px;
  background:var(--accent);
  color:#fff;
  font-family:'Unbounded',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  border:none;
  box-shadow:0 8px 32px rgba(0,85,255,0.35);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.hero-cta-btn:hover{ background:#0044cc;transform:scale(1.05);box-shadow:0 14px 40px rgba(0,85,255,0.5) }
.hero-cta-btn:active{ transform:scale(0.97) }

/* Ghost secondary button */
.spw-ghost-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 40px;
  border-radius:100px;
  background:transparent;
  color:#fff;
  font-family:'Unbounded',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,0.18);
  transition:transform .2s,border-color .2s,background .2s;
}
.spw-ghost-btn:hover{ background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.35);transform:scale(1.05) }
.spw-ghost-btn:active{ transform:scale(0.97) }

@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.live-dot{animation:livePulse 2s ease-in-out infinite}

/* ── PRICING PAGE ── */
.pricing-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:48px;justify-content:center;
}
.pricing-tab{
  padding:10px 24px;border-radius:100px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;color:var(--muted);
  transition:all .25s;cursor:pointer;
}
.pricing-tab.active,.pricing-tab:hover{
  background:var(--accent);color:#fff;
  border-color:var(--accent);
}
.pricing-panel{display:none}
.pricing-panel.active{display:block}
.pricing-cards-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.pricing-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:36px 32px;
  display:flex;flex-direction:column;gap:0;
  transition:border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.pricing-card.featured{
  background:rgba(0,85,255,0.08);
  border-color:rgba(0,85,255,0.35);
  box-shadow:0 0 60px rgba(0,85,255,0.12);
}
.pricing-card.featured::before{
  content:'POPULAR';
  position:absolute;top:20px;right:20px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.12em;
  padding:4px 12px;border-radius:100px;
}
.pricing-card:hover{
  border-color:rgba(0,85,255,0.3);
  box-shadow:0 0 40px rgba(0,85,255,0.08);
}
.pricing-tier{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.pricing-price{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:clamp(32px,4vw,52px);font-weight:700;
  color:#fff;line-height:1;margin-bottom:6px;
}
.pricing-price span{font-size:18px;font-weight:400;color:var(--muted);vertical-align:super}
.pricing-tagline{font-size:13px;color:var(--muted);margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.07)}
.pricing-features{list-style:none;margin:0;padding:0;flex:1;margin-bottom:28px}
.pricing-features li{
  font-size:13px;color:rgba(255,255,255,0.75);
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:10px;
  line-height:1.5;
}
.pricing-features li::before{
  content:'✓';color:var(--accent);font-weight:700;font-size:12px;flex-shrink:0;
}
.pricing-features li.no::before{content:'–';color:var(--muted)}
.pricing-features li.no{color:var(--muted)}
.pricing-cta{
  display:block;text-align:center;
  padding:13px 28px;border-radius:100px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:rgba(220,220,220,0.95);cursor:pointer;margin-top:auto;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,0.13);
  background:linear-gradient(180deg,#1e1e1e 0%,#0c0c0c 100%);
  box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.09);
  transition:transform .25s ease,box-shadow .25s ease;
}
.pricing-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.13);
}
.pricing-cta-outline{
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.pricing-cta-outline:hover{border-color:rgba(0,85,255,0.5);background:rgba(0,85,255,0.08)}

/* ── CALENDAR / BOOKING SECTION ── */
.cal-section{
  background:#0A0A0A;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:24px;
  padding:60px;
  margin-top:80px;
}
.cal-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.cal-widget{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:28px;
}
.cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.cal-month{
  font-family:'Unbounded',sans-serif;
  font-size:15px;font-weight:700;
}
.cal-nav{
  background:none;border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;width:32px;height:32px;
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.cal-nav:hover{background:var(--accent);border-color:var(--accent)}
.cal-days-header{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:4px;margin-bottom:8px;text-align:center;
}
.cal-days-header span{font-size:11px;color:var(--muted);font-weight:600;padding:4px 0}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{
  aspect-ratio:1;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.85);
  background:transparent;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  border:1px solid rgba(255,255,255,0.08);
}
.cal-day:not(.empty):not(.past):hover{
  background:rgba(0,85,255,0.2);color:#fff;
  border-color:rgba(0,85,255,0.4);
}
.cal-day.today{background:rgba(0,85,255,0.25);color:#fff;border-color:var(--accent)}
.cal-day.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.cal-day.past{background:transparent;color:rgba(255,255,255,0.22);cursor:default;border-color:transparent}
.cal-day.empty{background:transparent;border-color:transparent;pointer-events:none}
.time-slots{margin-top:20px}
.time-slots h4{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{
  padding:8px;border-radius:8px;
  font-size:12px;font-weight:600;text-align:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.88);
  cursor:pointer;transition:all .2s;
}
.slot:hover,.slot.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.cal-confirm-btn{
  width:100%;margin-top:20px;
  padding:14px;border-radius:100px;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  border:none;cursor:pointer;
  transition:transform .3s,box-shadow .3s;
}
.cal-confirm-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,85,255,.4)}
.cal-confirm-btn:disabled{background:rgba(255,255,255,0.1);color:var(--muted);transform:none;box-shadow:none}

/* ── CASE STUDY CAROUSEL ── */
.case-carousel{position:relative;overflow:hidden}
.case-track{
  display:flex;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.case-track::-webkit-scrollbar{display:none}
.case-item{
  flex-shrink:0;width:340px;
  scroll-snap-align:start;
}
.case-item-inner{
  position:relative;height:420px;border-radius:20px;overflow:hidden;
  transition:transform .4s;
}
.case-item-inner:hover{transform:translateY(-4px)}
.case-item-inner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s;
}
.case-item-inner:hover img{transform:scale(1.05)}
.case-gradient{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.2) 50%,transparent 100%);
}
.case-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px;
}
.case-content h3{
  font-family:'Unbounded',sans-serif;
  font-size:18px;font-weight:700;
  margin-bottom:8px;color:#fff;line-height:1.3;
}
.case-content p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;margin-bottom:16px}
.case-read-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--accent);
  letter-spacing:.06em;
}
.case-read-more svg{transition:transform .2s}
.case-item-inner:hover .case-read-more svg{transform:translateX(4px)}
.case-carousel-nav{
  display:flex;gap:12px;justify-content:center;margin-top:32px;
}
.case-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  border:none;cursor:pointer;transition:background .2s,width .3s;
}
.case-dot.active{background:var(--accent);width:24px;border-radius:4px}

/* ── NEW FOOTER ── */
.footer-new{
  background:#050505;
  border-top:1px solid rgba(255,255,255,0.07);
  padding:0;
}
.footer-top{
  padding:80px 0 60px;
}
.footer-top-grid{
  display:grid;grid-template-columns:1.8fr repeat(4,1fr);
  gap:48px;
}
.footer-brand-new .wordmark{
  font-family:'Unbounded',sans-serif;
  font-size:24px;font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.footer-brand-new .tagline{
  font-size:13px;color:var(--muted);
  line-height:1.8;max-width:260px;
  margin-bottom:24px;
}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social-btn{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;
}
.footer-social-btn:hover{border-color:var(--accent);background:rgba(0,85,255,0.15)}
.footer-social-btn svg{width:15px;height:15px;fill:#fff}
.footer-nav-col h5{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;
}
.footer-nav-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-nav-col a{font-size:13px;color:rgba(255,255,255,0.55);transition:color .2s}
.footer-nav-col a:hover{color:#fff}
.footer-divider{height:1px;background:rgba(255,255,255,0.06);margin:0 40px}
.footer-bottom-new{
  padding:24px 0;
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--muted);
  flex-wrap:wrap;gap:12px;
}
.scroll-top-btn{
  width:40px;height:40px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s;
  flex-shrink:0;
}
.scroll-top-btn:hover{background:var(--accent);border-color:var(--accent)}
.scroll-top-btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── PORTFOLIO PAGE HERO ── */
.portfolio-hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.portfolio-hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--accent)}

/* ── TEAM GRID (4 people) ── */
.team-grid-4{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.team-founder{
  grid-column:span 2;
}
.team-card-new{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.team-card-new:hover{
  border-color:rgba(0,85,255,0.25);
  box-shadow:0 0 40px rgba(0,85,255,0.06);
}
.team-card-new .team-img{
  width:100%;object-fit:cover;display:block;
}
.team-card-new.founder-card .team-img{
  height:340px;
}
.team-card-new.member-card .team-img{
  height:220px;
}
.team-card-info{padding:22px}
.team-card-info h3{
  font-family:'Unbounded',sans-serif;
  font-size:15px;font-weight:700;margin-bottom:4px;
}
.team-card-info .role-text{font-size:13px;color:var(--muted)}
.team-role-badge{
  display:inline-flex;align-items:center;
  background:rgba(0,85,255,0.12);color:var(--accent);
  font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:4px 12px;border-radius:100px;margin-top:10px;
}
.team-founder-badge{background:rgba(0,85,255,0.2);color:#fff}

/* ── RESPONSIVE ADDITIONS ── */
@media(max-width:1200px){
  .footer-top-grid{grid-template-columns:1fr 1fr;gap:40px}
  .team-grid-4{grid-template-columns:1fr 1fr}
  .team-founder{grid-column:span 1}
  .team-card-new.member-card[style*="grid-column"]{grid-column:span 2!important}
  .pricing-cards-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .cal-grid{grid-template-columns:1fr;gap:40px}
  .pricing-cards-grid{grid-template-columns:1fr}
  #hero-grid{grid-template-columns:1fr!important}
  #hero-cards{display:none!important}
}
@media(max-width:768px){
#spw-hero{padding-top:calc(40vh - 80px)}
  .spw-title{font-size:clamp(26px,9vw,64px)}
  .spw-grid{margin-top:30vh}
  .spw-cta-strip{flex-direction:column;padding:48px 24px 80px}
  #stats-grid{grid-template-columns:repeat(2,1fr)!important}
  .stat-card-new{border-right:none;border-bottom:1px solid rgba(255,255,255,0.05)}
  .cal-section{padding:32px 20px}
  .footer-top-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand-new{grid-column:span 2}
  .team-grid-4{grid-template-columns:1fr}
  .team-founder{grid-column:span 1}
  .pricing-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .pricing-tab{flex-shrink:0}
  .case-item{width:280px}
  .slots-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom-new{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:480px){
  .footer-top-grid{grid-template-columns:1fr}
  .footer-brand-new{grid-column:span 1}
  .hero-img-item{height:120px;width:88px}
}

/* ── WHO WE ARE frame marquee ── */
.wwa-mq-wrap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:3px;
  overflow:hidden;
}
.wwa-mq-wrap::before,
.wwa-mq-wrap::after{
  content:'';position:absolute;
  top:0;bottom:0;width:14%;z-index:2;pointer-events:none;
}
.wwa-mq-wrap::before{ left:0;background:linear-gradient(to right,#03061a 20%,transparent); }
.wwa-mq-wrap::after{  right:0;background:linear-gradient(to left,#020718 20%,transparent); }
.wwa-mq-row{
  overflow:hidden;white-space:nowrap;display:flex;
}
.wwa-mq-inner{
  display:inline-flex;white-space:nowrap;flex-shrink:0;
}
.wwa-mq-inner span{
  font-family:'Unbounded',sans-serif;
  white-space:nowrap;display:inline-block;
  line-height:1.15;
  padding-right:clamp(1.5rem,3vw,3rem);
}
/* Row 1 — primary: large, white, bold */
#wwa-mq-1 span{
  font-size:clamp(1.15rem,2.8vw,2.6rem);
  font-weight:800;letter-spacing:-0.02em;
  color:#ffffff;
}
/* Row 2 — secondary: slightly smaller, dim, thin */
#wwa-mq-2 span{
  font-size:clamp(0.85rem,2.1vw,1.9rem);
  font-weight:300;letter-spacing:0.07em;
  color:rgba(255,255,255,0.18);
}
/* Row 3 — accent: mid-size, blue solid */
#wwa-mq-3 span{
  font-size:clamp(1rem,2.4vw,2.2rem);
  font-weight:700;letter-spacing:-0.01em;
  color:rgba(0,85,255,0.55);
}

/* ── WORD-SPACING FIX (SplitType wraps words in spans, negative letter-spacing removes gap) ── */
.split-text .word{margin-right:.18em}
.split-text .word:last-child{margin-right:0}

/* ── OUR PROCESS — DARK GLASSMORPHISM CARDS ── */
.proc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.proc-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:20px;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s,background .3s,transform .3s;
  backdrop-filter:blur(12px);
}
.proc-card::before{
  content:'';position:absolute;
  top:-40px;right:-40px;
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(0,85,255,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.proc-card:hover{
  border-color:rgba(0,85,255,0.35);
  background:rgba(0,85,255,0.06);
  transform:translateY(-3px);
}
.proc-card.proc-featured{
  border-color:rgba(0,85,255,0.4);
  background:linear-gradient(135deg,rgba(0,85,255,0.12) 0%,rgba(0,85,255,0.04) 100%);
}
.proc-step-num{
  font-family:'Unbounded',sans-serif;
  font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.proc-icon-box{
  width:46px;height:46px;
  border-radius:12px;
  background:rgba(0,85,255,0.12);
  border:1px solid rgba(0,85,255,0.2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.proc-icon-box svg{width:20px;height:20px;stroke:#0055FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proc-card h3{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(13px,1.3vw,16px);
  font-weight:700;color:#fff;
  margin-bottom:10px;letter-spacing:-.01em;
}
.proc-card p{
  font-size:13px;
  color:rgba(255,255,255,0.48);
  line-height:1.7;
}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.proc-grid{grid-template-columns:1fr}}

/* ── THE NUMBERS — GLASS STAT CARDS (on blue bg) ── */
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.num-stat-card{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:32px 24px;
  position:relative;overflow:hidden;
  transition:background .3s,border-color .3s,transform .3s;
  backdrop-filter:blur(8px);
}
.num-stat-card:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-3px);
}
.num-stat-card::after{
  content:'';position:absolute;
  bottom:-24px;right:-24px;
  width:90px;height:90px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  pointer-events:none;
}
.num-val{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(38px,4.5vw,68px);
  font-weight:900;color:#fff;
  line-height:1;letter-spacing:-.04em;
  margin-bottom:8px;
}
.num-lbl{
  font-family:'Unbounded',sans-serif;
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:10px;
}
.num-desc{
  font-size:12px;
  color:rgba(255,255,255,0.55);
  line-height:1.65;
}
@media(max-width:900px){.numbers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.numbers-grid{grid-template-columns:1fr}}

/* ── WHY CHOOSE CREONIX — Comparison Table ── */
.compare-section{position:relative;overflow:hidden}
.compare-section::before{
  content:'';position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:500px;
  background:radial-gradient(ellipse,rgba(0,85,255,0.07) 0%,transparent 65%);
  pointer-events:none;
}
.cmp-header{text-align:center;margin-bottom:55px}
.cmp-subtitle{font-size:16px;color:var(--muted);max-width:480px;line-height:1.618;margin:0 auto}
.cmp-table-wrap{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:24px;overflow:hidden;
  backdrop-filter:blur(8px);
}
.compare-hdr{
  display:grid;
  grid-template-columns:2.2fr repeat(5,1fr);
  padding:14px 28px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.025);
}
.compare-hdr span{
  font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  text-align:center;
}
.compare-hdr span:first-child{text-align:left}
.cmp-row{
  display:grid;
  grid-template-columns:2.2fr repeat(5,1fr);
  align-items:center;
  padding:18px 28px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:background .2s;
}
.cmp-row:last-child{border-bottom:none}
.cmp-row:hover{background:rgba(255,255,255,0.025)}
.cmp-row.creonix-featured{
  background:linear-gradient(90deg,rgba(0,85,255,0.13) 0%,rgba(0,85,255,0.04) 100%);
  position:relative;
}
.cmp-row.creonix-featured::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#0055FF,#00EB76);
  border-radius:0;
}
.cmp-brand{display:flex;align-items:center;gap:14px}
.cmp-logo{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded',sans-serif;
  font-size:11px;font-weight:900;
  flex-shrink:0;letter-spacing:.02em;
}
.cmp-logo.is-creonix{background:rgba(0,85,255,0.15);border:1px solid rgba(0,85,255,0.35)}
.cmp-logo.is-other{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.35)}
.cmp-info-name{
  font-size:14px;font-weight:600;color:#fff;
  line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.cmp-badge{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(90deg,#0055FF,#00C4FF);
  color:#fff;padding:3px 8px;border-radius:100px;
}
.cmp-info-desc{font-size:11px;color:rgba(255,255,255,0.35);margin-top:3px;line-height:1.4}
.cmp-cell{
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
}
.ck-yes,.ck-no,.ck-partial{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:700;
}
.ck-yes{background:rgba(0,230,100,0.1);border:1px solid rgba(0,230,100,0.3);color:#00e676}
.ck-no{background:rgba(255,60,60,0.08);border:1px solid rgba(255,60,60,0.2);color:rgba(255,80,80,0.65)}
.ck-partial{background:rgba(255,180,0,0.08);border:1px solid rgba(255,180,0,0.2);color:rgba(255,180,0,0.7)}
.ck-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);letter-spacing:.04em}
.creonix-featured .ck-label{color:rgba(255,255,255,0.7)}
.cmp-cta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin-top:40px;
  flex-wrap:wrap;
}
.cmp-cta-text{font-size:15px;color:rgba(255,255,255,0.5);line-height:1.6;max-width:420px}
@media(max-width:900px){
  .compare-hdr,.cmp-row{grid-template-columns:2fr repeat(3,1fr)}
  .cmp-hide{display:none}
}
@media(max-width:560px){
  .compare-hdr,.cmp-row{grid-template-columns:1.4fr repeat(3,1fr);padding:14px 16px}
  .cmp-info-desc{display:none}
  .cmp-logo{width:38px;height:38px;font-size:10px}
  .cmp-cta-row{flex-direction:column;align-items:flex-start}
}

/* ── NAV MORE DROPDOWN ── */
.nav-more-btn{
  background:none;border:none;
  font-size:13px;font-weight:500;letter-spacing:.04em;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;
  transition:color .2s;
  font-family:inherit;
  padding:0;
}
.nav-more-btn:hover,.nav-more-btn.is-open{color:#fff}
.nav-more-btn .chevron{
  width:10px;height:10px;
  transition:transform .2s;
}
.nav-more-btn.is-open .chevron{transform:rotate(180deg)}
.nav-mega{
  position:fixed;
  top:calc(var(--nav-h) + 4px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:520px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 70px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.08);
  display:grid;
  grid-template-columns:190px 1fr;
  overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
  z-index:990;
}
.nav-mega.is-open{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega-preview{
  background:linear-gradient(145deg,#010c2e 0%,#020a24 100%);
  padding:22px 20px;
  display:flex;flex-direction:column;gap:16px;justify-content:space-between;
}
.mega-stat-card{
  background:rgba(0,85,255,0.15);
  border:1px solid rgba(0,85,255,0.3);
  border-radius:12px;
  padding:16px;
}
.mega-stat-num{
  font-family:'Unbounded',sans-serif;
  font-size:30px;font-weight:900;color:#fff;
  letter-spacing:-.04em;line-height:1;margin-bottom:4px;
}
.mega-stat-lbl{font-size:10px;color:rgba(255,255,255,0.45);letter-spacing:.12em;text-transform:uppercase}
.mega-preview-footer{
  font-size:11px;color:rgba(255,255,255,0.35);line-height:1.6;
}
.mega-links{
  padding:12px 10px;
  display:flex;flex-direction:column;
}
.mega-link{
  display:flex;flex-direction:column;
  padding:11px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
  text-decoration:none;
}
.mega-link:hover{background:rgba(0,0,0,0.06)}
.mega-link-name{font-size:14px;font-weight:600;color:#111;margin-bottom:2px;line-height:1.3}
.mega-link-desc{font-size:11px;color:rgba(0,0,0,0.4);line-height:1.4}
@media(max-width:768px){.nav-mega{display:none}}

/* ── FOOTER v2 — Reference Style ── */
.footer-v2{
  background:#080808;
  border-top:1px solid rgba(255,255,255,0.06);
  position:relative;overflow:hidden;
}
.footer-v2-glow{
  position:absolute;bottom:-80px;left:-60px;
  width:400px;height:300px;
  background:radial-gradient(ellipse,rgba(0,85,255,0.18) 0%,transparent 70%);
  pointer-events:none;
  border-radius:50%;
}
.footer-v2-watermark{
  position:absolute;bottom:-40px;left:50%;
  transform:translateX(-50%);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(60px,14vw,180px);
  font-weight:900;
  color:rgba(255,255,255,0.028);
  white-space:nowrap;
  letter-spacing:-.04em;
  pointer-events:none;
  user-select:none;
  text-transform:uppercase;
  line-height:1;
}
.footer-v2-top{padding:72px 0 56px}
.footer-v2-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
}
.fv2-brand-col .fv2-logo{margin-bottom:18px}
.fv2-brand-col .fv2-tagline{
  font-size:13px;color:rgba(255,255,255,0.45);
  line-height:1.7;max-width:240px;margin-bottom:24px;
}
.fv2-socials{display:flex;gap:10px;flex-wrap:wrap}
.fv2-social-btn{
  width:36px;height:36px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s;
}
.fv2-social-btn:hover{border-color:var(--accent);background:rgba(0,85,255,0.15)}
.fv2-social-btn svg{width:15px;height:15px;fill:#fff}
.fv2-col-head{
  font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.35);
  margin-bottom:18px;
}
.fv2-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.fv2-col a{font-size:13px;color:rgba(255,255,255,0.5);transition:color .2s}
.fv2-col a:hover{color:#fff}
.footer-v2-badges{
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.fv2-badges-inner{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.fv2-badge{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:100px;
  transition:border-color .2s,background .2s;
}
.fv2-badge:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.15)}
.fv2-badge-name{font-size:12px;font-weight:600;color:#fff}
.fv2-badge-rating{font-size:11px;color:rgba(255,255,255,0.45)}
.fv2-badge-stars{color:#f5a623;font-size:10px;letter-spacing:1px}
.footer-v2-bottom{
  padding:20px 0;
  display:flex;align-items:center;
  justify-content:space-between;
  font-size:12px;color:rgba(255,255,255,0.3);
  flex-wrap:wrap;gap:12px;
}
.fv2-bottom-links{display:flex;align-items:center;gap:20px}
.fv2-bottom-links a{font-size:12px;color:rgba(255,255,255,0.3);transition:color .2s}
.fv2-bottom-links a:hover{color:#fff}
.fv2-divider{width:1px;height:12px;background:rgba(255,255,255,0.1)}
@media(max-width:1024px){
  .footer-v2-grid{grid-template-columns:1fr 1fr;gap:40px}
  .fv2-brand-col{grid-column:span 2}
}
@media(max-width:640px){
  .footer-v2-grid{grid-template-columns:1fr}
  .fv2-brand-col{grid-column:span 1}
  .footer-v2-bottom{flex-direction:column;align-items:flex-start}
  .fv2-badges-inner{gap:10px}
  .fv2-badge{padding:6px 10px}
}

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE — HIGH FIDELITY REDESIGN
══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ct-hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  position:relative;overflow:hidden;
  padding:120px 0 0;
}
.ct-orb{
  position:absolute;border-radius:50%;
  pointer-events:none;filter:blur(80px);
}
.ct-orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,85,255,0.18) 0%,transparent 70%);
  top:-100px;right:-150px;
  animation:orbFloat1 8s ease-in-out infinite;
}
.ct-orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,235,118,0.1) 0%,transparent 70%);
  bottom:100px;left:-80px;
  animation:orbFloat2 10s ease-in-out infinite;
}
.ct-orb-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(0,180,255,0.08) 0%,transparent 70%);
  top:40%;left:40%;
  animation:orbFloat1 12s ease-in-out infinite reverse;
}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.05)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}

.ct-hero-inner{position:relative;z-index:1;max-width:760px}
.ct-avail-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,230,100,0.08);
  border:1px solid rgba(0,230,100,0.22);
  border-radius:100px;padding:8px 18px 8px 12px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.8);
  margin-bottom:40px;
}
.ct-pulse-dot{
  width:8px;height:8px;
  background:#00e676;border-radius:50%;
  flex-shrink:0;
  animation:ctPulse 2s ease-in-out infinite;
}
@keyframes ctPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,230,100,0.5)}
  50%{box-shadow:0 0 0 6px rgba(0,230,100,0)}
}
.ct-hero-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(48px,7vw,96px);
  font-weight:400;
  line-height:.98;letter-spacing:-.04em;
  color:#fff;margin-bottom:32px;
  overflow:hidden;
}
.ct-line{display:block;overflow:hidden}
.ct-word{display:inline-block}
.ct-italic{font-style:italic;color:rgba(255,255,255,0.55)}
.ct-grad{
  background:linear-gradient(90deg,#0055FF,#00C4FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ct-hero-sub{
  font-size:clamp(16px,1.8vw,20px);
  color:rgba(255,255,255,0.72);
  line-height:1.65;max-width:520px;margin-bottom:48px;
}
.ct-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ct-pill-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:100px;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.1);
  color:#fff;font-size:14px;font-weight:500;
  font-family:inherit;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  text-decoration:none;
  backdrop-filter:blur(8px);
}
.ct-pill-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.35);transform:translateY(-1px)}
.ct-pill-btn--accent{
  background:#0055FF;border-color:transparent;
  box-shadow:0 4px 24px rgba(0,85,255,0.35);
}
.ct-pill-btn--accent:hover{background:#0044cc;transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,85,255,0.45)}

/* Marquee */
.ct-marquee-wrap{
  position:relative;overflow:hidden;
  padding:28px 0;margin-top:60px;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.015);
}
.ct-marquee-track{
  display:inline-flex;gap:32px;align-items:center;
  white-space:nowrap;
  animation:ctMarquee 22s linear infinite;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
@keyframes ctMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ct-dot-sep{color:rgba(255,255,255,0.12)}

/* Scroll cue */
.ct-scroll-cue{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ct-scroll-line{
  width:1px;height:60px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.3),transparent);
  animation:ctScrollLine 2s ease-in-out infinite;
}
@keyframes ctScrollLine{0%,100%{opacity:.3;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* ── Main Form + Info Section ── */
.ct-main-section{padding:120px 0 80px}
.ct-main-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:48px;align-items:start;
}
.ct-form-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:24px;
  padding:48px;
  backdrop-filter:blur(16px);
  position:relative;overflow:hidden;
}
.ct-form-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,85,255,0.4),transparent);
}
.ct-form-top{margin-bottom:40px}
.ct-form-tag{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.ct-form-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(22px,2.5vw,32px);
  font-weight:700;line-height:1.2;
  color:#fff;margin-bottom:12px;letter-spacing:-.02em;
}
.ct-form-sub{font-size:14px;color:rgba(255,255,255,0.62);line-height:1.65}
.ct-form-body{display:flex;flex-direction:column;gap:20px}
.ct-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}
.ct-field input,
.ct-field select,
.ct-field textarea{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:14px 18px;
  color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder{color:rgba(255,255,255,0.35)}
.ct-field select{
  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='M2 4l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.ct-field select option{background:#0d0d0d;color:#fff}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus{
  border-color:rgba(0,85,255,0.6);
  background:rgba(0,85,255,0.05);
  box-shadow:0 0 0 3px rgba(0,85,255,0.12);
}
.ct-field textarea{min-height:130px;resize:vertical;line-height:1.65}
.ct-submit-btn{
  width:100%;padding:16px 32px;
  background:linear-gradient(135deg,#0055FF,#0099FF);
  color:#fff;font-size:15px;font-weight:700;
  border:none;border-radius:12px;
  cursor:pointer;font-family:inherit;
  transition:box-shadow .25s,transform .25s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.ct-submit-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
  opacity:0;transition:opacity .2s;
}
.ct-submit-btn:hover{
  box-shadow:0 8px 40px rgba(0,85,255,0.45);
  transform:translateY(-2px);
}
.ct-submit-btn:hover::after{opacity:1}

/* Info column */
.ct-info-col{display:flex;flex-direction:column;gap:16px}
.ct-info-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;padding:28px;
  backdrop-filter:blur(12px);
}
.ct-studio-card{
  background:linear-gradient(135deg,rgba(0,85,255,0.1),rgba(0,85,255,0.03));
  border-color:rgba(0,85,255,0.2);
  position:relative;overflow:hidden;
}
.ct-studio-glow{
  position:absolute;top:-40px;right:-40px;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(0,85,255,0.25),transparent 70%);
  pointer-events:none;
}
.ct-studio-label{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(0,150,255,0.8);margin-bottom:20px;
}
.ct-studio-stat-row{display:flex;gap:20px;margin-bottom:20px}
.ct-studio-stat{display:flex;flex-direction:column;gap:4px}
.ct-stat-num{
  font-family:'Unbounded',sans-serif;
  font-size:26px;font-weight:900;color:#fff;line-height:1;
}
.ct-stat-lbl{font-size:10px;color:rgba(255,255,255,0.62);text-transform:uppercase;letter-spacing:.1em}
.ct-studio-desc{font-size:13px;color:rgba(255,255,255,0.62);line-height:1.65}
.ct-detail-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06);
}
.ct-detail-icon{
  width:36px;height:36px;flex-shrink:0;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.8);
}
.ct-detail-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:3px}
.ct-detail-value{font-size:13px;font-weight:600;color:#fff}
.ct-detail-value a{color:#fff;text-decoration:none}
.ct-socials-card{padding:24px 28px}
.ct-socials-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:14px}
.ct-socials-row{display:flex;flex-wrap:wrap;gap:8px}
.ct-social-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  font-size:12px;font-weight:500;color:rgba(255,255,255,0.85);
  text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.ct-social-chip:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:#fff}
.ct-social-chip--wa{border-color:rgba(37,211,102,0.25);color:rgba(37,211,102,0.8)}
.ct-social-chip--wa:hover{background:rgba(37,211,102,0.1);color:#25d366}

/* ── Ways to connect ── */
.ct-ways-section{position:relative}
.ct-ways-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.ct-way-card{
  position:relative;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  padding:40px 32px;
  overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
  cursor:default;
}
.ct-way-card:hover{
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.ct-way-card--featured{
  background:linear-gradient(145deg,rgba(0,85,255,0.12),rgba(0,85,255,0.04));
  border-color:rgba(0,85,255,0.3);
}
.ct-way-card--featured:hover{border-color:rgba(0,85,255,0.55)}
.ct-way-icon{
  width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:24px;
  transition:background .2s;
}
.ct-way-card--featured .ct-way-icon{
  background:rgba(0,85,255,0.2);border-color:rgba(0,85,255,0.35);
  color:#60a5fa;
}
.ct-way-card:hover .ct-way-icon{background:rgba(255,255,255,0.1)}
.ct-way-num{
  font-family:'Unbounded',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,0.2);margin-bottom:12px;
}
.ct-way-title{
  font-family:'Unbounded',sans-serif;
  font-size:20px;font-weight:700;color:#fff;
  margin-bottom:12px;letter-spacing:-.02em;
}
.ct-way-desc{font-size:14px;color:rgba(255,255,255,0.68);line-height:1.7;margin-bottom:28px}
.ct-way-action{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,0.8);
  text-decoration:none;border:none;background:none;
  cursor:pointer;font-family:inherit;padding:0;
  transition:color .2s,gap .2s;
}
.ct-way-action:hover{color:#fff;gap:12px}
.ct-way-card--featured .ct-way-action{color:rgba(100,165,250,0.8)}
.ct-way-card--featured .ct-way-action:hover{color:#60a5fa}
.ct-way-badge{
  position:absolute;top:20px;right:20px;
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,85,255,0.9);color:#fff;
  padding:4px 10px;border-radius:100px;
}
.ct-way-glow{
  position:absolute;bottom:-60px;right:-60px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,0.04),transparent 70%);
  pointer-events:none;
  transition:transform .4s;
}
.ct-way-card--featured .ct-way-glow{background:radial-gradient(circle,rgba(0,85,255,0.15),transparent 70%)}
.ct-way-card:hover .ct-way-glow{transform:scale(1.4)}

/* ── FAQ ── */
.ct-faq-section{position:relative}
.ct-faq-inner{
  display:grid;grid-template-columns:320px 1fr;gap:80px;align-items:start;
}
.ct-faq-left{position:sticky;top:140px}
.ct-faq-right{display:flex;flex-direction:column}
.ct-faq-item{border-bottom:1px solid rgba(255,255,255,0.07)}
.ct-faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;text-align:left;
  font-size:15px;font-weight:600;color:#fff;
  background:none;border:none;cursor:pointer;
  font-family:inherit;
  transition:color .2s;
}
.ct-faq-q:hover{color:rgba(255,255,255,0.7)}
.ct-faq-icon{
  width:28px;height:28px;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:rgba(255,255,255,0.5);
  transition:transform .3s,background .2s,border-color .2s;
  line-height:1;
}
.ct-faq-item.open .ct-faq-icon{
  transform:rotate(45deg);
  background:rgba(0,85,255,0.15);
  border-color:rgba(0,85,255,0.4);
  color:#60a5fa;
}
.ct-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.16,1,.3,1);
}
.ct-faq-a p{
  padding-bottom:22px;
  font-size:14px;color:rgba(255,255,255,0.68);line-height:1.75;
}
.ct-faq-item.open .ct-faq-a{max-height:320px}
.ct-faq-a p strong{color:#fff;font-weight:700}

/* Responsive */
@media(max-width:1024px){
  .ct-main-grid{grid-template-columns:1fr;max-width:680px;margin:0 auto}
  .ct-faq-inner{grid-template-columns:1fr}
  .ct-faq-left{position:static;max-width:480px}
}
@media(max-width:768px){
  .ct-hero-title{font-size:clamp(36px,10vw,60px)}
  .ct-hero{min-height:90vh;padding:80px 0 0}
  .ct-ways-grid{grid-template-columns:1fr}
  .ct-form-card{padding:28px 24px}
  .ct-field-row{grid-template-columns:1fr}
  .ct-hero-actions{flex-direction:column;align-items:flex-start}
  .ct-scroll-cue{display:none}
}

/* ══════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE
══════════════════════════════════════════════════════════════ */

/* Back button */
.svc-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);
  background:none;border:none;padding:0;cursor:pointer;
  transition:color .2s,gap .2s;
  position:fixed;top:26px;left:80px;z-index:999;
}
.svc-back svg{transition:transform .2s}
.svc-back:hover{color:#fff;gap:12px}
.svc-back:hover svg{transform:translateX(-3px)}

/* ── Service switcher bar ── */
.svc-switcher{
  position:relative;
  z-index:2;
  margin-bottom:40px;
}
.svc-switcher-track{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:6px 0;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:100px;
  padding:6px 8px;
  width:fit-content;
  max-width:100%;
}
.svc-switcher-track::-webkit-scrollbar{display:none}
.svc-switcher-item{
  flex-shrink:0;
  padding:7px 18px;
  border-radius:100px;
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,0.5);
  background:transparent;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:color .2s,background .2s;
}
.svc-switcher-item:hover{
  color:#fff;
  background:rgba(255,255,255,0.07);
}
.svc-switcher-item.active{
  color:#fff;
  background:rgba(0,85,255,0.25);
}
@media(max-width:768px){
  .svc-switcher{margin-bottom:28px}
  .svc-switcher-item{font-size:12px;padding:6px 13px}
}

/* Hero */
.svc-hero{
  min-height:82vh;
  display:flex;align-items:flex-end;
  padding:0 0 72px;
  position:relative;
}
.svc-hero-bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(145deg,#050510 0%,#0a0a1a 60%,#050505 100%);
}
.svc-hero-orb{
  position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
.svc-hero-orb-1{
  width:700px;height:700px;top:-200px;right:-200px;
  background:radial-gradient(circle,rgba(0,85,255,0.22) 0%,transparent 70%);
}
.svc-hero-orb-2{
  width:400px;height:400px;bottom:-100px;left:-100px;
  background:radial-gradient(circle,rgba(0,200,120,0.1) 0%,transparent 70%);
}
.svc-hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 420px;
  gap:80px;align-items:end;width:100%;
}
.svc-hero-num{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--accent);margin-bottom:24px;
}
.svc-hero-title{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:clamp(32px,5vw,80px);
  font-weight:400;line-height:1.05;letter-spacing:-.02em;
  color:#fff;margin-bottom:28px;
  overflow:visible;word-break:normal;
}
.svc-hero-title span{
  background:linear-gradient(90deg,#0055FF,#00C4FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.svc-hero-desc{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:clamp(15px,1.5vw,18px);
  color:rgba(255,255,255,0.65);
  line-height:1.75;max-width:560px;margin-bottom:44px;
}
.svc-hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.svc-hero-tag{
  font-family:'Nohemi','DM Sans',sans-serif;
  padding:6px 16px;border-radius:100px;
  font-size:12px;font-weight:600;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.05);
}
.svc-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.svc-btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:100px;
  background:linear-gradient(180deg,#1e1e1e 0%,#0c0c0c 100%);
  color:rgba(220,220,220,0.95);font-size:14px;font-weight:700;
  border:1px solid rgba(255,255,255,0.13);cursor:pointer;font-family:inherit;
  position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 2px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.09);
}
.svc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.6)}
.svc-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:100px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s,transform .2s;
}
.svc-btn-secondary:hover{background:rgba(255,255,255,0.14);transform:translateY(-2px)}

/* Hero right — visual card */
.svc-hero-visual{
  position:relative;
}
.svc-hero-img{
  width:100%;height:auto;display:block;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
}
.svc-hero-badge{
  position:absolute;bottom:-20px;left:-20px;
  background:#fff;color:#111;
  padding:16px 22px;border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
  display:flex;align-items:center;gap:12px;
}
.svc-hero-badge-num{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:28px;font-weight:600;color:#0055FF;line-height:1;
}
.svc-hero-badge-lbl{font-size:11px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.08em}

/* Deliverables */
.svc-section{padding:100px 0}
.svc-section-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.svc-section-title{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:clamp(28px,3.5vw,48px);
  font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1.1;
  margin-bottom:55px;
}
.svc-deliverables-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.svc-del-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:32px;
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.svc-del-card:hover{
  border-color:rgba(0,85,255,0.4);
  transform:translateY(-4px);
  box-shadow:0 16px 50px rgba(0,0,0,0.25);
}
.svc-del-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(0,85,255,0.2),rgba(0,85,255,0.05));
  border:1px solid rgba(0,85,255,0.25);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:#60a5fa;
}
.svc-del-name{
  font-size:15px;font-weight:700;color:#fff;margin-bottom:8px;
}
.svc-del-desc{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.65}

/* Process */
.svc-process-section{
  padding:100px 0;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.svc-process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  margin-top:55px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;overflow:hidden;
}
.svc-step{
  padding:40px 32px;
  background:rgba(255,255,255,0.02);
  border-right:1px solid rgba(255,255,255,0.07);
  transition:background .3s;
}
.svc-step:last-child{border-right:none}
.svc-step:hover{background:rgba(0,85,255,0.06)}
.svc-step-num{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:36px;font-weight:300;
  color:rgba(0,85,255,0.35);
  line-height:1;margin-bottom:20px;
}
.svc-step-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:10px}
.svc-step-desc{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.65}

/* Why us strip */
.svc-why-section{padding:100px 0}
.svc-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.svc-why-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc-why-stat{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;padding:28px;
}
.svc-why-stat-num{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:38px;font-weight:600;
  background:linear-gradient(90deg,#0055FF,#00C4FF);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:8px;
}
.svc-why-stat-lbl{font-size:13px;color:rgba(255,255,255,0.55)}
.svc-why-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:32px}
.svc-why-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6;
}
.svc-why-list li::before{
  content:'';flex-shrink:0;
  width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:linear-gradient(135deg,#0055FF,#00C4FF);
  display:flex;align-items:center;justify-content:center;
}

/* CTA */
.svc-cta-section{
  padding:100px 0;
}
.svc-cta-inner{
  background:linear-gradient(135deg,rgba(0,85,255,0.15),rgba(0,85,255,0.04));
  border:1px solid rgba(0,85,255,0.25);
  border-radius:28px;padding:72px 64px;
  text-align:center;position:relative;overflow:hidden;
}
.svc-cta-inner::before{
  content:'';position:absolute;
  top:-80px;left:50%;transform:translateX(-50%);
  width:400px;height:300px;
  background:radial-gradient(circle,rgba(0,85,255,0.2),transparent 70%);
  pointer-events:none;
}
.svc-cta-title{
  font-family:'Nohemi','DM Sans',sans-serif;
  font-size:clamp(28px,4vw,52px);
  font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1.1;
  margin-bottom:20px;
}
.svc-cta-sub{font-size:16px;color:rgba(255,255,255,0.6);margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto}
.svc-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Responsive */
@media(max-width:1024px){
  .svc-hero-inner{grid-template-columns:1fr}
  .svc-hero-visual{
    display:block;
    margin-top:48px;
    max-width:560px;
  }
  .svc-hero-badge{bottom:-16px;left:-12px;padding:12px 16px}
  .svc-process-grid{grid-template-columns:repeat(2,1fr)}
  .svc-why-grid{grid-template-columns:1fr}
  .svc-deliverables-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .svc-hero{min-height:auto;padding:100px 0 60px}
  .svc-hero-title{font-size:clamp(36px,9vw,60px)}
  .svc-hero-visual{
    max-width:100%;
    margin-top:36px;
  }
  .svc-hero-img{height:auto;border-radius:16px}
  .svc-hero-badge{
    bottom:-12px;left:-8px;
    padding:10px 14px;border-radius:12px;
  }
  .svc-hero-badge-num{font-size:22px}
  .svc-process-grid{grid-template-columns:1fr}
  .svc-step{border-right:none;border-bottom:1px solid rgba(255,255,255,0.07)}
  .svc-deliverables-grid{grid-template-columns:1fr}
  .svc-why-stats{grid-template-columns:1fr 1fr}
  .svc-cta-inner{padding:48px 28px}
  .svc-back{left:20px;top:20px}
}

/* ══════════════════════════════════════════════════════════════
   CEO / FOUNDER CARD — animated rings + orbiting dots
══════════════════════════════════════════════════════════════ */
.ceo-section-wrap{
  display:flex;justify-content:center;
  padding:70px 20px;overflow:hidden;
}
.ceo-card-wrap{
  position:relative;display:inline-block;
  max-width:440px;width:100%;
}
.ceo-glow-ring{
  position:absolute;inset:-18px;border-radius:28px;
  border:1px solid rgba(0,85,255,0.4);
  animation:ceoRingPulse 3s ease-in-out infinite;
  pointer-events:none;
}
.ceo-glow-ring.ring-2{
  inset:-36px;border-color:rgba(0,235,118,0.2);
  animation-delay:-1.5s;
}
@keyframes ceoRingPulse{
  0%,100%{opacity:0.5;box-shadow:0 0 0 0 transparent}
  50%{opacity:1;box-shadow:0 0 28px rgba(0,85,255,0.14)}
}
.ceo-orbit-wrap{
  position:absolute;top:50%;left:50%;
  width:520px;height:520px;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  animation:ceoOrbitSpin 9s linear infinite;
}
.ceo-orbit-wrap.orbit-2{
  width:420px;height:420px;
  animation-direction:reverse;
  animation-duration:13s;
}
.ceo-orbit-dot{
  position:absolute;top:-5px;left:50%;
  transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 22px rgba(0,85,255,0.5);
}
.ceo-orbit-dot.dot-green{
  background:#00EB76;
  box-shadow:0 0 10px #00EB76,0 0 22px rgba(0,235,118,0.45);
}
@keyframes ceoOrbitSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.ceo-bg-glow{
  position:absolute;inset:-80px;
  background:radial-gradient(ellipse at center,rgba(0,85,255,0.07) 0%,transparent 65%);
  pointer-events:none;
  border-radius:50%;
}
.ceo-card{
  position:relative;z-index:1;
}
.team-card-new.founder-card.ceo-card .team-img{
  height:380px;object-fit:cover;object-position:top center;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — HORIZONTAL SLIDE (two rows)
══════════════════════════════════════════════════════════════ */
.testi-slide-section{padding:60px 0 0;overflow:hidden}
.testi-row-mobile-only{display:none}
@media(max-width:768px){.testi-row-mobile-only{display:block}}
.testi-hrow-wrap{
  overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
  mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);
}
.testi-hrow-wrap+.testi-hrow-wrap{margin-top:20px}
.testi-hrow-track{
  display:flex;gap:20px;width:max-content;
  will-change:transform;
}
.testi-card-h{
  width:320px;flex-shrink:0;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;padding:24px;
}
.testi-card-h .tc-text{
  font-size:13.5px;color:rgba(255,255,255,0.78);
  line-height:1.8;margin-bottom:18px;
}
.testi-card-h .tc-footer{display:flex;align-items:center;gap:12px}
.testi-card-h .tc-avatar{
  width:38px;height:38px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(0,85,255,0.3);
}
.testi-card-h .tc-name{font-size:13px;font-weight:600;color:#fff}
.testi-card-h .tc-role{font-size:11px;color:var(--muted);margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO — PERFORMANCE
══════════════════════════════════════════════════════════════ */
.portfolio-section{contain:layout style paint}

/* ══════════════════════════════════════════════════════════════
   SECURITY — image protection
══════════════════════════════════════════════════════════════ */
img{-webkit-user-drag:none;user-drag:none}
body{-webkit-touch-callout:none}
.portfolio-card img,.team-img,.tc-avatar,.ceo-card img{
  pointer-events:none;
}
.no-select{-webkit-user-select:none;user-select:none}

/* NAV LOGO full wordmark */
.site-logo-mark img{
  display:block;width:auto;
}
.site-logo-mark{
  display:flex;align-items:center;
}

/* ═══════════════════════════════════════════════
   MOBILE COMPREHENSIVE FIX — ≤768px & ≤480px
═══════════════════════════════════════════════ */

/* Nav — pill nav stays visible on mobile (scaled down + scrollable) */

/* Hero logo */
@media(max-width:768px){
  .spw-logo-sticky { top:16px; }
  .spw-logo-img { height:24px; }
}

/* Hero title */
@media(max-width:768px){
  .spw-title { font-size:clamp(20px,8vw,42px) !important; line-height:1.1; }
  .spw-sub { font-size:11px; }
  #spw-hero { padding-top:calc(35vh - 60px); }
}

/* Flowart panels */
@media(max-width:768px){
  .fa-inner { padding:1.5rem 1.2rem !important; gap:12px !important; }
  .fa-inner h2 { font-size:clamp(2rem,10vw,3.2rem) !important; line-height:.92 !important; }
  /* Marquee fix — prevent text wrapping inside scroll ticker */
  .wwa-mq-inner { white-space:nowrap !important; }
  .wwa-mq-inner span { white-space:nowrap !important; font-size:clamp(0.75rem,3vw,1rem) !important; }
  .wwa-frame { height:clamp(100px,22vw,180px) !important; }
}
@media(max-width:1024px){
  #svc-folders { grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:480px){
  .fa-inner h2 { font-size:clamp(1.8rem,11vw,2.8rem) !important; }
  #svc-folders { grid-template-columns:1fr !important; gap:10px !important; }
  .svc-folder { padding:16px !important; }
}

/* Portfolio grid */
@media(max-width:480px){
  .portfolio-grid, .image-grid { grid-template-columns:1fr !important; }
}

/* CEO card */
@media(max-width:480px){
  .ceo-orbit-wrap { width:280px !important; height:280px !important; }
  .ceo-orbit-wrap.orbit-2 { width:220px !important; height:220px !important; }
  .ceo-section-wrap { overflow:hidden; padding:40px 16px; }
  .ceo-glow-ring { inset:-10px; }
  .ceo-glow-ring.ring-2 { inset:-20px; }
}

/* Testimonials */
@media(max-width:480px){
  .testi-card-h { width:260px !important; padding:16px !important; }
  .testi-slide-section { padding:40px 0 0; }
}

/* Contact form */
@media(max-width:480px){
  .ct-form-card { padding:20px 16px !important; }
  .ct-hero { padding:70px 0 0; }
  .ct-hero-title { font-size:clamp(28px,9vw,48px) !important; }
}

/* Service detail back button */
@media(max-width:768px){
  .svc-back { left:16px !important; top:16px !important; }
}

/* Stats grid on tiny screens */
@media(max-width:360px){
  #stats-grid { grid-template-columns:1fr !important; }
}

/* General text sizing */
@media(max-width:480px){
  body { font-size:14px; }
  .container { padding:0 16px; }
  h1, h2 { word-break:break-word; }
}

/* Pricing on mobile */
@media(max-width:480px){
  .pricing-card { padding:24px 16px !important; }
  .pricing-tabs { gap:6px; }
  .pricing-tab { font-size:11px; padding:7px 12px; }
}

/* CTA strip on mobile */
@media(max-width:480px){
  .spw-cta-strip { padding:32px 16px 60px; gap:12px; }
  .hero-cta-btn, .spw-ghost-btn { width:100%; justify-content:center; font-size:14px; }
}

/* Calendar on mobile */
@media(max-width:480px){
  .slots-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .time-slot { font-size:12px; padding:10px 6px; }
}

/* Mobile menu improvements */
#mobile-menu {
  z-index:10000;
  background:rgba(8,8,8,0.98);
  backdrop-filter:blur(20px);
}
#mobile-menu a {
  font-size:clamp(22px,8vw,32px);
}

/* Prevent horizontal scroll on all pages */
body { overflow-x:hidden; }
/* clip (not hidden) so position:sticky works inside pages */
.page { overflow-x:clip; }

/* ============================================================
   NEW HERO — exact match to attached reference design
   ============================================================ */

/* Hide old sticky hero logo */
.spw-logo-sticky { display: none !important; }

#spw-hero.new-hero {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: unset;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- Background image ---- */
.nh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.nh-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Dark gradient fade at bottom so gallery blends in */
.nh-bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.18) 40%,
    rgba(0,0,0,0.72) 72%,
    rgba(0,0,0,0.97) 100%
  );
}

/* ---- Center content — shifted down for breathing room ---- */
.nh-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 90px 32px 0;
  width: 100%;
}

/* ---- Logo — 20% smaller, more breathing room above texts ---- */
.nh-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 44px;
}
.nh-logo-img {
  height: 46px;
  width: auto;
  display: block;
}

/* ---- Tagline — Nohemi Light, 10% bigger ---- */
.nh-tagline {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  letter-spacing: .08em;
  margin-bottom: 18px;
}

/* ---- Main headline — Nohemi Medium, 20% smaller ---- */
.nh-h1 {
  font-family: 'Nohemi', 'Unbounded', sans-serif;
  font-size: clamp(38px, 6vw, 90px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 32px;
}
.nh-h1-line { display: block; }

/* "build" — Playfair Display bold italic */
.nh-h1 em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: .96em;
  letter-spacing: -.01em;
  color: #fff;
}
/* "Brands" — Nohemi medium */
.nh-h1 b {
  font-weight: 500;
  color: #fff;
}

/* ---- Badge — flag circles, no bullets ---- */
.nh-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  background: rgba(18,18,18,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 10px 20px 10px 10px;
  margin-bottom: 34px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: .02em;
}
.nh-flags {
  display: flex;
  align-items: center;
}
.nh-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  font-size: 15px;
  line-height: 1;
  margin-left: -6px;
  flex-shrink: 0;
}
.nh-flag:first-child { margin-left: 0; }
.nh-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ---- CTA button — liquid metal ---- */
.nh-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  color: rgba(220,220,220,0.95);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(180deg, #1e1e1e 0%, #0c0c0c 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.09);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nh-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.13);
}
.nh-cta:active { transform: translateY(0); }
.nh-cta-arrow {
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
}

/* ---- Gallery — two opposite-direction rows, NO top fade ---- */
.nh-gallery {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* no mask — images should show fully */
}
.nh-gallery-row {
  overflow: hidden;
  width: 100%;
}
.nh-gallery-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: 0;
}

/* Row 1 scrolls RIGHT (→) */
.nh-row-fwd .nh-gallery-track { animation: nhFwd 55s linear infinite; }
/* Row 2 scrolls LEFT (←) */
.nh-row-rev .nh-gallery-track { animation: nhRev 55s linear infinite; }

@keyframes nhFwd { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes nhRev { from { transform: translateX(-50%) } to { transform: translateX(0) } }

/* Each half-wrapper clips to show either top or bottom row of the strip */
.nh-half-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
/* Height of each visible strip row — 15% smaller */
.nh-half-wrap {
  height: clamp(93px, 11vw, 170px);
}
/* Full image is double that height */
.nh-strip-full {
  display: block;
  height: calc(clamp(93px, 11vw, 170px) * 2);
  width: auto;
  flex-shrink: 0;
}
/* Top half: image starts at top (natural) */
.nh-top .nh-strip-full {
  margin-top: 0;
}
/* Bottom half: push image up so bottom row is visible */
.nh-bottom .nh-strip-full {
  margin-top: calc(clamp(93px, 11vw, 170px) * -1);
}

/* Mobile */
@media (max-width: 768px) {
  .nh-content { padding: 56px 20px 32px; }
  .nh-logo-img { height: 44px; }
  .nh-h1 { font-size: clamp(32px, 9.5vw, 64px); }
  .nh-tagline { font-size: 14px; }
  .nh-badge { font-size: 12px; }
  .nh-cta { font-size: 12px; padding: 11px 24px; border-radius: 12px; }
  .nh-half-wrap { height: 90px; }
  .nh-strip-full { height: 180px; }
}

/* GSAP initial states */
#nh-logo, #nh-tagline, #nh-h1, #nh-badge, #nh-cta { opacity: 0; transform: translateY(24px); }
#nh-gallery { opacity: 0; }

/* ============================================================
   FLOATING ARC SECTION — kinetic collage / premium card flow
   ============================================================ */

.fac-section {
  background: #f4f4f2;
  padding: 110px 0 0;
  text-align: center;
  overflow: hidden;
}

/* --- Text --- */
.fac-eyebrow {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 20px;
}
.fac-h2 {
  font-family: 'Nohemi', 'Unbounded', sans-serif;
  font-size: clamp(30px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #111;
  margin: 0 0 20px;
  padding: 0 24px;
}
.fac-h2 em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #444;
  font-size: .95em;
}
.fac-sub {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.35vw, 18px);
  color: #666;
  line-height: 1.72;
  max-width: 56ch;
  margin: 0 auto 72px;
  padding: 0 24px;
}

/* --- Stage — orbit center sits at its bottom edge --- */
.fac-scene {
  position: relative;
  width: 100%;
  /* height set dynamically by JS per breakpoint */
  height: 460px;
  overflow: hidden;
  /* Fade cards as they reach the bottom of the arc */
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

/* --- Individual floating card — position fully controlled by GSAP --- */
.fac-card {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  cursor: pointer;
}

.fac-card-inner {
  width: 160px;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.13),
    0 2px 6px rgba(0,0,0,0.08);
  transition: box-shadow .4s ease;
  background: #e0e0e0;
}
.fac-card:hover .fac-card-inner {
  box-shadow:
    0 22px 64px rgba(0,0,0,0.22),
    0 4px 16px rgba(0,0,0,0.12);
}

.fac-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease, filter .5s ease;
  filter: grayscale(12%);
  pointer-events: none;
  user-select: none;
}
.fac-card:hover .fac-card-inner img {
  transform: scale(1.07);
  filter: grayscale(0%);
}

/* Dark gradient overlay */
.fac-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.06) 55%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  pointer-events: none;
}
.fac-cat {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Nohemi', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding: 4px 10px;
}
.fac-title {
  font-family: 'Nohemi', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .fac-scene { height: 380px; }
}
/* Mobile: only reduce text padding/margin — JS controls scene height & card sizes */
@media (max-width: 768px) {
  .fac-section { padding: 60px 0 0; }
  .fac-br      { display: none; }
  .fac-sub     { margin-bottom: 24px; }
}
@media (max-width: 480px) {
  .fac-section { padding: 48px 0 0; }
  .fac-sub     { margin-bottom: 16px; }
  .fac-h2      { font-size: clamp(24px, 7vw, 36px); }
}

/* ============================================================
   THIRD SECTION — Services showcase (matches design reference)
   ============================================================ */
.ts-section {
  background: #080808;
  padding: 100px 0 80px;
  color: #fff;
}
.ts-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Centered header */
.ts-header {
  text-align: center;
  margin: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ts-badge {
  display: inline-block;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #888;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 6px 18px;
}
.ts-heading {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #f2f2f2;
  margin: 0;
}
.ts-heading em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #f2f2f2;
}

/* ── What We Do — sticky scroll split layout ── */
.ts-sticky-scene {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: start;
  margin-top: 60px;
}

/* LEFT: sticky image panel */
.ts-sticky-img-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 36px 40px 0;
}

.ts-img-stage {
  position: relative;
  width: 100%;
  max-width: 740px;
  height: 680px;
}

.ts-stage-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}

.ts-stage-img.ts-stage-active {
  opacity: 1;
  transform: scale(1);
}

/* RIGHT: sticky text panel + scroll spacer */
.ts-text-panel {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ts-text-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 40px 0 40px 36px;
}

.ts-slides-wrap {
  position: relative;
  width: 100%;
  min-height: 500px;
}

.ts-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}

.ts-slide.ts-slide-active {
  pointer-events: auto;
}

.ts-slide .ts-name,
.ts-slide .ts-line,
.ts-slide .ts-desc,
.ts-slide .ts-link {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}

.ts-slide.ts-slide-active .ts-name,
.ts-slide.ts-slide-active .ts-line,
.ts-slide.ts-slide-active .ts-desc,
.ts-slide.ts-slide-active .ts-link {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll spacer gives the scene its total height (300vh + 100vh sticky = 400vh total) */
.ts-scroll-spacer {
  height: 300vh;
  flex-shrink: 0;
}

.ts-cta {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ts-cta.ts-revealed {
  opacity: 1;
  transform: translateY(0);
}
.ts-name {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(32px, 3.3vw, 46px);
  font-weight: 500;
  color: #f0f0f0;
  margin: 0 0 16px;
  letter-spacing: -.02em;
}
.ts-line {
  display: block;
  width: 36px;
  height: 2px;
  background: #0055ff;
  margin-bottom: 20px;
  border-radius: 2px;
}
.ts-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(18px, 1.65vw, 23px);
  font-weight: 300;
  color: #c0c0c0;
  line-height: 1.72;
  margin: 0 0 28px;
}
.ts-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Nohemi', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #0055ff;
  text-decoration: none;
  letter-spacing: .03em;
  transition: opacity .25s ease;
}
.ts-link:hover { opacity: .7; }
.ts-arr { transition: transform .25s ease; }
.ts-link:hover .ts-arr { transform: translateX(3px); }

/* Mobile spacer: hidden on desktop, drives scroll height on mobile */
.ts-mobile-spacer { display: none; }

/* ── Mobile / tablet: sticky split — text top, image bottom ── */
@media (max-width: 960px) {
  /* Scene: sticky 100vh container. Break out of container padding with negative margins */
  .ts-sticky-scene {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* override desktop align-items:start so panels fill width */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;         /* iOS Safari small viewport */
    margin-top: 0;
    margin-left: -48px;     /* break out of container padding */
    margin-right: -48px;
    grid-template-columns: unset; /* clear desktop grid */
  }

  /* Text panel — visually first, top 35% */
  .ts-text-panel {
    order: 1;
    position: relative !important;
    display: flex;
    flex-direction: column;
    flex: 0 0 35vh;
    width: 100%;
  }
  .ts-text-sticky {
    position: relative !important;
    top: auto !important;
    height: 100%;
    display: flex;
    align-items: flex-end;   /* push text down toward image */
    padding: 20px 24px 22px;
  }
  .ts-slides-wrap {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 200px;  /* tall enough for longest slide: title+line+desc+See More ~196px */
  }

  /* Keep switching animation on mobile */
  .ts-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    pointer-events: none;
  }
  .ts-slide.ts-slide-active { pointer-events: auto; }
  .ts-slide .ts-name,
  .ts-slide .ts-line,
  .ts-slide .ts-desc,
  .ts-slide .ts-link {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .ts-slide.ts-slide-active .ts-name,
  .ts-slide.ts-slide-active .ts-line,
  .ts-slide.ts-slide-active .ts-desc,
  .ts-slide.ts-slide-active .ts-link {
    opacity: 1;
    transform: none;
  }

  /* Image panel — visually second, bottom 65% */
  .ts-sticky-img-panel {
    order: 2;
    position: relative !important;
    top: auto !important;
    height: auto !important;
    flex: 0 0 65vh;
    width: 100%;
    padding: 4px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ts-img-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
  .ts-stage-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .ts-stage-img.ts-stage-active { opacity: 1; transform: scale(1); }

  /* Inner scroll spacer hidden; mobile spacer below scene drives scroll */
  .ts-scroll-spacer { display: none; }
  .ts-mobile-spacer { display: block; height: 300vh; }
}

@media (max-width: 600px) {
  .ts-section { padding: 60px 0 40px; }
  .ts-container { padding: 0 20px; }
  .ts-header { margin-bottom: 32px; }
  .ts-sticky-scene { margin-left: -20px; margin-right: -20px; }
  .ts-text-sticky { padding: 16px 20px 6px; }
  .ts-sticky-img-panel { padding: 2px 20px 12px; }
  .ts-name { font-size: clamp(20px, 5.5vw, 28px); }
  .ts-desc { font-size: clamp(13px, 3.5vw, 16px); }
}

/* ── THIRD SECTION — CTA + GenerateButton style ── */
.ts-cta {
  text-align: center;
  margin-top: 64px;
}

/* GenerateButton — ported from React to vanilla CSS */
.gen-btn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: #101010;
  --h: 210deg;

  position: relative;
  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.55em 1.1em 0.55em 1.1em;
  font-family: 'Nohemi', 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  background-color: var(--button-color);
  box-shadow:
    inset 0px 1px 1px rgba(255,255,255,0.20),
    inset 0px 2px 2px rgba(255,255,255,0.15),
    inset 0px 4px 4px rgba(255,255,255,0.10),
    inset 0px 8px 8px rgba(255,255,255,0.05),
    0px 2px 4px rgba(0,0,0,0.3),
    0px 4px 8px rgba(0,0,0,0.25),
    0px 8px 16px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.133);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
  isolation: isolate;
  overflow: visible;
}

.gen-btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.267), rgba(0,0,0,0.667));
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 -8px 8px -6px rgba(0,0,0,0) inset,
    0 -16px 16px -8px rgba(0,0,0,0) inset,
    1px 1px 1px rgba(255,255,255,0.133),
    2px 2px 2px rgba(255,255,255,0.067),
    -1px -1px 1px rgba(0,0,0,0.133),
    -2px -2px 2px rgba(0,0,0,0.067);
}

.gen-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--h), 100%, 70%),
    hsla(var(--h), 100%, 70%, 50%),
    8%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}

/* Sparkle icon */
.gen-btn-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 0.55rem;
  fill: #e8e8e8;
  animation: gen-flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
  transition: fill var(--transition), filter var(--transition);
}

@keyframes gen-flicker {
  50% { opacity: 0.35; }
}

/* Animated letters */
.gen-btn-letter {
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,0.7);
  animation: gen-letter-anim 2s ease-in-out infinite;
  transition: color var(--transition), text-shadow var(--transition);
}

@keyframes gen-letter-anim {
  50% {
    text-shadow: 0 0 3px rgba(255,255,255,0.5);
    color: #fff;
  }
}

.gen-txt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 6.2em;
  height: 1.4em;
}

.gen-txt-1 {
  position: absolute;
  white-space: nowrap;
  animation: gen-appear-anim 0.8s ease-in-out forwards;
}

@keyframes gen-appear-anim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Letter stagger delays */
.gen-btn-letter:nth-child(1)  { animation-delay: 0.00s; }
.gen-btn-letter:nth-child(2)  { animation-delay: 0.08s; }
.gen-btn-letter:nth-child(3)  { animation-delay: 0.16s; }
.gen-btn-letter:nth-child(4)  { animation-delay: 0.24s; }
.gen-btn-letter:nth-child(5)  { animation-delay: 0.32s; }
.gen-btn-letter:nth-child(6)  { animation-delay: 0.40s; }
.gen-btn-letter:nth-child(7)  { animation-delay: 0.48s; }
.gen-btn-letter:nth-child(8)  { animation-delay: 0.56s; }
.gen-btn-letter:nth-child(9)  { animation-delay: 0.64s; }
.gen-btn-letter:nth-child(10) { animation-delay: 0.72s; }
.gen-btn-letter:nth-child(11) { animation-delay: 0.80s; }

/* Focused / active (data-generating="true") */
.gen-btn[data-generating="true"] .gen-btn-letter {
  animation: gen-focused-letter-anim 1s ease-in-out forwards, gen-letter-anim 1.2s ease-in-out infinite;
  animation-delay: 0s, 1s;
}
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(1)  { animation-delay: 0.00s, 1s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(2)  { animation-delay: 0.08s, 1.08s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(3)  { animation-delay: 0.16s, 1.16s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(4)  { animation-delay: 0.24s, 1.24s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(5)  { animation-delay: 0.32s, 1.32s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(6)  { animation-delay: 0.40s, 1.40s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(7)  { animation-delay: 0.48s, 1.48s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(8)  { animation-delay: 0.56s, 1.56s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(9)  { animation-delay: 0.64s, 1.64s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(10) { animation-delay: 0.72s, 1.72s; }
.gen-btn[data-generating="true"] .gen-btn-letter:nth-child(11) { animation-delay: 0.80s, 1.80s; }

@keyframes gen-focused-letter-anim {
  0%, 100% { filter: blur(0px); }
  50% {
    transform: scale(2);
    filter: blur(10px) brightness(150%) drop-shadow(-12px 6px 6px hsl(var(--h), 100%, 70%));
  }
}

.gen-btn[data-generating="true"]::before {
  box-shadow:
    0 -8px 12px -6px rgba(255,255,255,0.2) inset,
    0 -16px 16px -8px hsla(var(--h), 100%, 70%, 0.2) inset,
    1px 1px 1px rgba(255,255,255,0.2),
    2px 2px 2px rgba(255,255,255,0.067),
    -1px -1px 1px rgba(0,0,0,0.133),
    -2px -2px 2px rgba(0,0,0,0.067);
}

.gen-btn[data-generating="true"]::after {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.gen-btn[data-generating="true"] .gen-btn-svg {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}

/* Hover */
.gen-btn:hover {
  border: 1px solid hsla(var(--h), 100%, 80%, 0.4);
}
.gen-btn:hover::before {
  box-shadow:
    0 -8px 8px -6px rgba(255,255,255,0.667) inset,
    0 -16px 16px -8px hsla(var(--h), 100%, 70%, 0.3) inset,
    1px 1px 1px rgba(255,255,255,0.133),
    2px 2px 2px rgba(255,255,255,0.067),
    -1px -1px 1px rgba(0,0,0,0.133),
    -2px -2px 2px rgba(0,0,0,0.067);
}
.gen-btn:hover::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}
.gen-btn:hover .gen-btn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--h), 100%, 70%)) drop-shadow(0 -4px 6px rgba(0,0,0,0.6));
  animation: none;
}

/* Active / click */
.gen-btn:active {
  border: 1px solid hsla(var(--h), 100%, 80%, 0.7);
  background-color: hsla(var(--h), 50%, 20%, 0.5);
}
.gen-btn:active::before {
  box-shadow:
    0 -8px 12px -6px rgba(255,255,255,0.667) inset,
    0 -16px 16px -8px hsla(var(--h), 100%, 70%, 0.8) inset,
    1px 1px 1px rgba(255,255,255,0.267),
    2px 2px 2px rgba(255,255,255,0.133),
    -1px -1px 1px rgba(0,0,0,0.133),
    -2px -2px 2px rgba(0,0,0,0.067);
}
.gen-btn:active::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}
.gen-btn:active .gen-btn-letter {
  text-shadow: 0 0 1px hsla(var(--h), 100%, 90%, 0.9);
  animation: none;
  color: #fff;
}

/* ── FOURTH SECTION — About Us ── */
.ab-section {
  background: #000c1a;
  padding: 100px 0;
  overflow: hidden;
  position: relative;
}

/* Animated dark blue mesh background */
.ab-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: abGrid 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* Floating blue glow orb */
.ab-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, rgba(124,58,237,0.08) 40%, transparent 70%);
  border-radius: 50%;
  top: -120px;
  right: -80px;
  animation: abOrb 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes abGrid {
  from { transform: translate(0, 0); }
  to   { transform: translate(48px, 48px); }
}
@keyframes abOrb {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-100px, 80px) scale(1.15); }
}

/* Ensure content sits above pseudo-elements */
.ab-container { position: relative; z-index: 1; }
.ab-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  gap: 64px;
}
.ab-img-wrap {
  border-radius: 28px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #03061a 0%, #010c2e 45%, #020718 100%);
  box-shadow: 0 32px 80px rgba(80,40,180,0.22), 0 8px 24px rgba(0,0,0,0.18);
}
.ab-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-text-col {
  display: flex;
  flex-direction: column;
}
/* "About Us" badge — blue-purple pill with rightward glow */
.ab-badge {
  display: inline-block;
  background: #5b50d6;
  color: #fff;
  font-family: 'Nohemi', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  border-radius: 12px;
  padding: 10px 26px;
  margin-bottom: 32px;
  width: fit-content;
  filter: drop-shadow(18px 0px 20px rgba(100,80,240,0.7));
}
.ab-heading {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  background: linear-gradient(to right, #60a5fa 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 40px;
}
.ab-divider {
  border: none;
  border-top: 1.5px solid rgba(90,70,200,0.35);
  margin: 0 0 24px;
}
.ab-para {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 16px;
}
.ab-card {
  margin-top: 12px;
  background: rgba(30,15,90,0.28);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 18px;
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,0.18);
}
.ab-card-quote {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 18px;
}
.ab-card-footer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ab-avatars {
  display: flex;
}
.ab-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.35);
  margin-left: -10px;
  flex-shrink: 0;
  font-family: 'Nohemi', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
}
.ab-av:first-child { margin-left: 0; }
.ab-av--1 { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.ab-av--2 { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.ab-av--3 { background: linear-gradient(135deg, #0891b2, #0e7490); }
.ab-av--4 { background: linear-gradient(135deg, #059669, #047857); }
.ab-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-trust-text {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .ab-container { grid-template-columns: 1fr; gap: 40px; }
  .ab-img-wrap  { aspect-ratio: 4/3; }
  /* Text first, image second on tablet/mobile */
  .ab-img-col  { order: 2; }
  .ab-text-col { order: 1; }
}
@media (max-width: 600px) {
  .ab-section   { padding: 72px 0; }
  .ab-container { padding: 0 20px; }
  .ab-img-wrap  { aspect-ratio: 3/2; }
}

/* ============================================================
   FIFTH SECTION — Industry Wins / Proven Success
   ============================================================ */
.iw-section {
  background: #fff;
  padding: 80px 0 0;
}

.iw-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}

.iw-header {
  margin-bottom: 40px;
}

.iw-badge {
  display: inline-block;
  background: #5b50d6;
  color: #fff;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 18px;
}

.iw-heading {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* ── Industry Wins cards — CSS sticky stacking ── */
.iw-cards {
  display: block;
  padding: 0 48px 5vh;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.iw-card-wrap {
  position: sticky;
  margin-bottom: 12vh;
  transform-origin: top center;
  will-change: transform;
}
.iw-card-wrap:last-child { margin-bottom: 0; }

/* Each card peeks 16px above the next — creates the deck/peek effect */
.iw-card-wrap:nth-child(1) { top: 16px; z-index: 1; }
.iw-card-wrap:nth-child(2) { top: 32px; z-index: 2; }
.iw-card-wrap:nth-child(3) { top: 48px; z-index: 3; }
.iw-card-wrap:nth-child(4) { top: 64px; z-index: 4; }
.iw-card-wrap:nth-child(5) { top: 80px; z-index: 5; }
.iw-card-wrap:nth-child(6) { top: 96px; z-index: 6; }

.iw-card-inner {
  position: relative;
  width: 100%;
  max-width: 1004px;
  margin: 0 auto;
  transform-origin: top center;
  will-change: transform;
}

/* ── iw-card HTML layout ── */
.iw-card {
  display: grid;
  grid-template-columns: 42% 58%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.13);
  min-height: 380px;
}

.iw-card-left {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.iw-card-tag {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 18px;
}

.iw-card-title {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 20px;
}

.iw-card-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.72;
  margin: 0 0 10px;
}

.iw-card-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.iw-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.iw-stat-label {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}

.iw-stat-num {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.iw-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.iw-card-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

/* Card image fills right column — contain on all sizes, no crop */
.iw-card-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
}

.iw-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 14px;
  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.28);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ── Colour themes — single uniform card color, no split ── */
.iw-card--blue   { background: #EAE7FF; }
.iw-card--blue .iw-card-left { color: #1c1060; }

.iw-card--pink   { background: #FFE2DC; }
.iw-card--pink .iw-card-left { color: #5a1812; }

.iw-card--yellow { background: #FFF3C4; }
.iw-card--yellow .iw-card-left { color: #3d2a00; }

.iw-card--cyan   { background: #C8F0EE; }
.iw-card--cyan .iw-card-left { color: #0b3532; }

.iw-card--indigo { background: #E8ECF8; }
.iw-card--indigo .iw-card-left { color: #1e2d5a; }

.iw-card--brown  { background: #FFE8D0; }
.iw-card--brown .iw-card-left { color: #3d1a00; }

/* ── Mobile — smaller offsets, same sticky stacking ── */
@media (max-width: 768px) {
  .iw-cards { padding: 0 16px 5vh; }
  .iw-card-wrap { margin-bottom: 8vh; }
  .iw-card-wrap:nth-child(1) { top: 8px; }
  .iw-card-wrap:nth-child(2) { top: 16px; }
  .iw-card-wrap:nth-child(3) { top: 24px; }
  .iw-card-wrap:nth-child(4) { top: 32px; }
  .iw-card-wrap:nth-child(5) { top: 40px; }
  .iw-card-wrap:nth-child(6) { top: 48px; }
}

@media (max-width: 600px) {
  .iw-section     { padding: 60px 0 0; }
  .iw-container   { padding: 0 20px; }
  .iw-heading     { font-size: 28px; }
  .iw-cards       { padding: 0 16px 60px; gap: 20px; }

  /* Stack: text on top, image on bottom — no crop, no stretch */
  .iw-card        { grid-template-columns: 1fr; min-height: auto; }
  .iw-card-left   { padding: 28px 24px 20px; order: 1; }
  .iw-card-right  { padding: 16px 20px 24px; order: 2; }
  .iw-card-right img {
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
  }
  .iw-img-placeholder { min-height: 160px; }
  .iw-card-title  { font-size: 22px; }
  .iw-stat-num    { font-size: 24px; }
}

/* ============================================================
   SIXTH SECTION — Clients Stories / Success Stories
   ============================================================ */
.cs-section {
  background: #f5f5f7;
  padding: 100px 0 80px;
  overflow: hidden;
}

.cs-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}

.cs-header {
  margin-bottom: 56px;
}

.cs-badge {
  display: inline-block;
  background: #5b50d6;
  color: #fff;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 18px;
}

.cs-heading {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.cs-track-wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
  animation: csScrollLeft 35s linear infinite;
}
.cs-track--reverse {
  animation: csScrollRight 35s linear infinite;
}
@keyframes csScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes csScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-track, .cs-track--reverse { animation: none; }
}

.cs-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px;
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

.cs-stars {
  color: #f5a623;
  font-size: 13px;
  letter-spacing: 1.5px;
}

.cs-text {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: #444;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.cs-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.cs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cs-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.cs-name {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0;
}

.cs-role {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #888;
  margin: 0;
}

@media (max-width: 600px) {
  .cs-section   { padding: 72px 0 60px; }
  .cs-container { padding: 0 20px; }
  .cs-heading   { font-size: 28px; }
  .cs-card      { width: 180px; padding: 14px 12px; }
}

/* ============================================================
   SEVENTH SECTION — Why Choose Us / Built for Brands
   ============================================================ */
.wcu-section {
  background: #000;
  padding: 80px 48px;
}

.wcu-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card base */
.wcu-card {
  background: #07101f;
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 20px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 0 0 rgba(37,99,235,0);
}
.wcu-card:hover {
  border-color: rgba(37,99,235,0.5);
  box-shadow: 0 0 32px rgba(37,99,235,0.1);
}

/* Grid placement */
.wcu-card--tl     { grid-column:1; grid-row:1; }
.wcu-card--center { grid-column:2; grid-row:1/3; }
.wcu-card--tr     { grid-column:3; grid-row:1; }
.wcu-card--ml     { grid-column:1; grid-row:2; }
.wcu-card--mr     { grid-column:3; grid-row:2; }
.wcu-card--bot    { grid-column:auto; grid-row:3; flex-direction:row; align-items:center; gap:16px; padding:26px 24px; }

/* Icon wrap — circle with blue border */
.wcu-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(37,99,235,0.08);
  border: 1.5px solid rgba(37,99,235,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wcu-icon-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(37,99,235,0.08);
  border: 1.5px solid rgba(37,99,235,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Numbers */
.wcu-num {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 600;
  color: #2563eb;
  line-height: 1;
  margin: 2px 0 0;
}
.wcu-num-sub {
  font-size: 0.6em;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
}
.wcu-num-sm {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  color: #2563eb;
  line-height: 1;
}

/* Labels */
.wcu-label {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.wcu-label-sm {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
}

/* Descriptions */
.wcu-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin: 0;
}
.wcu-desc-sm { font-size: 13px; flex: 1; color: rgba(255,255,255,0.45); font-weight: 300; }

/* Bottom card inner layout */
.wcu-bot-main { display: flex; flex-direction: column; gap: 3px; }
.wcu-vline { width: 1px; height: 44px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* Center hero card */
.wcu-card--center {
  background: linear-gradient(175deg, #0b1a3a 0%, #060f26 45%, #020810 100%);
  border-color: rgba(37,99,235,0.28);
  align-items: center;
  text-align: center;
  padding: 40px 32px 36px;
  box-shadow: inset 0 1px 0 rgba(37,99,235,0.15);
}

.wcu-badge {
  display: inline-block;
  border: 1px solid rgba(37,99,235,0.55);
  color: rgba(255,255,255,0.8);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.wcu-hero-title {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}
.wcu-accent { color: #2563eb; }

.wcu-hero-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  max-width: 320px;
  margin: 0 auto;
}

/* Toggle (top-right card) */
.wcu-toggle {
  width: 62px;
  height: 34px;
  background: #2563eb;
  border-radius: 24px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(37,99,235,0.5);
}
.wcu-toggle-knob {
  position: absolute;
  right: 4px;
  top: 5px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spline viewer scene */
.wcu-cube-scene {
  width: 100%;
  height: 340px;
  margin: 8px 0 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.wcu-cube-scene spline-viewer {
  width: 100%;
  height: 115%;
  display: block;
  transform: translateY(40px);
  clip-path: inset(0 0 80px 0); /* shift robot down + clip watermark area */
}
/* Cover — not needed anymore (clip-path handles it) */
.wcu-spline-cover { display: none; }

@media (max-width: 960px) {
  .wcu-section { padding: 60px 24px; }
  .wcu-grid    { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* In 2-col grid: center spans both, tr/mr move to col 2 */
  .wcu-card--center { grid-column: 1 / 3; grid-row: auto; }
  .wcu-card--tr     { grid-column: 2; grid-row: auto; }
  .wcu-card--mr     { grid-column: 2; grid-row: auto; }
  .wcu-card--tl     { grid-column: 1; grid-row: auto; }
  .wcu-card--ml     { grid-column: 1; grid-row: auto; }
  .wcu-card--bot    { grid-column: auto; grid-row: auto; flex-direction: row; align-items: center; }
  .wcu-vline        { display: flex; }
}

@media (max-width: 600px) {
  .wcu-section { padding: 48px 16px; }

  /* 2-col grid so tl+tr can sit side by side */
  .wcu-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Row 1: Why Choose Us (robot) spans full width — 3-row right column ── */
  .wcu-card--center {
    grid-column: 1 / 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto 1fr;
    padding: 16px 14px;
    text-align: left;
    align-items: start;
    gap: 0;
  }
  .wcu-badge {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 10px 12px;
    align-self: start;
  }
  .wcu-hero-title {
    grid-column: 2;
    grid-row: 2;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 8px 12px;
    text-align: left;
  }
  .wcu-hero-desc {
    grid-column: 2;
    grid-row: 3;
    display: block;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.45);
    margin: 0 0 0 12px;
    text-align: left;
    max-width: none;
  }

  /* Robot scene — matches desktop's exact 300px visible window */
  .wcu-cube-scene {
    grid-column: 1;
    grid-row: 1 / 4;
    height: 320px;
    margin: 0;
    overflow: hidden;
    position: relative;
  }
  /* 20px strip hides watermark — overflow:hidden already clips beyond 320px */
  .wcu-cube-scene::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: #07101f;
    z-index: 10;
    pointer-events: none;
  }
  .wcu-cube-scene spline-viewer {
    height: 115%;           /* same ratio as desktop → 368px, clipped at 320 */
    transform: translateY(0px);  /* no empty top — full 300px window for robot */
    clip-path: none;
  }

  /* ── Row 2: 100+ Projects (left) | Quality First (right) ── */
  .wcu-card--tl { grid-column: 1; grid-row: 2; }
  .wcu-card--tr { grid-column: 2; grid-row: 2; }
  /* Hide long descriptions so cards stay compact in half-width */
  .wcu-card--tl .wcu-desc,
  .wcu-card--tr .wcu-desc { display: none; }

  /* ── Row 3+: remaining cards ── */
  .wcu-card--ml  { grid-column: 1; grid-row: 3; }
  .wcu-card--mr  { grid-column: 2; grid-row: 3; }
  .wcu-card--bot { grid-column: 1 / 3; grid-row: auto; flex-direction: row; align-items: center; }

  .wcu-num    { font-size: 36px; }
  .wcu-num-sm { font-size: 26px; }
}

/* ── SECTION 8: PRICING PACKAGES ── */
.pkg-section {
  position: relative;
  background: #06030f;
  padding: 100px 48px 120px;
  overflow: hidden;
}
.pkg-glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 420px;
  background: radial-gradient(ellipse at center, rgba(80,40,220,0.45) 0%, rgba(40,10,120,0.25) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.pkg-container {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}
.pkg-header {
  text-align: center;
  margin-bottom: 64px;
}
.pkg-badge {
  display: inline-block;
  background: rgba(255,255,255,0.96);
  color: #111;
  border: none;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50px;
  padding: 10px 32px;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 24px 8px rgba(255,255,255,0.28),
    0 0 60px 20px rgba(255,255,255,0.14),
    0 0 120px 50px rgba(255,255,255,0.07);
}
.pkg-heading {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 600;
  color: #fff;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.01em;
}
.pkg-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.pkg-card {
  position: relative;
  background: rgba(16,10,34,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.pkg-card:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 8px 40px rgba(80,40,220,0.15);
}
.pkg-card--featured {
  background: linear-gradient(160deg, #0d1a4a 0%, #0a1236 40%, #080d28 100%);
  border-color: rgba(80,100,240,0.45);
  box-shadow: 0 0 0 1px rgba(80,100,240,0.2), 0 20px 60px rgba(40,60,200,0.25);
  margin-top: -16px;
  padding-bottom: 40px;
}
.pkg-card--featured:hover {
  border-color: rgba(80,100,240,0.7);
  box-shadow: 0 0 0 1px rgba(80,100,240,0.35), 0 24px 70px rgba(40,60,200,0.35);
}
/* Decorative concentric-ring background */
.pkg-card-deco {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,0.03);
  box-shadow: 0 0 0 30px rgba(255,255,255,0.02), 0 0 0 60px rgba(255,255,255,0.015);
  pointer-events: none;
}
.pkg-card--featured .pkg-card-deco {
  border-color: rgba(100,130,255,0.06);
  box-shadow: 0 0 0 30px rgba(100,130,255,0.04), 0 0 0 60px rgba(100,130,255,0.025);
}
.pkg-name {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pkg-price {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}
.pkg-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
  margin: 0;
}
.pkg-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pkg-features li {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkg-features li::before {
  content: '✓';
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.pkg-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 13px 28px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.pkg-btn:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.pkg-btn--featured {
  background: #4a5ef7;
  border-color: #4a5ef7;
  color: #fff;
}
.pkg-btn--featured:hover {
  background: #5b6ef8;
  border-color: #5b6ef8;
}
@media (max-width: 900px) {
  .pkg-section { padding: 72px 24px 90px; }
  .pkg-cards { grid-template-columns: 1fr; gap: 18px; }
  .pkg-card--featured { margin-top: 0; }
}
@media (max-width: 600px) {
  .pkg-section { padding: 56px 16px 72px; }
}

/* ── SECTION 9: COMPARE PLANS TABLE ── */
.cmp2-section {
  background: #f8f8fb;
  padding: 100px 48px 110px;
}
.cmp2-container {
  max-width: 1080px;
  margin: 0 auto;
}
.cmp2-header {
  text-align: center;
  margin-bottom: 56px;
}
.cmp2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,0.08);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50px;
  padding: 10px 24px;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
  box-shadow:
    0 2px 16px rgba(91,91,214,0.18),
    0 0 40px 8px rgba(91,91,214,0.08);
}
.cmp2-heading {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 600;
  color: #0e0e1a;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.cmp2-sub {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #999;
  margin: 0;
  line-height: 1.6;
}
.cmp2-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #e0e0ee;
}
.cmp2-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.cmp2-th {
  padding: 22px 20px;
  text-align: left;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  border-bottom: 1px solid #e8e8f0;
  vertical-align: bottom;
}
.cmp2-th--feat {
  font-size: 15px;
  font-weight: 600;
  color: #0e0e1a;
  width: 34%;
}
.cmp2-th--plan {
  text-align: center;
  width: 22%;
}
.cmp2-plan-name {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.cmp2-plan-price {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: #0e0e1a;
  line-height: 1;
  letter-spacing: -0.01em;
}
.cmp2-per {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #aaa;
}
.cmp2-table tbody tr {
  border-bottom: 1px solid #f0f0f8;
  transition: background 0.15s;
}
.cmp2-table tbody tr:hover {
  background: #f5f5fc;
}
.cmp2-table tbody tr:last-child {
  border-bottom: none;
}
.cmp2-feat {
  padding: 14px 20px;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: #444;
  font-weight: 400;
}
.cmp2-cell {
  padding: 15px 20px;
  text-align: center;
  vertical-align: middle;
}
/* Filled blue checkmark circle */
.cmp2-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5b5bd6;
}
.cmp2-yes::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
/* Grey empty circle */
.cmp2-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #d0d0e0;
  background: transparent;
}
@media (max-width: 900px) {
  .cmp2-section { padding: 72px 20px 80px; }
  .cmp2-feat { font-size: 13px; padding: 13px 12px; }
  .cmp2-cell { padding: 13px 10px; }
  .cmp2-th { padding: 18px 12px; }
}
@media (max-width: 600px) {
  .cmp2-section { padding: 56px 12px 64px; }
  .cmp2-heading { font-size: 22px; }
}

/* ── SECTION 10: FAQ ── */
.faq-section {
  position: relative;
  background: #04060d;
  padding: 100px 48px 110px;
  overflow: hidden;
}
.faq-bg-glow {
  position: absolute;
  top: -80px;
  left: -120px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(30,80,255,0.22) 0%, rgba(10,40,180,0.12) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.faq-container {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

/* Header */
.faq-header {
  text-align: center;
  margin-bottom: 56px;
}
.faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(15,25,55,0.9);
  border: 1px solid rgba(60,100,255,0.35);
  color: rgba(255,255,255,0.85);
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50px;
  padding: 8px 20px 8px 8px;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
}
.faq-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a56ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.faq-heading {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.faq-sub {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.6;
}

/* Accordion list */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: rgba(10,18,40,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s;
}
.faq-item--open {
  border-color: rgba(60,100,255,0.35);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.faq-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a56ff;
  flex-shrink: 0;
}
.faq-q-text {
  flex: 1;
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.faq-chevron {
  font-size: 18px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s;
}
.faq-item--open .faq-chevron {
  color: rgba(255,255,255,0.75);
}
.faq-a {
  padding: 0 24px 24px 50px;
}
.faq-a p {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.85;
  margin: 0;
}

@media (max-width: 768px) {
  .faq-section { padding: 72px 20px 80px; }
  .faq-q-text { font-size: 14px; }
  .faq-a { padding: 0 16px 20px 40px; }
}
@media (max-width: 480px) {
  .faq-section { padding: 56px 14px 64px; }
  .faq-heading { font-size: 26px; }
}

/* ═══════════════════════════════════════════════
   GLOSSY PILL BUTTON SYSTEM
   ═══════════════════════════════════════════════ */

/* ── Shared top gloss layer ── */
.btn-primary::before,
.btn-outline::before,
.pkg-btn::before,
.ct-pill-btn::before,
.ct-submit-btn::before,
.cal-confirm-btn::before {
  content: "";
  position: absolute; inset: 2px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 45%, rgba(255,255,255,0));
  pointer-events: none; z-index: 1;
}

/* ── Shared grain + bottom glow ── */
.btn-primary::after,
.btn-outline::after,
.pkg-btn::after,
.ct-pill-btn::after,
.ct-submit-btn::after,
.cal-confirm-btn::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background-image:
    radial-gradient(circle at bottom center, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.06) 35%, transparent 65%),
    radial-gradient(rgba(255,255,255,0.14) 0.8px, transparent 0.8px),
    radial-gradient(rgba(255,255,255,0.08) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0,0,0,0.08) 0.7px, transparent 0.7px);
  background-size: 100% 100%, 4px 4px, 7px 7px, 5px 5px;
  background-position: center, 0 0, 2px 2px, 1px 3px;
  opacity: 0.55; mix-blend-mode: overlay; pointer-events: none; z-index: 2;
}

/* ── btn-primary — blue #0055FF ── */
.btn-primary {
  background: linear-gradient(180deg, #3b7fff 0%, #0055ff 45%, #003ecc 100%);
  box-shadow: 0 0 0 6px rgba(0,85,255,0.12), 0 10px 30px rgba(0,85,255,0.35), inset 0 2px 10px rgba(255,255,255,0.22);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 10px rgba(0,85,255,0.16), 0 16px 50px rgba(0,85,255,0.5), inset 0 2px 10px rgba(255,255,255,0.28);
}
.btn-primary:active { transform: scale(0.96); box-shadow: 0 0 0 8px rgba(0,85,255,0.2), 0 8px 24px rgba(0,85,255,0.4); }


/* ── btn-outline — glass ── */
.btn-outline {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 6px rgba(255,255,255,0.1);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s, background 0.3s;
}
.btn-outline:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--accent);
  background: rgba(0,85,255,0.1);
  box-shadow: 0 0 0 8px rgba(0,85,255,0.08), 0 14px 36px rgba(0,85,255,0.2), inset 0 1px 6px rgba(255,255,255,0.12);
}
.btn-outline:active { transform: scale(0.98); }

/* ── pkg-btn — dark glass on dark bg ── */
.pkg-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 6px rgba(255,255,255,0.06);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s, background 0.3s;
}
.pkg-btn:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 6px rgba(255,255,255,0.1);
  color: #fff;
}
.pkg-btn:active { transform: scale(0.98); }

/* ── pkg-btn--featured — indigo #4a5ef7 ── */
.pkg-btn--featured {
  background: linear-gradient(180deg, #7a8fff 0%, #4a5ef7 45%, #3040d0 100%);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(74,94,247,0.12), 0 10px 30px rgba(74,94,247,0.35), inset 0 2px 10px rgba(255,255,255,0.22);
}
.pkg-btn--featured:hover {
  background: linear-gradient(180deg, #8a9fff 0%, #5a6ef8 45%, #4050e0 100%);
  border-color: transparent;
  box-shadow: 0 0 0 10px rgba(74,94,247,0.16), 0 16px 40px rgba(74,94,247,0.42), inset 0 2px 10px rgba(255,255,255,0.28);
}

/* ── ct-pill-btn — glass ── */
.ct-pill-btn {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.2), inset 0 1px 6px rgba(255,255,255,0.1);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.2s, border-color 0.2s;
}
.ct-pill-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.25), inset 0 1px 6px rgba(255,255,255,0.14);
}
.ct-pill-btn:active { transform: scale(0.98); }

/* ── ct-pill-btn--accent — blue #0055FF ── */
.ct-pill-btn--accent {
  background: linear-gradient(180deg, #3b7fff 0%, #0055ff 45%, #003ecc 100%);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(0,85,255,0.12), 0 10px 30px rgba(0,85,255,0.35), inset 0 2px 10px rgba(255,255,255,0.22);
}
.ct-pill-btn--accent:hover {
  background: linear-gradient(180deg, #4d8dff 0%, #1566ff 45%, #1450e0 100%);
  border-color: transparent;
  box-shadow: 0 0 0 10px rgba(0,85,255,0.16), 0 16px 40px rgba(0,85,255,0.42), inset 0 2px 10px rgba(255,255,255,0.28);
}

/* ── ct-submit-btn — blue pill ── */
.ct-submit-btn {
  background: linear-gradient(180deg, #3b7fff 0%, #0055ff 45%, #003ecc 100%);
  border-radius: 100px;
  box-shadow: 0 0 0 6px rgba(0,85,255,0.12), 0 10px 30px rgba(0,85,255,0.35), inset 0 2px 10px rgba(255,255,255,0.22);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ct-submit-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 10px rgba(0,85,255,0.16), 0 16px 40px rgba(0,85,255,0.42), inset 0 2px 10px rgba(255,255,255,0.28);
}
.ct-submit-btn:hover::after { opacity: 0.55; }
.ct-submit-btn:active { transform: scale(0.98); }
.ct-submit-btn #btn-text, .ct-submit-btn .spinner { position: relative; z-index: 3; }

/* ── cal-confirm-btn — blue ── */
.cal-confirm-btn {
  background: linear-gradient(180deg, #3b7fff 0%, #0055ff 45%, #003ecc 100%);
  box-shadow: 0 0 0 6px rgba(0,85,255,0.12), 0 10px 30px rgba(0,85,255,0.35), inset 0 2px 10px rgba(255,255,255,0.22);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cal-confirm-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 10px rgba(0,85,255,0.16), 0 16px 40px rgba(0,85,255,0.42), inset 0 2px 10px rgba(255,255,255,0.28);
}
.cal-confirm-btn:active { transform: scale(0.98); }
.cal-confirm-btn:disabled {
  background: rgba(255,255,255,0.1);
  box-shadow: none;
  transform: none;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════
   NOHEMI FONT OVERRIDES — Work Teaser & Compare
   ═══════════════════════════════════════════════ */

/* ── "Work That Speaks" section ── */
.work-teaser-section .section-eyebrow .label {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.work-teaser-section .display-lg {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ── "Creonix VS. The Rest" compare section ── */
.compare-section .section-eyebrow .label {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.compare-section .display-lg {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.compare-section .cmp-subtitle {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}
.compare-section .cmp-info-name {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 600;
}
.compare-section .cmp-info-desc {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 300;
}
.compare-section .compare-hdr span {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.compare-section .ck-label {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 400;
}
.compare-section .cmp-cta-text {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 300;
}
.compare-section .cmp-badge {
  font-family: 'Nohemi', 'DM Sans', sans-serif;
  font-weight: 600;
}

/* ================================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Headings      → Nohemi (the main typeface)
   Accent word   → Playfair Display italic (the single em word in titles)
   Body/UI       → Nohemi light 300 · regular 400 · semibold 600
   ================================================================ */

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nohemi', 'DM Sans', sans-serif;
}

/* ── Playfair Display: only the italic accent <em> word inside headings ── */
h1 em, h2 em, h3 em, h4 em,
.iw-heading em,
.iw-card-title em,
.cs-heading em,
.wcu-hero-title em,
.pkg-heading em,
.cmp2-heading em,
.faq-heading em,
.ab-heading em,
.ts-heading em,
.ct-hero-title em,
.svc-hero-title em,
.svc-section-title em,
.spw-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
}

/* ── Nohemi weight assignments ── */
/* Light — descriptions, sub-copy */
.iw-card-desc,
.wcu-desc,
.wcu-desc-sm,
.pkg-desc,
.pkg-name,
.cmp2-sub,
.faq-sub,
.faq-a p {
  font-family: var(--font-body);
  font-weight: 300;
}

/* Semibold — stats, key numbers */
.iw-stat-num,
.wcu-num,
.wcu-num-sm,
.pkg-price {
  font-family: var(--font-body);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE AUDIT — additional breakpoint fixes
   ═══════════════════════════════════════════════ */

/* ── Section padding: reduce from 144px on tablet ── */
@media (max-width: 1024px) {
  .section-pad { padding: 96px 0; }
}
@media (max-width: 768px) {
  .section-pad { padding: 72px 0; }
}
@media (max-width: 480px) {
  .section-pad { padding: 56px 0; }
}

/* ── Container padding at mid-range (tablet 600–1024) ── */
@media (max-width: 1024px) {
  .iw-container,
  .cs-container { padding: 0 32px; }
  .ts-container  { padding: 0 32px; }
  .ab-container  { padding: 0 32px; }
  .wcu-section   { padding: 72px 32px; }
  .pkg-section   { padding: 80px 32px 90px; }
}

/* ── Compare table — tighter first column on mobile ── */
@media (max-width: 480px) {
  .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-hdr, .cmp-row {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    padding: 12px 14px;
    min-width: 320px;
  }
  .cmp-info-name { font-size: 11.5px; line-height: 1.25; }
  .cmp-logo { width: 34px; height: 34px; font-size: 9px; flex-shrink: 0; }
  .ck-yes, .ck-no, .ck-partial { width: 22px; height: 22px; font-size: 10px; }
  .ck-label { font-size: 9px; }
  .cmp-brand { gap: 8px; }
}

/* ── Pricing cards: already 1fr on mobile, ensure header/CTA rows stack ── */
@media (max-width: 600px) {
  .cmp-cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pkg-section { padding: 56px 16px 72px; }
}

/* ── Nav pill: ensure it doesn't overflow at very small widths ── */
@media (max-width: 360px) {
  .nav-pill-item { font-size: 10px; padding: 7px 8px; }
  .nav-cta-pill  { font-size: 10px; padding: 7px 10px; }
}

/* ── Service detail hero: fix stacking on 768–1024 tablets ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .svc-hero-inner { grid-template-columns: 1fr; }
  .svc-hero-visual { max-width: 480px; margin-top: 40px; }
  .svc-deliverables-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Floating arc section: text padding on mid tablet ── */
@media (max-width: 900px) and (min-width: 601px) {
  .fac-h2  { font-size: clamp(26px, 4vw, 44px); }
  .fac-sub { font-size: 15px; }
}

/* ── Work/Portfolio page: consistent grid at 768 breakpoint ── */
@media (max-width: 768px) {
  .work-staircase { grid-template-columns: 1fr 1fr; gap: 16px; }
  .work-card:nth-child(2) { margin-bottom: 0; }
}

/* ── Footer v2 grid: mid-tablet tidy ── */
@media (max-width: 900px) and (min-width: 641px) {
  .footer-v2-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fv2-brand-col  { grid-column: span 2; }
}

/* ── Prevent any section from causing horizontal scroll ── */
section, .page { max-width: 100%; overflow-x: clip; }

/* ── Improve readability: min font-size on body for very small screens ── */
@media (max-width: 360px) {
  body { font-size: 13.5px; }
  .container { padding: 0 14px; }
}