/* Appsmediaz — shared layout (master_new) + subpages */
:root{
  --bg:#fafaf7;
  --ink:#0a0e1a;
  --ink-2:#1a1f2e;
  --muted:#5a6376;
  --line:#e6e3dc;
  --panel:#ffffff;
  --cream:#f3efe6;
  --accent:#FF5E1F;
  --accent-2:#0066FF;
  --accent-3:#00C896;
  --accent-soft:#FFE9DD;
  --grad: linear-gradient(135deg, #FF5E1F 0%, #FF8B3D 100%);
  --shadow-sm: 0 1px 2px rgba(10,14,26,.04);
  --shadow-md: 0 8px 24px rgba(10,14,26,.06);
  --shadow-lg: 0 20px 50px rgba(10,14,26,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}

h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}

/* Skip link for accessibility */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;
  z-index:1000;font-size:14px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);font-weight:500;
}
.eyebrow::before{content:'';width:24px;height:1.5px;background:var(--accent)}

/* ========== TOPBAR ========== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:8px 5vw;font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--line);background:var(--cream);
}
.topbar i{color:var(--accent);margin-right:6px;width:14px;text-align:center}
.topbar .info{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.topbar .info a{transition:color .2s}
.topbar .info a:hover{color:var(--ink)}
.topbar .ratings{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stars{color:#F5A623;letter-spacing:1px;font-size:13px}

/* ========== NAV ========== */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 5vw;background:rgba(250,250,247,.94);backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--line);transition:padding .25s,box-shadow .25s;
}
.nav.scrolled{padding:10px 5vw;box-shadow:var(--shadow-md)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:36px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center}
.nav-links a{font-weight:500;font-size:14.5px;color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:100px;font-weight:600;font-size:14px;border:none;
  transition:all .25s ease;white-space:nowrap;text-align:center;justify-content:center;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--accent);transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,94,31,.3)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover,.btn-accent:focus{background:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover,.btn-ghost:focus{background:var(--ink);color:#fff}
.btn-arrow i{transition:transform .25s}
.btn-arrow:hover i{transform:translateX(4px)}
.menu-toggle{
  display:none;background:none;border:none;font-size:24px;color:var(--ink);
  width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;
}

/* ========== HERO ========== */
.hero{
  position:relative;padding:70px 5vw 100px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.15),transparent 60%);z-index:0;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,102,255,.1),transparent 60%);z-index:0;pointer-events:none;
}
.hero > *{position:relative;z-index:1}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);
  box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.hero-badge .pill{
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:1px;
  display:inline-flex;align-items:center;gap:6px;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

h1.hero-title{
  font-size:clamp(2.2rem, 5.4vw, 4.6rem);line-height:1.05;margin-bottom:22px;letter-spacing:-.035em;
}
.hero p.lead{color:var(--muted);font-size:clamp(1rem,1.3vw,1.1rem);max-width:560px;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:48px}
.text-link{font-size:14px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:8px;padding:10px 0}
.text-link:hover{color:var(--accent)}

.hero-trust h6{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.trust-row{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
.trust-item{color:var(--muted);font-size:13px;min-width:fit-content}
.trust-item strong{font-size:clamp(1.3rem,2vw,1.6rem);color:var(--ink);display:block;font-weight:700;margin-bottom:2px;letter-spacing:-.02em}

/* Hero Visual */
.hero-visual{position:relative;aspect-ratio:.95/1;max-width:520px;margin-left:auto;width:100%}
.hv-main{
  position:absolute;inset:0;border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#0a0e1a 0%,#1a1f2e 100%);
  box-shadow:0 30px 70px rgba(10,14,26,.22);
}
.hv-main::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,94,31,.3),transparent 40%),
             radial-gradient(circle at 80% 80%,rgba(0,102,255,.25),transparent 45%);
}
.grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
}
.hv-main svg{position:absolute;inset:0;width:100%;height:100%}

.float-card{
  position:absolute;background:#fff;border-radius:16px;padding:12px 16px;
  box-shadow:0 16px 36px rgba(10,14,26,.16);border:1px solid rgba(0,0,0,.04);
  animation:float 6s ease-in-out infinite;font-size:13px;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fc-1{top:-16px;right:24px;animation-delay:0s;display:flex;align-items:center;gap:10px}
.fc-1 .av{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:14px}
.fc-1 small{display:block;color:var(--muted);font-size:10.5px;font-family:'JetBrains Mono',monospace;letter-spacing:1px}
.fc-1 b{font-size:13px;display:block;margin-top:2px}
.fc-2{bottom:46px;left:-24px;animation-delay:-3s;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7}
.fc-2 .lbl{color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:5px}
.fc-2 .row{display:flex;justify-content:space-between;gap:14px;min-width:170px}
.fc-2 .up{color:var(--accent-3);font-weight:600}
.fc-2 .down{color:var(--accent-2);font-weight:600}
.fc-3{bottom:-8px;right:-8px;animation-delay:-1.5s;display:flex;align-items:center;gap:10px;padding:10px 14px}
.fc-3 small{color:var(--muted);font-size:11px;display:block;margin-top:2px}

/* ========== SECTION BASE ========== */
section.block{padding:90px 5vw;position:relative}
.section-head{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;margin-bottom:60px;align-items:end}
h2.section-title{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.03em}
.section-head > div p, .section-head > p{color:var(--muted);font-size:1rem;max-width:540px}

/* Trust logos strip */
.trust-strip{
  padding:40px 5vw;background:var(--cream);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust-strip h6{
  text-align:center;font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:28px;
}
.trust-logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px 50px;
  font-weight:600;font-size:1.1rem;color:var(--ink);opacity:.6;
}
.trust-logos span{
  display:inline-flex;align-items:center;gap:10px;transition:opacity .25s,color .25s;
}
.trust-logos span:hover{opacity:1;color:var(--accent)}
.trust-logos i{font-size:1.3rem}

/* ========== CHALLENGES ========== */
.challenges{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.challenge{
  position:relative;padding:34px 30px;border-radius:20px;background:#fff;border:1px solid var(--line);
  transition:transform .35s,box-shadow .35s;overflow:hidden;
}
.challenge::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .4s;
}
.challenge:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.challenge:hover::before{transform:scaleY(1)}
.challenge .num{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);
  letter-spacing:2px;display:block;margin-bottom:14px;font-weight:500;
}
.challenge h3{font-size:1.3rem;margin-bottom:12px;max-width:90%}
.challenge > p{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.challenge .help-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;display:block;
}
.challenge ul{list-style:none}
.challenge ul li{
  padding:8px 0;border-top:1px solid var(--line);font-size:.94rem;
  display:flex;align-items:center;gap:10px;
}
.challenge ul li i{color:var(--accent-3);font-size:11px;flex-shrink:0}
.challenge .arrow{
  margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  color:var(--ink);transition:gap .25s,color .25s;
}
.challenge:hover .arrow{gap:14px;color:var(--accent)}

/* ========== AI SECTION (dark) ========== */
.ai-eco{
  background:linear-gradient(170deg,#0a0e1a 0%,#1a1f2e 100%);color:#fff;
  padding:100px 5vw;position:relative;overflow:hidden;
}
.ai-eco::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 500px at 80% 20%,rgba(255,94,31,.15),transparent 60%),
             radial-gradient(800px 500px at 10% 80%,rgba(0,102,255,.13),transparent 60%);
}
.ai-eco > *{position:relative;z-index:1}
.ai-eco h2,.ai-eco h3,.ai-eco h4{color:#fff}
.ai-eco .section-head > div p,.ai-eco .section-head > p{color:rgba(255,255,255,.7)}
.ai-eco .eyebrow{color:#FF8B3D}
.ai-eco .eyebrow::before{background:#FF8B3D}

.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ai-card-link{display:block;text-decoration:none;color:inherit}
.ai-card-link:focus-visible{outline:2px solid #FF8B3D;outline-offset:4px;border-radius:22px}
.ai-card{
  position:relative;padding:30px 28px;border-radius:20px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);
  transition:transform .35s,border-color .35s,background .35s;
  height:100%;
}
.ai-card:hover{transform:translateY(-4px);border-color:rgba(255,140,60,.4);background:rgba(255,255,255,.06)}
.ai-card-arrow{
  position:absolute;top:30px;right:28px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#FF8B3D;background:rgba(255,140,60,.1);
  border:1px solid rgba(255,140,60,.25);font-size:12px;
  transition:all .3s;opacity:0;transform:translateX(-4px);
}
.ai-card-link:hover .ai-card-arrow{opacity:1;transform:translateX(0)}
.ai-card-link:hover .ai-card-arrow{background:#FF8B3D;color:#fff;border-color:#FF8B3D}
.ai-card .ico{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  font-size:22px;margin-bottom:20px;
  background:rgba(255,94,31,.12);border:1px solid rgba(255,94,31,.2);color:#FF8B3D;
}
.ai-card.v2 .ico{background:rgba(0,102,255,.12);border-color:rgba(0,102,255,.25);color:#5A9CFF}
.ai-card.v3 .ico{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.25);color:#A78BFA}
.ai-card.v4 .ico{background:rgba(0,200,150,.12);border-color:rgba(0,200,150,.25);color:#34D9A8}
.ai-card.v5 .ico{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.25);color:#F5C453}
.ai-card.v6 .ico{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.25);color:#F472B6}
.ai-card h3{font-size:1.15rem;margin-bottom:10px}
.ai-card p{color:rgba(255,255,255,.65);font-size:.92rem;margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 10px;border-radius:100px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.1);
}

/* ========== MODELS ========== */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.model{
  padding:34px 30px;border-radius:22px;background:#fff;border:1px solid var(--line);
  transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column;
}
.model:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.model.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.model.featured h3{color:#fff}
.model.featured p,.model.featured li{color:rgba(255,255,255,.75)}
.model.featured .tag-text{color:#FF8B3D}
.model.featured .best{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.12)}
.model .tag-text{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;display:block;
}
.model .ill{
  width:60px;height:60px;border-radius:14px;display:grid;place-items:center;
  font-size:24px;margin-bottom:20px;background:var(--accent-soft);color:var(--accent);
}
.model.featured .ill{background:rgba(255,255,255,.1);color:#FF8B3D}
.model h3{font-size:1.4rem;margin-bottom:10px}
.model > p{font-size:.95rem;color:var(--muted);margin-bottom:22px}
.model ul{list-style:none;margin-bottom:24px;flex:1}
.model ul li{
  padding:9px 0;font-size:.92rem;display:flex;align-items:flex-start;gap:10px;
  border-top:1px solid var(--line);
}
.model.featured ul li{border-top-color:rgba(255,255,255,.08)}
.model ul li i{color:var(--accent-3);font-size:11px;margin-top:6px;flex-shrink:0}
.model .best{
  padding:12px 16px;border-radius:12px;background:var(--cream);
  border:1px solid var(--line);font-size:.88rem;
}
.model .best b{
  display:block;font-size:11px;color:var(--accent);text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:4px;font-weight:600;
}

/* ========== CAPABILITIES ========== */
.cap-row{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:50px 0;
  border-bottom:1px solid var(--line);
}
.cap-row:last-child{border-bottom:none}
.cap-row.reverse .cap-text{order:2}
.cap-row.reverse .cap-visual{order:1}
.cap-text .num{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);
  letter-spacing:2px;margin-bottom:14px;display:block;
}
.cap-text h3{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:18px;line-height:1.15}
.cap-text > p{color:var(--muted);font-size:1rem;margin-bottom:24px}
.cap-text ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:28px}
.cap-text ul li{font-size:.94rem;color:var(--ink-2);display:flex;align-items:center;gap:10px;padding:6px 0}
.cap-text ul li i{color:var(--accent);font-size:13px;flex-shrink:0}
.cap-visual{
  position:relative;aspect-ratio:1.1/1;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--line);
}
.cap-visual.v-dark{background:linear-gradient(160deg,#1a1f2e,#0a0e1a);color:#fff}

/* === Floating mini-pills (used inside each banner) === */
.cap-mini{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  font-size:13px;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);
  box-shadow:0 10px 24px rgba(10,14,26,.08);animation:float 5s ease-in-out infinite;z-index:5;
}
.cap-visual.v-dark .cap-mini{background:#0f1320;border-color:rgba(255,255,255,.08);color:#fff}
.cap-mini i{color:var(--accent);font-size:14px}
.cap-mini.m1{top:22px;left:22px;animation-delay:0s}
.cap-mini.m2{bottom:22px;right:22px;animation-delay:-2s}
.cap-mini.m3{top:50%;right:22px;animation-delay:-1s;transform:translateY(-50%)}

/* === BANNER 1: MOBILE PHONE MOCKUP === */
.banner-mobile{display:grid;place-items:center;padding:30px}
.phone-frame{
  position:relative;width:58%;aspect-ratio:9/18;
  background:linear-gradient(180deg,#0a0e1a,#1a1f2e);
  border-radius:36px;padding:8px;
  box-shadow:0 30px 60px rgba(10,14,26,.25),inset 0 0 0 2px rgba(255,255,255,.08);
}
.phone-frame::before{
  content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:60px;height:14px;background:#000;border-radius:100px;z-index:3;
}
.phone-screen{
  width:100%;height:100%;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#FFE9DD 0%, #fff 60%);
}
.phone-statusbar{
  display:flex;justify-content:space-between;align-items:center;padding:14px 22px 8px;
  font-size:9px;font-weight:700;color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;
}
.phone-statusbar .icons{display:flex;gap:4px;font-size:8px}
.phone-greeting{padding:30px 18px 14px;text-align:left}
.phone-greeting small{font-size:8px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.phone-greeting h5{font-size:15px;margin-top:3px;letter-spacing:-.02em;color:var(--ink)}
.phone-card{
  margin:8px 14px;padding:12px;border-radius:12px;
  background:linear-gradient(135deg,#FF5E1F,#FF8B3D);color:#fff;
  display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 10px 20px rgba(255,94,31,.3);animation:cardSlide 4s ease-in-out infinite;
}
@keyframes cardSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.phone-card .lbl{font-size:8px;text-transform:uppercase;letter-spacing:1px;opacity:.85}
.phone-card .val{font-size:14px;font-weight:700;margin-top:2px}
.phone-card i{font-size:18px;opacity:.7}
.phone-actions{display:flex;gap:6px;padding:8px 14px;flex-wrap:wrap}
.phone-actions .act{
  flex:1;min-width:0;padding:10px 6px;border-radius:10px;background:#f3efe6;
  font-size:8px;font-weight:600;text-align:center;color:var(--ink-2);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .3s;
}
.phone-actions .act i{font-size:12px;color:var(--accent)}
.phone-actions .act:nth-child(1){animation:tap 3s ease-in-out infinite}
.phone-actions .act:nth-child(2){animation:tap 3s ease-in-out infinite .5s}
.phone-actions .act:nth-child(3){animation:tap 3s ease-in-out infinite 1s}
@keyframes tap{0%,90%,100%{transform:translateY(0)}45%{transform:translateY(-3px);background:#FFE9DD}}
.phone-chart{margin:6px 14px;height:32%;position:relative;display:flex;align-items:flex-end;gap:4px;justify-content:space-around}
.phone-chart .bar{
  flex:1;background:linear-gradient(180deg,#FF5E1F,#FF8B3D);border-radius:4px 4px 0 0;
  animation:barGrow 2.5s ease-in-out infinite;transform-origin:bottom;
}
.phone-chart .bar:nth-child(1){height:40%;animation-delay:0s}
.phone-chart .bar:nth-child(2){height:75%;animation-delay:.15s}
.phone-chart .bar:nth-child(3){height:55%;animation-delay:.3s}
.phone-chart .bar:nth-child(4){height:90%;animation-delay:.45s}
.phone-chart .bar:nth-child(5){height:65%;animation-delay:.6s}
.phone-chart .bar:nth-child(6){height:85%;animation-delay:.75s}
@keyframes barGrow{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1)}}
.phone-notif{
  position:absolute;right:-30%;top:28%;width:62%;padding:8px 10px;border-radius:10px;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 24px rgba(10,14,26,.12);
  display:flex;align-items:center;gap:7px;font-size:9px;
  animation:notifSlide 5s ease-in-out infinite;
}
@keyframes notifSlide{
  0%{opacity:0;transform:translateX(20px)}
  15%,75%{opacity:1;transform:translateX(0)}
  90%,100%{opacity:0;transform:translateX(20px)}
}
.phone-notif .ico{width:22px;height:22px;border-radius:6px;background:var(--grad);color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:9px}
.phone-notif b{font-size:9px;display:block}
.phone-notif small{font-size:8px;color:var(--muted)}

/* === BANNER 2: WEB BROWSER WINDOW === */
.banner-web{position:relative;padding:24px;display:grid;place-items:center;height:100%}
.browser{
  position:relative;width:90%;height:78%;border-radius:14px;overflow:hidden;
  background:#0f1320;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 50px rgba(0,0,0,.4);
}
.browser-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1a1f2e;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-bar .dot{width:9px;height:9px;border-radius:50%}
.browser-bar .d1{background:#FF5F57}.browser-bar .d2{background:#FEBC2E}.browser-bar .d3{background:#28C840}
.browser-url{
  margin-left:8px;flex:1;background:rgba(255,255,255,.06);border-radius:6px;padding:5px 10px;
  font-size:9.5px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.7);
  display:flex;align-items:center;gap:6px;
}
.browser-url i{color:#34D9A8;font-size:8px}
.browser-url .blink{display:inline-block;width:1.5px;height:9px;background:#FF8B3D;animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}
.browser-body{padding:14px;height:calc(100% - 36px);position:relative;color:#fff;font-size:9px}
.web-hero{
  background:linear-gradient(135deg,rgba(255,94,31,.15),rgba(0,102,255,.1));
  border:1px solid rgba(255,140,60,.2);border-radius:10px;padding:14px 16px;
  margin-bottom:10px;
}
.web-hero .tag{font-family:'JetBrains Mono',monospace;font-size:8px;color:#FF8B3D;letter-spacing:1.5px;display:block;margin-bottom:4px}
.web-hero h6{font-size:13px;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.web-hero p{color:rgba(255,255,255,.5);font-size:8.5px;line-height:1.5}
.web-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.web-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:8px;
}
.web-card .num{font-size:14px;font-weight:700;color:#FF8B3D;letter-spacing:-.02em}
.web-card .lbl{font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase}
.web-lighthouse{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:rgba(52,217,168,.08);border:1px solid rgba(52,217,168,.2);border-radius:8px;
}
.lh-circle{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#34D9A8;
  background:conic-gradient(#34D9A8 0% var(--p,98%), rgba(255,255,255,.08) var(--p,98%) 100%);
  animation:lhFill 2.5s ease-out forwards;
}
.lh-circle::after{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#0f1320}
.lh-circle span{position:relative;z-index:1}
@keyframes lhFill{from{--p:0%}to{--p:98%}}
.web-lighthouse .meta b{display:block;font-size:9.5px;color:#fff}
.web-lighthouse .meta small{font-size:7.5px;color:rgba(255,255,255,.5)}
.web-cursor{
  position:absolute;width:14px;height:14px;color:#FF8B3D;font-size:14px;
  animation:cursorMove 5s ease-in-out infinite;pointer-events:none;
}
@keyframes cursorMove{
  0%{top:30%;left:40%}25%{top:50%;left:65%}50%{top:75%;left:30%}
  75%{top:55%;left:55%}100%{top:30%;left:40%}
}
.web-cursor::after{
  content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#FF5E1F;
  top:14px;left:14px;animation:cursorClick 5s ease-in-out infinite;
}
@keyframes cursorClick{
  0%,20%,30%,45%,55%,70%,80%,95%{transform:scale(0);opacity:0}
  25%,50%,75%,100%{transform:scale(3);opacity:.4}
}

/* === BANNER 3: DESIGN CANVAS === */
.banner-design{position:relative;padding:24px;height:100%}
.canvas-grid{
  position:absolute;inset:24px;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  background-image:
    linear-gradient(rgba(255,94,31,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,94,31,.05) 1px, transparent 1px);
  background-size:18px 18px;
}
.design-toolbar{
  position:absolute;top:36px;left:36px;display:flex;flex-direction:column;gap:6px;z-index:5;
  background:#fff;padding:6px;border-radius:10px;border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(10,14,26,.08);
}
.design-toolbar .tool{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;color:var(--muted);transition:all .25s;cursor:pointer;
}
.design-toolbar .tool.active{background:var(--accent);color:#fff}
.design-toolbar .tool:nth-child(1){animation:toolBlink 5s infinite}
.design-toolbar .tool:nth-child(2){animation:toolBlink 5s infinite 1.25s}
.design-toolbar .tool:nth-child(3){animation:toolBlink 5s infinite 2.5s}
.design-toolbar .tool:nth-child(4){animation:toolBlink 5s infinite 3.75s}
@keyframes toolBlink{
  0%,18%,25%,100%{background:transparent;color:var(--muted)}
  20%,23%{background:var(--accent);color:#fff}
}
.shape{
  position:absolute;border-radius:8px;
  animation:floatShape 6s ease-in-out infinite;
}
.shape.s1{
  width:32%;height:24%;top:18%;left:30%;
  background:linear-gradient(135deg,#FF5E1F,#FF8B3D);
  box-shadow:0 14px 28px rgba(255,94,31,.3);animation-delay:0s;
}
.shape.s2{
  width:24%;height:34%;top:42%;left:24%;
  background:linear-gradient(135deg,#0066FF,#5A9CFF);
  border-radius:50%;box-shadow:0 14px 28px rgba(0,102,255,.25);animation-delay:-2s;
}
.shape.s3{
  width:28%;height:18%;top:52%;left:54%;
  background:#fff;border:2px solid var(--ink);
  animation-delay:-4s;
}
.shape.s3::before{
  content:'';position:absolute;inset:5px;border-radius:4px;
  background:repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 5px);
  opacity:.15;
}
@keyframes floatShape{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.shape .handles{
  position:absolute;inset:-4px;border:1.5px dashed var(--accent);border-radius:inherit;
  opacity:0;transition:opacity .3s;
}
.shape.s1 .handles{opacity:1;animation:handleBlink 4s infinite}
@keyframes handleBlink{0%,90%,100%{opacity:1}45%,55%{opacity:0}}
.shape .handle-pt{
  position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid var(--accent);border-radius:2px;
}
.shape .handle-pt.tl{top:-3px;left:-3px}
.shape .handle-pt.tr{top:-3px;right:-3px}
.shape .handle-pt.bl{bottom:-3px;left:-3px}
.shape .handle-pt.br{bottom:-3px;right:-3px}
.design-cursor{
  position:absolute;font-size:18px;color:var(--ink);z-index:6;
  animation:designCursor 6s ease-in-out infinite;
}
.design-cursor::after{
  content:'You';position:absolute;top:18px;left:14px;background:var(--accent);color:#fff;
  padding:2px 8px;border-radius:100px;font-size:8.5px;font-weight:600;letter-spacing:.5px;
  white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif;
}
@keyframes designCursor{
  0%{top:32%;left:48%}33%{top:60%;left:38%}66%{top:55%;left:68%}100%{top:32%;left:48%}
}
.color-palette{
  position:absolute;right:36px;bottom:36px;display:flex;gap:5px;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:8px;z-index:5;
  box-shadow:0 8px 20px rgba(10,14,26,.08);
}
.color-palette .swatch{
  width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:transform .25s;
}
.color-palette .swatch:hover{transform:scale(1.25)}
.color-palette .c1{background:#FF5E1F}
.color-palette .c2{background:#0066FF}
.color-palette .c3{background:#00C896}
.color-palette .c4{background:#7C3AED}
.color-palette .c5{background:#F5A623}
.color-palette .c6{background:#0a0e1a}

/* === BANNER 4: CLOUD INFRASTRUCTURE === */
.banner-cloud{position:relative;padding:24px;height:100%;overflow:hidden}
.cloud-grid-bg{
  position:absolute;inset:0;opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
}
.cloud-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.cloud-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3;
}
.cloud-node .box{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;font-size:18px;color:#FF8B3D;
  background:rgba(255,94,31,.12);border:1px solid rgba(255,94,31,.3);
  position:relative;
  box-shadow:0 0 0 0 rgba(255,94,31,.5);
  animation:nodePulse 3s ease-in-out infinite;
}
.cloud-node .lbl{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:rgba(255,255,255,.75);letter-spacing:1px;text-transform:uppercase}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,94,31,.4)}50%{box-shadow:0 0 0 10px rgba(255,94,31,0)}}
.cloud-node.cdn{top:8%;left:50%;transform:translateX(-50%)}
.cloud-node.cdn .box{background:rgba(0,102,255,.15);border-color:rgba(0,102,255,.3);color:#5A9CFF;animation-delay:0s}
.cloud-node.lb{top:30%;left:50%;transform:translateX(-50%);animation-delay:.3s}
.cloud-node.lb .box{color:#A78BFA;background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.3)}
.cloud-node.s1{top:58%;left:14%;animation-delay:.6s}
.cloud-node.s2{top:58%;left:50%;transform:translateX(-50%);animation-delay:.9s}
.cloud-node.s3{top:58%;right:14%;animation-delay:1.2s}
.cloud-node.db{bottom:8%;left:50%;transform:translateX(-50%)}
.cloud-node.db .box{color:#34D9A8;background:rgba(0,200,150,.12);border-color:rgba(0,200,150,.3);animation-delay:1.5s}
.cloud-pulse{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#FF8B3D;
  box-shadow:0 0 12px #FF8B3D;z-index:3;
}
.cloud-stat{
  position:absolute;top:50%;left:8px;transform:translateY(-50%);
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#fff;z-index:4;
  display:flex;flex-direction:column;gap:4px;
}
.cloud-stat .row{display:flex;justify-content:space-between;gap:10px;min-width:80px}
.cloud-stat .ok{color:#34D9A8}
.cloud-stat .num{font-weight:700}
.cloud-deploy{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#fff;z-index:4;
  min-width:90px;
}
.cloud-deploy .head{color:rgba(255,255,255,.5);font-size:7.5px;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase}
.cloud-deploy .step{display:flex;align-items:center;gap:5px;padding:1px 0}
.cloud-deploy .step i{color:#34D9A8;font-size:8px}
.cloud-deploy .step:nth-child(2){animation:deployStep 4s infinite}
.cloud-deploy .step:nth-child(3){animation:deployStep 4s infinite .8s}
.cloud-deploy .step:nth-child(4){animation:deployStep 4s infinite 1.6s}
@keyframes deployStep{
  0%,25%{opacity:.3}
  30%,100%{opacity:1}
}

/* ========== INDUSTRIES ========== */
.industries{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.industry{
  position:relative;padding:28px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);
  transition:all .35s;overflow:hidden;
}
.industry::before{
  content:'';position:absolute;inset:0;background:var(--ink);transform:translateY(100%);
  transition:transform .4s;
}
.industry:hover::before{transform:translateY(0)}
.industry > *{position:relative;z-index:1;transition:color .35s}
.industry:hover h3,.industry:hover p{color:#fff}
.industry .ico{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;margin-bottom:16px;background:var(--accent-soft);color:var(--accent);
  transition:all .35s;
}
.industry:hover .ico{background:rgba(255,94,31,.2);color:#FF8B3D}
.industry h3{font-size:1.05rem;margin-bottom:6px}
.industry p{color:var(--muted);font-size:.85rem;line-height:1.5}
.industry .arrow{
  position:absolute;top:28px;right:24px;color:var(--muted);transition:all .35s;z-index:1;
}
.industry:hover .arrow{color:#FF8B3D;transform:rotate(-45deg)}

/* ========== PROCESS ========== */
.process{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.process::before{
  content:'';position:absolute;top:30px;left:8%;right:8%;height:1px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);z-index:0;
}
.step{position:relative;text-align:center;z-index:1}
.step .circle{
  width:60px;height:60px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);
  display:grid;place-items:center;margin:0 auto 20px;font-size:1.1rem;font-weight:700;
  color:var(--ink);transition:all .35s;
}
.step:hover .circle{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.08)}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.86rem;color:var(--muted);max-width:200px;margin:0 auto}

/* ========== PORTFOLIO ========== */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{
  background:#fff;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  transition:transform .35s,box-shadow .35s;
}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.case .cover{
  aspect-ratio:4/3;display:grid;place-items:center;font-size:4.5rem;
  color:rgba(255,255,255,.9);position:relative;overflow:hidden;
}
.case .cover::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 50%);
}
.case.c1 .cover{background:linear-gradient(135deg,#0066FF,#003a99)}
.case.c2 .cover{background:linear-gradient(135deg,#FF5E1F,#aa3010)}
.case.c3 .cover{background:linear-gradient(135deg,#7C3AED,#3a1473)}
.case.c4 .cover{background:linear-gradient(135deg,#00C896,#005c45)}
.case.c5 .cover{background:linear-gradient(135deg,#1a1f2e,#0a0e1a)}
.case.c6 .cover{background:linear-gradient(135deg,#F5A623,#aa7800)}
.case .body{padding:22px}
.case .meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:10px;gap:8px;flex-wrap:wrap;
}
.case .meta .platform{color:var(--accent)}
.case .meta .stat{color:var(--muted)}
.case h3{font-size:1.15rem;margin-bottom:8px}
.case p{font-size:.92rem;color:var(--muted);margin-bottom:14px}
.case .tech{display:flex;flex-wrap:wrap;gap:6px}
.case .tech span{
  font-size:11px;padding:3px 10px;border-radius:100px;background:var(--cream);
  color:var(--ink-2);border:1px solid var(--line);
}

/* ========== STATS BAND ========== */
.stats-band{background:var(--ink);color:#fff;padding:80px 5vw;position:relative;overflow:hidden}
.stats-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 400px at 50% 100%,rgba(255,94,31,.12),transparent 60%);
}
.stats-band > *{position:relative}
.stats-band h2{color:#fff}
.stats-band .eyebrow{color:#FF8B3D}
.stats-band .eyebrow::before{background:#FF8B3D}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat-item strong{
  font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:700;display:block;color:#fff;
  margin-bottom:6px;letter-spacing:-.04em;
}
.stat-item span{color:rgba(255,255,255,.6);font-size:13px;letter-spacing:2px;text-transform:uppercase;display:block}
.stat-item p{margin-top:8px;color:rgba(255,255,255,.5);font-size:.85rem}

/* ========== TECH CATEGORIES ========== */
.tech-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tech-cat{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  transition:all .35s;
}
.tech-cat:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.tech-cat .ico{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;margin-bottom:18px;background:var(--accent-soft);color:var(--accent);
}
.tech-cat h3{font-size:1.15rem;margin-bottom:6px}
.tech-cat .sub{color:var(--muted);font-size:.85rem;margin-bottom:18px;font-family:'JetBrains Mono',monospace}
.stack{display:flex;flex-wrap:wrap;gap:8px}
.stack span{
  font-size:13px;padding:6px 14px;border-radius:100px;background:var(--cream);
  border:1px solid var(--line);transition:all .25s;display:inline-flex;align-items:center;gap:6px;
}
.stack span:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tech-cat .footer-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.tech-cat .footer-note b{color:var(--ink)}

/* ========== TESTIMONIALS ========== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  position:relative;display:flex;flex-direction:column;
}
.testi .stars{margin-bottom:16px;font-size:14px}
.testi p{font-size:.95rem;color:var(--ink-2);line-height:1.65;margin-bottom:22px;flex:1}
.testi .author{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.testi .av{
  width:46px;height:46px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:1.05rem;
}
.testi .author b{display:block;font-size:.95rem}
.testi .author small{color:var(--muted);font-size:.82rem}

/* ========== FAQ ========== */
.faq{max-width:900px;margin:0 auto}
.faq-item{border-top:1px solid var(--line);padding:22px 0;cursor:pointer}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-q h3{font-size:1.1rem;font-weight:600;flex:1}
.faq-q .plus{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);
  display:grid;place-items:center;flex-shrink:0;transition:all .3s;font-size:14px;
}
.faq-item.open .faq-q .plus{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s,padding .3s,opacity .3s;
  color:var(--muted);font-size:.95rem;line-height:1.65;opacity:0;
}
.faq-item.open .faq-a{max-height:600px;padding-top:16px;opacity:1}

/* ========== CONTACT ========== */
.contact-wrap{
  display:grid;grid-template-columns:1fr 1.1fr;gap:50px;background:#fff;
  border-radius:28px;border:1px solid var(--line);padding:50px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.contact-info h3{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:14px;line-height:1.15}
.contact-info > p{color:var(--muted);margin-bottom:30px}
.office{
  display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--line);align-items:flex-start;
}
.office .flag{
  width:42px;height:42px;border-radius:10px;background:var(--cream);
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.office b{
  display:block;font-size:11px;color:var(--accent);letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:4px;font-family:'JetBrains Mono',monospace;
}
.office h4{font-size:1rem;margin-bottom:4px}
.office p{font-size:.88rem;color:var(--muted);line-height:1.5}
.office a{display:inline-block;margin-top:6px;font-size:.9rem;color:var(--accent);font-weight:500}
.office a:hover{text-decoration:underline}

.form-card{background:var(--cream);border-radius:22px;padding:32px}
.form-card h3{font-size:1.3rem;margin-bottom:6px}
.form-card .sub{color:var(--muted);font-size:.88rem;margin-bottom:24px}
.form-row{display:flex;gap:12px;margin-bottom:12px}
.form-row > *{flex:1;min-width:0}
.form-input,.form-select,.form-text{
  width:100%;padding:13px 16px;background:#fff;border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-family:inherit;font-size:14px;transition:all .25s;
}
.form-input:focus,.form-select:focus,.form-text:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,94,31,.1);
}
.form-text{resize:vertical;min-height:100px}

/* ========== FOOTER ========== */
footer{
  background:var(--ink);color:rgba(255,255,255,.7);padding:70px 5vw 28px;
  position:relative;overflow:hidden;
}
footer::before{
  content:'';position:absolute;bottom:-200px;right:-200px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.15),transparent 60%);pointer-events:none;
}
footer > *{position:relative}
.foot-cta{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:40px 0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:50px;
}
.foot-cta h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15}
.foot-cta p{color:rgba(255,255,255,.65);margin-top:10px;max-width:520px}

.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px;margin-bottom:50px;align-items:start}
.foot-about img{height:50px; margin-bottom:18px}
.foot-about p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:18px;line-height:1.6}
.foot-socials{display:flex;flex-wrap:wrap;gap:8px}
.foot-socials a{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;
  transition:all .25s;font-size:14px;
}
.foot-socials a:hover,.foot-socials a:focus{
  background:var(--accent);border-color:var(--accent);transform:translateY(-3px);
}
.foot-grid h4{color:#fff;font-size:.95rem;margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px;font-size:.88rem;transition:color .25s}
.foot-grid li a:hover{color:#FF8B3D}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
  color:rgba(255,255,255,.5);font-size:.85rem;
}
.foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom a:hover{color:#FF8B3D}

/* ========== AI CHAT WIDGET ========== */
.chat-fab{
  position:fixed;right:20px;bottom:20px;z-index:999;
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:#fff;font-size:22px;
  box-shadow:0 16px 36px rgba(10,14,26,.3);display:grid;place-items:center;
  transition:all .3s;
}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab .badge{
  position:absolute;top:-3px;right:-3px;width:20px;height:20px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center;
  font-weight:700;border:2px solid var(--bg);
}
.chat-panel{
  position:fixed;right:20px;bottom:90px;z-index:999;width:360px;max-width:calc(100vw - 28px);
  height:520px;max-height:calc(100vh - 120px);background:#fff;border:1px solid var(--line);
  border-radius:20px;display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 28px 72px rgba(10,14,26,.22);animation:slideUp .3s ease;
}
.chat-panel.open{display:flex}
@keyframes slideUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.chat-head{padding:16px 18px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:12px}
.chat-head .av{
  width:38px;height:38px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:16px;
}
.chat-head b{display:block;font-size:.95rem}
.chat-head small{color:#FF8B3D;font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:1px}
.chat-head .live{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:#34D9A8;
  margin-right:5px;animation:pulse-g 1.6s infinite;
}
@keyframes pulse-g{
  0%{box-shadow:0 0 0 0 rgba(52,217,168,.7)}
  70%{box-shadow:0 0 0 6px rgba(52,217,168,0)}
  100%{box-shadow:0 0 0 0 rgba(52,217,168,0)}
}
.chat-close{
  margin-left:auto;background:transparent;border:none;color:#fff;font-size:16px;
  opacity:.7;transition:opacity .2s;width:32px;height:32px;border-radius:50%;
}
.chat-close:hover{opacity:1}
.chat-body{
  flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  background:var(--cream);
}
.msg{padding:11px 15px;border-radius:14px;font-size:13.5px;max-width:85%;line-height:1.55}
.msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--ink)}
.msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .quick{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.msg .quick button{
  padding:6px 12px;border-radius:100px;background:var(--accent-soft);
  border:1px solid rgba(255,94,31,.2);color:var(--accent);font-size:12px;
  font-family:inherit;transition:all .25s;font-weight:500;
}
.msg .quick button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.chat-input{padding:14px;border-top:1px solid var(--line);display:flex;gap:8px;background:#fff}
.chat-input input{
  flex:1;padding:11px 16px;border-radius:100px;background:var(--cream);
  border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:13.5px;
}
.chat-input input:focus{outline:none;border-color:var(--accent)}
.chat-input button{
  width:40px;height:40px;border-radius:50%;border:none;background:var(--accent);
  color:#fff;font-size:14px;transition:transform .2s;flex-shrink:0;
}
.chat-input button:hover{transform:scale(1.06)}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px){
  .foot-grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:24px}
  .foot-grid .foot-col-extra{grid-column:span 2}
}
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr;padding-top:50px;gap:40px}
  .hero-visual{max-width:440px;margin:20px auto 0}
  .ai-grid,.tech-cats,.testi-grid,.portfolio,.models{grid-template-columns:repeat(2,1fr)}
  .industries{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:repeat(2,1fr);gap:30px}
  .process::before{display:none}
  .cap-row{grid-template-columns:1fr;gap:30px}
  .cap-row.reverse .cap-text{order:1}
  .cap-row.reverse .cap-visual{order:2}
  .section-head{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .foot-about{grid-column:1 / -1}
}
@media (max-width: 768px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:#fff;padding:20px;gap:6px;border-top:1px solid var(--line);
    align-items:stretch;box-shadow:var(--shadow-md);
  }
  .nav-links.open li a{padding:10px 0;display:block}
  .menu-toggle{display:flex}
  .topbar{display:none}
  .nav-actions .btn-ghost{display:none}
  .nav-actions .btn-primary{padding:11px 18px;font-size:13px}
  section.block{padding:60px 5vw}
  .ai-eco{padding:70px 5vw}
  .challenges,.industries,.ai-grid,.tech-cats,.testi-grid,.portfolio,.models{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .contact-wrap{grid-template-columns:1fr;padding:28px;gap:32px}
  .form-row{flex-direction:column}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-about{grid-column:span 2}
  .foot-cta{grid-template-columns:1fr;text-align:left;gap:24px}
  .foot-cta a{align-self:flex-start}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .cap-text ul{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .trust-row{gap:18px 30px}
  .float-card{transform:scale(.85)}
  .fc-1{top:-10px;right:-10px}
  .fc-2{bottom:30px;left:-10px}
  .fc-3{bottom:-10px;right:-10px}
  .chat-panel{right:10px;bottom:80px;width:calc(100vw - 20px);height:calc(100vh - 110px)}
  .chat-fab{right:14px;bottom:14px;width:54px;height:54px}
}
@media (max-width: 480px){
  .foot-grid{grid-template-columns:1fr}
  .foot-about{grid-column:span 1}
  .stats-grid{grid-template-columns:1fr;gap:30px}
  .industries{grid-template-columns:1fr}
  .brand img{height:32px}
  .hero{padding:40px 5vw 70px}
  .section-head{margin-bottom:40px}
  .challenge,.model,.tech-cat,.testi,.ai-card{padding:24px 22px}
  .cap-visual{aspect-ratio:1.2/1}
  .phone-frame{width:54%}
  .cloud-node .box{width:38px;height:38px;font-size:14px}
  .cloud-stat,.cloud-deploy{font-size:7.5px;padding:6px 8px}
  .design-toolbar .tool{width:20px;height:20px;font-size:9px}
  .color-palette .swatch{width:12px;height:12px}
  .form-card{padding:24px}
  h1.hero-title{font-size:2rem}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* Touch-friendly focus states */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ========== SUBPAGE LAYOUT (service / AI lab pages) ========== */
/* ========== BREADCRUMB ========== */
.breadcrumb{
  padding:18px 5vw 0;font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb i{font-size:9px;opacity:.5}
.breadcrumb span[aria-current]{color:var(--ink);font-weight:500}

/* ========== AI HERO ========== */
.ai-hero{
  position:relative;padding:50px 5vw 90px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:50px;align-items:center;overflow:hidden;
}
.ai-hero::before{
  content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.13),transparent 60%);z-index:0;pointer-events:none;
}
.ai-hero::after{
  content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.1),transparent 60%);z-index:0;pointer-events:none;
}
.ai-hero > *{position:relative;z-index:1}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);
  box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.hero-badge .pill{
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:1px;
}
.live{
  width:7px;height:7px;border-radius:50%;background:var(--accent-3);display:inline-block;
  margin-right:6px;animation:pulse-g 1.6s infinite;
}
@keyframes pulse-g{
  0%{box-shadow:0 0 0 0 rgba(0,200,150,.7)}
  70%{box-shadow:0 0 0 6px rgba(0,200,150,0)}
  100%{box-shadow:0 0 0 0 rgba(0,200,150,0)}
}

.ai-hero h1{font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.06;margin-bottom:22px;letter-spacing:-.035em}
.ai-hero .lead{color:var(--muted);font-size:clamp(1rem,1.25vw,1.08rem);max-width:560px;margin-bottom:30px}
.ai-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:36px}
.text-link{font-size:14px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.text-link:hover{color:var(--accent)}

.hero-meta{display:flex;gap:36px;flex-wrap:wrap}
.hero-meta > div{font-size:13px;color:var(--muted)}
.hero-meta strong{font-size:1.5rem;color:var(--ink);display:block;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}

/* ========== AI BANNER (base for all six) ========== */
.ai-banner{
  position:relative;aspect-ratio:1/1;max-width:540px;margin-left:auto;width:100%;
  border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#1a1f2e 0%,#0a0e1a 100%);
  box-shadow:0 30px 70px rgba(10,14,26,.25);
}
.ai-banner::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 30% 20%,rgba(255,94,31,.18),transparent 40%),
             radial-gradient(circle at 70% 80%,rgba(124,58,237,.15),transparent 45%);
}
.ai-banner::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse at center,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 100%);
}

/* ----- BANNER 1: GenAI Chat Flow ----- */
.banner-genai .genai-window{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80%;background:rgba(15,19,32,.85);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.4);z-index:3;
}
.genai-head{
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.05);
}
.genai-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:13px;
}
.genai-head b{display:block;font-size:12px;color:#fff}
.genai-head small{font-size:9.5px;color:rgba(255,255,255,.5);font-family:'JetBrains Mono',monospace;letter-spacing:.5px}
.genai-chat{padding:14px;display:flex;flex-direction:column;gap:8px}
.g-msg{
  padding:8px 12px;border-radius:12px;font-size:11px;line-height:1.5;max-width:85%;
  animation:msgIn .5s ease both;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.g-msg.user{
  background:linear-gradient(135deg,#FF5E1F,#FF8B3D);color:#fff;align-self:flex-end;
  border-bottom-right-radius:4px;animation-delay:0s;
}
.g-msg.bot{
  background:rgba(255,255,255,.06);color:#fff;align-self:flex-start;
  border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px;animation-delay:1.4s;
}
.g-msg.bot b{color:#FF8B3D}
.g-thinking{
  align-self:flex-start;background:rgba(255,255,255,.04);padding:8px 12px;border-radius:12px;
  display:flex;align-items:center;gap:8px;font-size:10px;color:rgba(255,255,255,.5);
  animation:msgIn .5s ease .7s both;
}
.g-thinking em{font-style:normal;font-family:'JetBrains Mono',monospace}
.g-thinking .dot{
  width:5px;height:5px;border-radius:50%;background:#FF8B3D;animation:typing 1.2s infinite;
}
.g-thinking .dot:nth-child(2){animation-delay:.2s}
.g-thinking .dot:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1.2)}}
.g-sources{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.g-sources span{
  font-size:8.5px;padding:3px 8px;border-radius:100px;background:rgba(255,140,60,.12);
  border:1px solid rgba(255,140,60,.25);color:#FF8B3D;
  display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;
}
.knowledge-source{
  position:absolute;background:rgba(15,19,32,.9);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px;
  font-size:10px;color:#fff;display:flex;align-items:center;gap:6px;font-weight:500;z-index:4;
  font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
}
.knowledge-source i{color:#FF8B3D;font-size:10px}
.ks-1{top:8%;left:6%;animation:floatA 5s ease-in-out infinite}
.ks-2{top:46%;left:3%;animation:floatA 5s ease-in-out infinite -1.5s}
.ks-3{top:82%;left:8%;animation:floatA 5s ease-in-out infinite -3s}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.genai-flow{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ----- BANNER 2: AI Agents Network ----- */
.banner-agents .agent-orbit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(255,140,60,.25);
}
.banner-agents .agent-orbit-2{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:85%;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(124,58,237,.18);
}
.agent-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:90px;height:90px;border-radius:50%;
  background:linear-gradient(135deg,#FF5E1F,#7C3AED);
  display:grid;place-items:center;color:#fff;font-size:32px;z-index:3;
  box-shadow:0 0 60px rgba(255,94,31,.5),inset 0 0 20px rgba(255,255,255,.2);
  animation:corePulse 3s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}
.agent-core::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,140,60,.4);
  animation:ringExpand 2s ease-out infinite;
}
@keyframes ringExpand{
  0%{transform:scale(.8);opacity:1}
  100%{transform:scale(1.6);opacity:0}
}
.agent-node{
  position:absolute;width:54px;height:54px;border-radius:14px;
  background:rgba(15,19,32,.9);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  display:grid;place-items:center;color:#FF8B3D;font-size:18px;z-index:4;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.agent-node .lbl{
  position:absolute;bottom:-22px;font-size:9px;color:rgba(255,255,255,.7);
  font-family:'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;
}
.agent-node.an-1{top:8%;left:50%;transform:translateX(-50%);animation:orbit1 8s linear infinite}
.agent-node.an-2{top:50%;right:8%;transform:translateY(-50%);color:#5A9CFF;animation:orbit2 8s linear infinite}
.agent-node.an-3{bottom:8%;left:50%;transform:translateX(-50%);color:#A78BFA;animation:orbit3 8s linear infinite}
.agent-node.an-4{top:50%;left:8%;transform:translateY(-50%);color:#34D9A8;animation:orbit4 8s linear infinite}
@keyframes orbit1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes orbit2{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(6px)}}
@keyframes orbit3{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@keyframes orbit4{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-6px)}}

.agent-action{
  position:absolute;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 11px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#fff;z-index:5;
  display:flex;align-items:center;gap:6px;
}
.agent-action i{color:#34D9A8;font-size:9px}
.agent-action.aa-1{top:18%;right:18%;animation:floatA 4s ease-in-out infinite}
.agent-action.aa-2{bottom:22%;left:14%;animation:floatA 4s ease-in-out infinite -2s}

.agent-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ----- BANNER 3: Machine Learning Chart ----- */
.banner-ml .ml-chart{
  position:absolute;left:8%;right:8%;top:14%;bottom:14%;z-index:2;
}
.ml-chart svg{width:100%;height:100%}
.ml-axis{stroke:rgba(255,255,255,.1);stroke-width:1}
.ml-line-actual{
  stroke:#FF8B3D;stroke-width:2.5;fill:none;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:drawLine 3s ease-out forwards;
}
.ml-line-predicted{
  stroke:#5A9CFF;stroke-width:2.5;fill:none;stroke-dasharray:6 4;
  animation:drawLine 3s ease-out 1s forwards;stroke-dashoffset:1000;
}
@keyframes drawLine{to{stroke-dashoffset:0}}
.ml-area{fill:url(#mlGrad);opacity:0;animation:fadeArea 2s ease 2.5s forwards}
@keyframes fadeArea{to{opacity:.3}}
.ml-dot{fill:#FF8B3D;animation:dotIn .4s ease both}
.ml-dot:nth-child(1){animation-delay:.4s}
.ml-dot:nth-child(2){animation-delay:.6s}
.ml-dot:nth-child(3){animation-delay:.8s}
.ml-dot:nth-child(4){animation-delay:1s}
.ml-dot:nth-child(5){animation-delay:1.2s}
.ml-dot:nth-child(6){animation-delay:1.4s}
.ml-dot:nth-child(7){animation-delay:1.6s}
@keyframes dotIn{from{r:0}to{r:4}}

.ml-card{
  position:absolute;background:rgba(15,19,32,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;
  font-family:'JetBrains Mono',monospace;color:#fff;z-index:4;
}
.ml-card .lbl{font-size:8.5px;color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.ml-card .val{font-size:18px;color:#FF8B3D;font-weight:700;letter-spacing:-.02em}
.ml-card .delta{font-size:9.5px;color:#34D9A8;margin-top:2px}
.ml-card.mc-1{top:12%;left:8%;animation:floatA 5s ease-in-out infinite}
.ml-card.mc-2{top:12%;right:8%;animation:floatA 5s ease-in-out infinite -2s}
.ml-card.mc-2 .val{color:#5A9CFF}

.ml-legend{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;font-size:10px;color:rgba(255,255,255,.7);
  font-family:'JetBrains Mono',monospace;letter-spacing:.5px;z-index:3;
}
.ml-legend span{display:flex;align-items:center;gap:6px}
.ml-legend .key{width:12px;height:2.5px;background:#FF8B3D;border-radius:2px}
.ml-legend .key.predicted{background:#5A9CFF}

/* ----- BANNER 4: Computer Vision Detection ----- */
.banner-cv .cv-scene{
  position:absolute;left:8%;right:8%;top:8%;bottom:8%;
  background:linear-gradient(135deg,#1a2540 0%,#0a0e1a 100%);
  border-radius:14px;overflow:hidden;z-index:2;
  border:1px solid rgba(255,255,255,.06);
}
.cv-scanner{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#34D9A8,transparent);
  box-shadow:0 0 14px #34D9A8;animation:scan 3s ease-in-out infinite;z-index:5;
}
@keyframes scan{
  0%,100%{top:0%}50%{top:calc(100% - 2px)}
}
.cv-box{
  position:absolute;border:2px solid;border-radius:4px;animation:boxIn .5s ease both;
}
@keyframes boxIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.cv-box .lbl{
  position:absolute;top:-22px;left:-2px;font-size:9px;font-weight:700;
  padding:3px 8px;border-radius:4px 4px 4px 0;color:#fff;
  font-family:'JetBrains Mono',monospace;letter-spacing:.5px;white-space:nowrap;
}
.cv-box.c1{top:18%;left:14%;width:34%;height:42%;border-color:#FF8B3D;animation-delay:.5s}
.cv-box.c1 .lbl{background:#FF8B3D}
.cv-box.c2{top:28%;right:18%;width:24%;height:30%;border-color:#5A9CFF;animation-delay:1s}
.cv-box.c2 .lbl{background:#5A9CFF}
.cv-box.c3{bottom:14%;left:30%;width:28%;height:24%;border-color:#34D9A8;animation-delay:1.5s}
.cv-box.c3 .lbl{background:#34D9A8}
.cv-corner{position:absolute;width:10px;height:10px;border:2px solid inherit}
.cv-corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.cv-corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.cv-corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.cv-corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* Decorative shapes inside the scene to suggest objects */
.cv-obj{position:absolute;border-radius:50%;filter:blur(2px);opacity:.6}
.cv-obj.o1{top:30%;left:22%;width:18%;aspect-ratio:1;background:radial-gradient(circle,#FF8B3D,transparent)}
.cv-obj.o2{top:36%;right:24%;width:14%;aspect-ratio:1;background:radial-gradient(circle,#5A9CFF,transparent)}
.cv-obj.o3{bottom:20%;left:38%;width:16%;aspect-ratio:1;background:radial-gradient(circle,#34D9A8,transparent)}

.cv-stat{
  position:absolute;top:14px;left:14px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#34D9A8;z-index:6;
  display:flex;align-items:center;gap:6px;
}
.cv-stat .rec{
  width:6px;height:6px;border-radius:50%;background:#34D9A8;
  animation:recBlink 1s infinite;
}
@keyframes recBlink{50%{opacity:.3}}

.cv-fps{
  position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#fff;z-index:6;
}
.cv-fps b{color:#FF8B3D}

/* ----- BANNER 5: NLP Document AI ----- */
.banner-nlp .doc-stack{
  position:absolute;left:12%;top:50%;transform:translateY(-50%);
  width:36%;aspect-ratio:.75;z-index:2;
}
.doc-paper{
  position:absolute;inset:0;background:#fff;border-radius:8px;
  padding:14px 12px;box-shadow:0 14px 30px rgba(0,0,0,.3);
  animation:docStack 3s ease infinite;transform-origin:bottom right;
}
.doc-paper:nth-child(1){animation-delay:0s;z-index:3}
.doc-paper:nth-child(2){
  transform:translate(6px,6px) rotate(2deg);z-index:2;opacity:.5;
}
.doc-paper:nth-child(3){
  transform:translate(12px,12px) rotate(4deg);z-index:1;opacity:.3;
}
@keyframes docStack{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-2px,-2px) rotate(-.5deg)}}
.doc-line{height:5px;border-radius:2px;background:var(--cream);margin-bottom:5px}
.doc-line.short{width:60%}
.doc-line.hl{background:linear-gradient(90deg,#FFE9DD,#FF8B3D 20%,#FFE9DD 40%);background-size:200% 100%;animation:hl 2s linear infinite}
@keyframes hl{to{background-position:-200% 0}}
.doc-entity{
  display:inline-block;padding:1px 6px;border-radius:4px;font-size:7px;font-weight:700;
  margin-right:3px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
}
.doc-entity.org{background:#FFE9DD;color:#FF5E1F}
.doc-entity.date{background:#D6E4FF;color:#0066FF}
.doc-entity.money{background:#D2F5E5;color:#00955F}
.doc-entity.person{background:#EDE3FF;color:#7C3AED}

.doc-flow{position:absolute;left:48%;right:8%;top:18%;bottom:18%;z-index:2}
.extract-card{
  background:rgba(15,19,32,.85);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 11px;
  margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#fff;
  animation:extractIn .5s ease both;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.extract-card:nth-child(1){animation-delay:.4s}
.extract-card:nth-child(2){animation-delay:.8s}
.extract-card:nth-child(3){animation-delay:1.2s}
.extract-card:nth-child(4){animation-delay:1.6s}
@keyframes extractIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.extract-card .lbl{color:rgba(255,255,255,.5);font-size:8.5px;letter-spacing:.5px;text-transform:uppercase}
.extract-card .val{color:#FF8B3D;font-weight:700;font-size:10px}
.extract-card.v2 .val{color:#5A9CFF}
.extract-card.v3 .val{color:#A78BFA}
.extract-card.v4 .val{color:#34D9A8}

/* Arrow between doc and extracts */
.doc-arrow{
  position:absolute;left:48%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:14%;height:2px;background:linear-gradient(90deg,#FF5E1F,transparent);
}
.doc-arrow::after{
  content:'';position:absolute;right:-2px;top:-4px;
  border:5px solid transparent;border-left-color:#FF5E1F;
}

/* ----- BANNER 6: MLOps Pipeline ----- */
.banner-mlops .pipeline{
  position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:space-between;
}
.pipe-stage{
  width:60px;height:60px;border-radius:14px;background:rgba(15,19,32,.9);
  border:1.5px solid rgba(255,255,255,.1);display:grid;place-items:center;
  color:#FF8B3D;font-size:20px;position:relative;z-index:2;
  animation:stageGlow 4s ease-in-out infinite;
}
.pipe-stage.s1{animation-delay:0s}
.pipe-stage.s2{animation-delay:.7s;color:#5A9CFF}
.pipe-stage.s3{animation-delay:1.4s;color:#A78BFA}
.pipe-stage.s4{animation-delay:2.1s;color:#34D9A8}
@keyframes stageGlow{
  0%,90%,100%{box-shadow:0 0 0 0 rgba(255,140,60,0)}
  10%,30%{box-shadow:0 0 0 6px rgba(255,140,60,.3)}
}
.pipe-stage .lbl{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:9px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
  color:rgba(255,255,255,.7);white-space:nowrap;text-transform:uppercase;
}
.pipe-stage .check{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:#34D9A8;color:#fff;font-size:9px;display:grid;place-items:center;
  opacity:0;animation:checkIn .4s ease forwards;
}
.pipe-stage.s1 .check{animation-delay:.8s}
.pipe-stage.s2 .check{animation-delay:1.5s}
.pipe-stage.s3 .check{animation-delay:2.2s}
.pipe-stage.s4 .check{animation-delay:2.9s}
@keyframes checkIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

.pipe-line{
  flex:1;height:2px;background:rgba(255,255,255,.1);position:relative;margin:0 8px;
}
.pipe-line::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,#FF8B3D,#5A9CFF);
  animation:pipeFill 4s ease-in-out infinite;
}
@keyframes pipeFill{
  0%,90%,100%{width:0%}
  20%,30%{width:33%}
  45%,55%{width:66%}
  70%,80%{width:100%}
}

.mlops-monitor{
  position:absolute;top:10%;left:8%;width:36%;
  background:rgba(15,19,32,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#fff;z-index:3;
}
.mlops-monitor .head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  color:rgba(255,255,255,.5);font-size:8.5px;letter-spacing:1px;text-transform:uppercase;
}
.mlops-monitor .head .ok{color:#34D9A8}
.mlops-spark{
  height:24px;display:flex;align-items:flex-end;gap:2px;
}
.mlops-spark .bar{
  flex:1;background:linear-gradient(180deg,#FF8B3D,#FF5E1F);border-radius:1.5px;
  animation:sparkGrow 1.5s ease-in-out infinite;
}
.mlops-spark .bar:nth-child(1){height:40%;animation-delay:0s}
.mlops-spark .bar:nth-child(2){height:65%;animation-delay:.1s}
.mlops-spark .bar:nth-child(3){height:50%;animation-delay:.2s}
.mlops-spark .bar:nth-child(4){height:80%;animation-delay:.3s}
.mlops-spark .bar:nth-child(5){height:60%;animation-delay:.4s}
.mlops-spark .bar:nth-child(6){height:90%;animation-delay:.5s}
.mlops-spark .bar:nth-child(7){height:75%;animation-delay:.6s}
.mlops-spark .bar:nth-child(8){height:85%;animation-delay:.7s}
@keyframes sparkGrow{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1.05)}}

.mlops-alert{
  position:absolute;top:10%;right:8%;width:38%;
  background:rgba(15,19,32,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,140,60,.3);border-radius:10px;padding:10px 12px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#fff;z-index:3;
}
.mlops-alert .head{color:#FF8B3D;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.mlops-alert .row{display:flex;justify-content:space-between;padding:2px 0}
.mlops-alert .row .ok{color:#34D9A8}
.mlops-alert .row .warn{color:#FF8B3D}

.mlops-deploy{
  position:absolute;bottom:10%;left:50%;transform:translateX(-50%);
  background:rgba(0,200,150,.12);backdrop-filter:blur(6px);
  border:1px solid rgba(0,200,150,.3);border-radius:100px;padding:6px 14px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#34D9A8;z-index:3;
  display:flex;align-items:center;gap:6px;font-weight:600;
}
.mlops-deploy .rec{width:6px;height:6px;border-radius:50%;background:#34D9A8;animation:recBlink 1.2s infinite}

/* ========== BLOCK / SECTIONS ========== */
.block{padding:90px 5vw;position:relative}
.ai-block.alt{background:var(--cream)}
.section-head{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;margin-bottom:60px;align-items:end}
.section-title{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em}
.section-head > div p,.section-head > p{color:var(--muted);font-size:1rem;max-width:540px}

/* ========== AI FEATURES (what we build) ========== */
.ai-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ai-feature{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.ai-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.ai-feature .ico{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:18px;
  background:var(--accent-soft);color:var(--accent);
}
.ai-feature h3{font-size:1.15rem;margin-bottom:8px}
.ai-feature p{color:var(--muted);font-size:.93rem}

/* ========== USE CASES ========== */
.use-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.use-case{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column;
}
.use-case:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.industry-tag{
  display:inline-block;padding:4px 12px;border-radius:100px;background:var(--accent-soft);
  color:var(--accent);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;margin-bottom:16px;align-self:flex-start;
}
.use-case h3{font-size:1.2rem;margin-bottom:10px}
.use-case > p{color:var(--muted);font-size:.93rem;margin-bottom:20px;flex:1}
.metrics{display:flex;gap:24px;padding-top:18px;border-top:1px solid var(--line)}
.metrics > div{flex:1}
.metrics strong{
  display:block;font-size:1.4rem;color:var(--accent);font-weight:700;letter-spacing:-.02em;margin-bottom:2px;
}
.metrics span{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}

/* ========== STACK GRID ========== */
.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stack-col{
  padding:28px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);
  transition:all .3s;
}
.stack-col:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.stack-col h4{font-size:.92rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;font-family:'JetBrains Mono',monospace;color:var(--accent)}
.stack-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.stack-list li{
  font-size:.92rem;color:var(--ink-2);display:flex;align-items:center;gap:10px;
  padding:6px 0;border-top:1px solid var(--line);
}
.stack-list li:first-child{border-top:none;padding-top:0}
.stack-list .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.d-orange{background:#FF5E1F}
.d-purple{background:#7C3AED}
.d-blue{background:#0066FF}
.d-green{background:#00C896}

/* ========== AI PROCESS ========== */
.ai-process{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ai-step{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  position:relative;transition:all .35s;
}
.ai-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step-num{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);
  letter-spacing:2px;display:block;margin-bottom:16px;font-weight:500;
}
.ai-step h3{font-size:1.18rem;margin-bottom:8px}
.ai-step p{color:var(--muted);font-size:.93rem}

/* ========== FAQ ========== */
.faq{max-width:900px;margin:0 auto}
.faq-item{border-top:1px solid var(--line);padding:22px 0;cursor:pointer}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q h3{font-size:1.1rem;font-weight:600;flex:1}
.faq-q .plus{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);
  display:grid;place-items:center;flex-shrink:0;transition:all .3s;font-size:14px;
}
.faq-item[open] .faq-q .plus{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg)}
.faq-a{color:var(--muted);font-size:.95rem;line-height:1.65;padding-top:14px}

/* ========== RELATED ========== */
.related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:50px}
.related-card{
  padding:24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);
  transition:all .35s;
}
.related-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.related-card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:18px;
  background:var(--accent-soft);color:var(--accent);margin-bottom:14px;
}
.related-card h4{font-size:1rem;margin-bottom:6px}
.related-card p{font-size:.85rem;color:var(--muted);line-height:1.5}

/* ========== CTA BAND ========== */
.ai-cta{
  background:var(--ink);color:#fff;padding:80px 5vw;text-align:center;position:relative;overflow:hidden;
}
.ai-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 400px at 50% 100%,rgba(255,94,31,.15),transparent 60%);
}
.ai-cta > *{position:relative}
.ai-cta h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.4rem);margin-bottom:14px}
.ai-cta p{color:rgba(255,255,255,.7);max-width:600px;margin:0 auto 26px}

/* ========== FOOTER ========== */
footer{background:var(--ink);color:rgba(255,255,255,.7);padding:70px 5vw 28px;position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;bottom:-200px;right:-200px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.13),transparent 60%);pointer-events:none;
}
footer > *{position:relative}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:36px;margin-bottom:50px;align-items:start}
.foot-about img{height:50px;margin-bottom:18px}
.foot-about p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:18px;line-height:1.6}
.foot-socials{display:flex;gap:8px}
.foot-socials a{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;
  transition:all .25s;font-size:14px;
}
.foot-socials a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.foot-grid h4{color:#fff;font-size:.95rem;margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px;font-size:.88rem}
.foot-grid li a:hover{color:#FF8B3D}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
  color:rgba(255,255,255,.5);font-size:.85rem;
}
.foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap}

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px){
  .ai-hero{grid-template-columns:1fr;padding-top:30px;gap:40px}
  .ai-banner{max-width:480px;margin:0 auto}
  .ai-features,.use-cases,.ai-process{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .section-head{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .foot-about{grid-column:1 / -1}
}
@media (max-width: 768px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:#fff;padding:20px;gap:6px;border-top:1px solid var(--line);
    align-items:stretch;box-shadow:var(--shadow-md);
  }
  .nav-links.open li a{padding:10px 0;display:block}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .topbar{display:none}
  .nav-actions .btn-ghost{display:none}
  .block{padding:60px 5vw}
  .ai-features,.use-cases,.ai-process,.stack-grid,.related-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-about{grid-column:span 2}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .ai-banner{aspect-ratio:1/1;max-width:380px}
  .agent-core{width:70px;height:70px;font-size:24px}
  .agent-node{width:42px;height:42px;font-size:14px}
  .pipe-stage{width:48px;height:48px;font-size:16px}
  .mlops-monitor,.mlops-alert{font-size:8px;padding:7px 9px}
}
@media (max-width: 480px){
  .foot-grid{grid-template-columns:1fr}
  .foot-about{grid-column:span 1}
  .hero-meta{gap:20px}
  .hero-meta strong{font-size:1.3rem}
  .ai-hero h1{font-size:1.9rem}
  .brand img{height:32px}
}

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

/* ========== SERVICE & INDUSTRY BANNERS + EXTENDED TEMPLATES ========== */
/* ============================================================
   SERVICE & INDUSTRY PAGE BANNERS
   ============================================================ */

/* ---- SERVICE: Mobile App Dev ---- */
.banner-svc-mobile{display:grid;place-items:center;padding:24px;position:relative}
.banner-svc-mobile .phones{position:relative;width:80%;aspect-ratio:1.4/1;z-index:2}
.svc-phone{
  position:absolute;width:38%;aspect-ratio:9/18;border-radius:24px;
  background:linear-gradient(180deg,#0a0e1a,#1a1f2e);
  padding:6px;box-shadow:0 24px 50px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
}
.svc-phone .screen{
  width:100%;height:100%;border-radius:18px;overflow:hidden;position:relative;
}
.svc-phone-1{top:0;left:8%;transform:rotate(-6deg);z-index:2;animation:phoneFloat 5s ease-in-out infinite}
.svc-phone-1 .screen{background:linear-gradient(180deg,#FF5E1F,#FF8B3D)}
.svc-phone-2{top:5%;right:8%;transform:rotate(6deg);z-index:3;animation:phoneFloat 5s ease-in-out infinite -2.5s}
.svc-phone-2 .screen{background:linear-gradient(180deg,#0066FF,#5A9CFF)}
.svc-phone-3{top:24%;left:50%;transform:translateX(-50%);z-index:4;animation:phoneFloat 5s ease-in-out infinite -1s}
.svc-phone-3 .screen{background:linear-gradient(180deg,#7C3AED,#A78BFA)}
@keyframes phoneFloat{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}50%{transform:translate(0,-8px) rotate(var(--r,0deg))}}
.svc-phone-1{--r:-6deg}.svc-phone-2{--r:6deg}.svc-phone-3{--r:0deg}
.svc-phone .screen::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 50%);
}
.svc-phone .app-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:22px;color:#fff;opacity:.9;
}
.svc-stat{
  position:absolute;background:rgba(15,19,32,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;
  font-family:'JetBrains Mono',monospace;color:#fff;font-size:11px;z-index:5;
}
.svc-stat .lbl{font-size:8.5px;color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;display:block}
.svc-stat .val{font-size:16px;color:#FF8B3D;font-weight:700;letter-spacing:-.02em}
.svc-stat .v2{color:#34D9A8}.svc-stat .v3{color:#5A9CFF}
.svc-stat.s1{top:8%;left:6%;animation:floatA 5s ease-in-out infinite}
.svc-stat.s2{bottom:8%;right:6%;animation:floatA 5s ease-in-out infinite -2.5s}

/* ---- SERVICE: Web Dev ---- */
.banner-svc-web{padding:24px;position:relative;height:100%}
.web-window{
  position:absolute;left:10%;right:10%;top:10%;bottom:30%;border-radius:14px;
  background:#0f1320;border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.4);z-index:2;
}
.web-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1a1f2e;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.web-bar .d{width:8px;height:8px;border-radius:50%}
.web-bar .d1{background:#FF5F57}.web-bar .d2{background:#FEBC2E}.web-bar .d3{background:#28C840}
.web-bar .url{
  margin-left:8px;flex:1;background:rgba(255,255,255,.06);border-radius:5px;padding:3px 9px;
  font-size:9.5px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.7);
}
.web-body{padding:14px;color:#fff}
.web-body h6{
  font-size:16px;background:linear-gradient(135deg,#FF8B3D,#A78BFA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:10px;letter-spacing:-.02em;
}
.web-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.web-block{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:6px;padding:8px;
}
.web-block .num{font-size:14px;font-weight:700;color:#FF8B3D}
.web-block .lbl{font-size:7px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase}
.web-code{
  position:absolute;left:8%;right:8%;bottom:8%;height:18%;
  background:#0a0e1a;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:rgba(255,255,255,.6);z-index:3;
}
.web-code .line{display:block;white-space:nowrap;overflow:hidden}
.web-code .typed{
  border-right:1.5px solid #FF8B3D;animation:typeBlink 1s infinite;
  width:0;animation:typing 4s steps(40,end) infinite,typeBlink 1s infinite;
  display:inline-block;overflow:hidden;
}
@keyframes typing{0%,90%,100%{width:0}30%,70%{width:80%}}
@keyframes typeBlink{50%{border-color:transparent}}
.web-code .k{color:#A78BFA}.web-code .s{color:#34D9A8}.web-code .c{color:rgba(255,255,255,.35)}

/* ---- SERVICE: UI/UX Design ---- */
.banner-svc-design{padding:24px;position:relative;height:100%}
.design-board{
  position:absolute;inset:8% 8% 8% 8%;background:#fff;border-radius:12px;
  overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.4);z-index:2;
}
.design-board::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,94,31,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,94,31,.06) 1px,transparent 1px);
  background-size:20px 20px;
}
.design-mockup{
  position:absolute;border-radius:8px;background:#fff;
  box-shadow:0 10px 24px rgba(10,14,26,.1);border:1px solid var(--line);
  padding:10px;
}
.dm-1{top:14%;left:8%;width:36%;height:38%;animation:dmFloat 6s ease-in-out infinite}
.dm-2{top:14%;right:8%;width:42%;height:32%;animation:dmFloat 6s ease-in-out infinite -2s}
.dm-3{bottom:14%;left:14%;width:50%;height:36%;animation:dmFloat 6s ease-in-out infinite -4s}
@keyframes dmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dm-bar{height:6px;border-radius:3px;margin-bottom:5px;background:#f3efe6}
.dm-bar.tall{height:14px;background:linear-gradient(90deg,#FF5E1F,#FF8B3D);width:60%;border-radius:4px}
.dm-bar.short{width:50%}
.dm-bar.btn{
  display:inline-block;height:18px;width:60px;border-radius:9px;
  background:linear-gradient(135deg,#FF5E1F,#FF8B3D);margin-top:4px;
}
.dm-circle{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#0066FF,#7C3AED);
  position:absolute;top:10px;right:10px;
}
.design-handle{
  position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--accent);
  border-radius:2px;
}
.dm-1 .design-handle.tl{top:-5px;left:-5px}
.dm-1 .design-handle.tr{top:-5px;right:-5px}
.dm-1 .design-handle.bl{bottom:-5px;left:-5px}
.dm-1 .design-handle.br{bottom:-5px;right:-5px}
.dm-1{border:1.5px dashed var(--accent)}
.design-cursor-svc{
  position:absolute;font-size:18px;color:var(--ink);z-index:5;
  animation:dc 7s ease-in-out infinite;
}
.design-cursor-svc::after{
  content:'Designer';position:absolute;top:18px;left:14px;
  background:var(--accent);color:#fff;padding:2px 8px;border-radius:100px;
  font-size:9px;font-weight:600;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif;
}
@keyframes dc{
  0%{top:25%;left:35%}30%{top:55%;left:25%}60%{top:60%;left:55%}100%{top:25%;left:35%}
}

/* ---- SERVICE: Enterprise Software ---- */
.banner-svc-ent{padding:24px;position:relative;height:100%}
.ent-dashboard{
  position:absolute;inset:10%;background:#0f1320;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);overflow:hidden;padding:14px;z-index:2;
  box-shadow:0 24px 50px rgba(0,0,0,.4);color:#fff;
}
.ent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ent-head h6{font-size:11px;color:#fff}
.ent-head .badge{
  font-size:8px;padding:2px 8px;border-radius:100px;background:rgba(0,200,150,.15);
  border:1px solid rgba(0,200,150,.3);color:#34D9A8;font-family:'JetBrains Mono',monospace;
}
.ent-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ent-kpi{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:8px;
}
.ent-kpi .lbl{font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase}
.ent-kpi .val{font-size:14px;font-weight:700;color:#FF8B3D;margin-top:2px}
.ent-kpi.v2 .val{color:#5A9CFF}.ent-kpi.v3 .val{color:#A78BFA}
.ent-chart{height:60px;background:rgba(255,255,255,.03);border-radius:8px;padding:8px;position:relative}
.ent-chart svg{width:100%;height:100%}
.ent-table{margin-top:10px;background:rgba(255,255,255,.03);border-radius:8px;padding:8px}
.ent-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:9px;border-bottom:1px solid rgba(255,255,255,.06)}
.ent-row:last-child{border-bottom:none}
.ent-row .name{color:#fff}
.ent-row .stat{color:#34D9A8;font-family:'JetBrains Mono',monospace}
.ent-row .stat.warn{color:#FF8B3D}
.ent-side{
  position:absolute;background:rgba(15,19,32,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;z-index:3;
  display:flex;align-items:center;gap:8px;animation:floatA 5s ease-in-out infinite;
}
.ent-side i{color:#34D9A8}
.ent-side.s1{top:4%;left:4%}
.ent-side.s2{bottom:4%;right:4%;animation-delay:-2.5s}

/* ---- SERVICE: Cloud & DevOps (re-uses banner-cloud pattern from index) ---- */
.banner-svc-cloud{padding:24px;height:100%;overflow:hidden;position:relative}
.banner-svc-cloud .grid-bg-d{
  position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
}
.svc-cloud-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.svc-cn{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:3;
}
.svc-cn .box{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:16px;color:#FF8B3D;
  background:rgba(255,94,31,.12);border:1px solid rgba(255,94,31,.3);position:relative;
  animation:nodePulse 3s ease-in-out infinite;
}
.svc-cn .lbl{font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(255,255,255,.7);letter-spacing:1px;text-transform:uppercase}
.svc-cn.cdn{top:8%;left:50%;transform:translateX(-50%)}
.svc-cn.cdn .box{background:rgba(0,102,255,.15);border-color:rgba(0,102,255,.3);color:#5A9CFF}
.svc-cn.lb{top:30%;left:50%;transform:translateX(-50%);animation-delay:.3s}
.svc-cn.lb .box{color:#A78BFA;background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.3)}
.svc-cn.s1{top:58%;left:14%;animation-delay:.6s}
.svc-cn.s2{top:58%;left:50%;transform:translateX(-50%);animation-delay:.9s}
.svc-cn.s3{top:58%;right:14%;animation-delay:1.2s}
.svc-cn.db{bottom:8%;left:50%;transform:translateX(-50%)}
.svc-cn.db .box{color:#34D9A8;background:rgba(0,200,150,.12);border-color:rgba(0,200,150,.3)}
.svc-cs{
  position:absolute;top:50%;left:6px;transform:translateY(-50%);background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#fff;z-index:4;
}
.svc-cs .row{display:flex;justify-content:space-between;gap:10px;min-width:80px;padding:2px 0}
.svc-cs .ok{color:#34D9A8}
.svc-cd{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:#fff;z-index:4;
  min-width:88px;
}
.svc-cd .head{color:rgba(255,255,255,.5);font-size:7.5px;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase}
.svc-cd .step{display:flex;align-items:center;gap:5px;padding:1px 0}
.svc-cd .step i{color:#34D9A8;font-size:8px}

/* ---- SERVICE: IT Consulting ---- */
.banner-svc-consult{padding:24px;height:100%;position:relative}
.consult-canvas{
  position:absolute;inset:10%;background:#0f1320;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);padding:16px;
  box-shadow:0 24px 50px rgba(0,0,0,.4);z-index:2;color:#fff;
}
.consult-title{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;
}
.consult-roadmap{display:flex;flex-direction:column;gap:10px;height:calc(100% - 28px)}
.consult-row{
  display:flex;align-items:center;gap:10px;flex:1;
}
.consult-row .phase{
  width:60px;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;
}
.consult-bar{
  flex:1;height:18px;border-radius:10px;background:rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.consult-bar::after{
  content:'';position:absolute;left:0;top:0;height:100%;border-radius:10px;
  background:linear-gradient(90deg,#FF5E1F,#FF8B3D);
  animation:fillBar 2.5s ease-out forwards;
}
.consult-bar.b1::after{width:0;animation-delay:.3s}
.consult-bar.b2::after{width:0;animation-delay:.8s;background:linear-gradient(90deg,#0066FF,#5A9CFF)}
.consult-bar.b3::after{width:0;animation-delay:1.3s;background:linear-gradient(90deg,#7C3AED,#A78BFA)}
.consult-bar.b4::after{width:0;animation-delay:1.8s;background:linear-gradient(90deg,#00C896,#34D9A8)}
@keyframes fillBar{
  to{width:var(--w,80%)}
}
.consult-bar.b1{--w:90%}.consult-bar.b2{--w:75%}.consult-bar.b3{--w:60%}.consult-bar.b4{--w:45%}
.consult-bar .pct{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:9px;color:#fff;font-weight:700;z-index:2;
}
.consult-meta{
  position:absolute;background:rgba(15,19,32,.95);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;
  font-family:'JetBrains Mono',monospace;color:#fff;font-size:10px;z-index:3;
}
.consult-meta .lbl{color:rgba(255,255,255,.5);font-size:8px;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;display:block}
.consult-meta .val{color:#FF8B3D;font-size:14px;font-weight:700}
.consult-meta.m1{top:4%;right:4%;animation:floatA 5s ease-in-out infinite}
.consult-meta.m2{bottom:4%;left:4%;animation:floatA 5s ease-in-out infinite -2s}
.consult-meta.m2 .val{color:#5A9CFF}

/* ---- INDUSTRY BANNER bases (compact, semi-illustrative) ---- */
.banner-ind{padding:24px;height:100%;position:relative;display:grid;place-items:center}
.ind-glyph-large{
  font-size:8rem;
  background:linear-gradient(135deg,#FF5E1F,#A78BFA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  z-index:2;
  animation:glyphFloat 4s ease-in-out infinite;
}
@keyframes glyphFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}}

/* Industry floating cards */
.ind-card{
  position:absolute;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;
  font-family:'JetBrains Mono',monospace;color:#fff;font-size:10px;z-index:3;
  display:flex;align-items:center;gap:8px;
}
.ind-card i{color:#FF8B3D;font-size:11px}
.ind-card .v2{color:#5A9CFF}
.ind-card .v3{color:#A78BFA}
.ind-card .v4{color:#34D9A8}
.ind-card.c1{top:8%;left:6%;animation:floatA 5s ease-in-out infinite}
.ind-card.c2{top:50%;right:4%;animation:floatA 5s ease-in-out infinite -1.5s}
.ind-card.c3{bottom:8%;left:8%;animation:floatA 5s ease-in-out infinite -3s}
.ind-card.c4{top:14%;right:6%;animation:floatA 5s ease-in-out infinite -2.2s}
.ind-card b{color:#FF8B3D;font-weight:700}
.ind-card.v-blue b{color:#5A9CFF}
.ind-card.v-purple b{color:#A78BFA}
.ind-card.v-green b{color:#34D9A8}

/* Industry pulse rings around the glyph */
.ind-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid rgba(255,140,60,.18);z-index:1;
}
.ind-ring.r1{width:55%;aspect-ratio:1;animation:ringPulse 3s ease-out infinite}
.ind-ring.r2{width:75%;aspect-ratio:1;animation:ringPulse 3s ease-out infinite .8s}
.ind-ring.r3{width:95%;aspect-ratio:1;animation:ringPulse 3s ease-out infinite 1.6s}
@keyframes ringPulse{
  0%{opacity:.5;border-color:rgba(255,140,60,.3)}
  100%{opacity:0;border-color:rgba(255,140,60,0)}
}

/* ============================================================
   TEXT-HEAVY PAGES (Privacy, Terms, Sitemap)
   ============================================================ */
.legal-hero{
  padding:60px 5vw 40px;
  background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;margin-bottom:14px;letter-spacing:-.03em}
.legal-hero p{color:var(--muted);font-size:1.02rem;max-width:600px}
.legal-meta{
  margin-top:24px;display:flex;gap:20px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
}
.legal-meta span{display:inline-flex;align-items:center;gap:6px}

.legal-content{
  padding:60px 5vw 100px;max-width:900px;margin:0 auto;
}
.legal-content h2{font-size:1.6rem;margin:50px 0 14px;letter-spacing:-.02em;color:var(--ink)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:1.15rem;margin:24px 0 10px;color:var(--ink)}
.legal-content p,.legal-content li{color:var(--ink-2);font-size:1rem;line-height:1.75;margin-bottom:14px}
.legal-content ul,.legal-content ol{padding-left:22px;margin-bottom:14px}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--accent);text-decoration:underline}
.legal-content strong{color:var(--ink);font-weight:600}
.legal-toc{
  background:var(--cream);border:1px solid var(--line);border-radius:18px;
  padding:24px 28px;margin-bottom:50px;
}
.legal-toc h4{font-size:.95rem;margin-bottom:12px;color:var(--ink)}
.legal-toc ol{list-style:none;padding:0;columns:2;column-gap:30px}
.legal-toc li{margin-bottom:8px}
.legal-toc a{color:var(--ink-2);font-size:.94rem;text-decoration:none;display:flex;align-items:center;gap:8px}
.legal-toc a:hover{color:var(--accent)}
.legal-toc a::before{content:'';width:14px;height:1.5px;background:var(--accent);flex-shrink:0}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */
.sitemap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px;
}
.sitemap-col h3{
  font-size:.92rem;color:var(--accent);font-family:'JetBrains Mono',monospace;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.sitemap-col ul{list-style:none;padding:0}
.sitemap-col li{margin-bottom:8px}
.sitemap-col li a{
  font-size:.95rem;color:var(--ink-2);transition:color .2s,padding-left .2s;
  display:flex;align-items:center;gap:8px;padding:4px 0;
}
.sitemap-col li a:hover{color:var(--accent);padding-left:4px}
.sitemap-col li a i{font-size:9px;color:var(--accent);opacity:.6}

/* ============================================================
   CONTACT PAGE specifics
   ============================================================ */
.contact-page{padding:60px 5vw 100px}
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start}
.contact-block{margin-bottom:30px}
.contact-block h3{font-size:1.4rem;margin-bottom:10px}
.contact-block p{color:var(--muted);margin-bottom:18px}
.contact-card{
  display:flex;gap:14px;padding:20px 22px;border-radius:14px;background:#fff;
  border:1px solid var(--line);margin-bottom:14px;transition:all .25s;align-items:flex-start;
}
.contact-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.contact-card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:18px;flex-shrink:0;
}
.contact-card b{display:block;font-size:.9rem;margin-bottom:3px}
.contact-card a{color:var(--accent);font-weight:500}
.contact-card p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}

.form-card-page{
  background:var(--cream);border-radius:22px;padding:36px;position:sticky;top:90px;
}
.form-card-page h3{font-size:1.35rem;margin-bottom:6px}
.form-card-page .sub{color:var(--muted);font-size:.9rem;margin-bottom:22px}
.form-row{display:flex;gap:12px;margin-bottom:12px}
.form-row > *{flex:1;min-width:0}
.form-input,.form-select,.form-text{
  width:100%;padding:13px 16px;background:#fff;border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-family:inherit;font-size:14px;
}
.form-input:focus,.form-select:focus,.form-text:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,94,31,.1);
}
.form-text{resize:vertical;min-height:100px}

/* ============================================================
   BLOG INDEX
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{
  background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden;
  transition:transform .35s,box-shadow .35s;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.blog-card .cover{
  aspect-ratio:16/9;display:grid;place-items:center;font-size:3rem;color:rgba(255,255,255,.85);
  position:relative;overflow:hidden;
}
.blog-card .cover::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.16),transparent 50%);
}
.blog-card.b1 .cover{background:linear-gradient(135deg,#FF5E1F,#aa3010)}
.blog-card.b2 .cover{background:linear-gradient(135deg,#0066FF,#003a99)}
.blog-card.b3 .cover{background:linear-gradient(135deg,#7C3AED,#3a1473)}
.blog-card.b4 .cover{background:linear-gradient(135deg,#00C896,#005c45)}
.blog-card.b5 .cover{background:linear-gradient(135deg,#1a1f2e,#0a0e1a)}
.blog-card.b6 .cover{background:linear-gradient(135deg,#F5A623,#aa7800)}
.blog-card .body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-card .tag-row{
  display:flex;gap:6px;margin-bottom:12px;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;
}
.blog-card .tag-row .cat{color:var(--accent);font-weight:600}
.blog-card h3{font-size:1.15rem;margin-bottom:10px;line-height:1.3;flex:1}
.blog-card p{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.blog-card .author-row{
  display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line);
}
.blog-card .av{
  width:32px;height:32px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:.82rem;
}
.blog-card .author-row b{font-size:.85rem;display:block}
.blog-card .author-row small{color:var(--muted);font-size:.78rem}

/* ============================================================
   ABOUT PAGE specifics
   ============================================================ */
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.about-value{
  padding:30px 28px;border-radius:20px;background:#fff;border:1px solid var(--line);
  transition:all .35s;
}
.about-value:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.about-value .ico{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:22px;margin-bottom:18px;
}
.about-value h3{font-size:1.15rem;margin-bottom:8px}
.about-value p{color:var(--muted);font-size:.93rem}

.timeline{position:relative;padding-left:30px}
.timeline::before{
  content:'';position:absolute;left:8px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
}
.timeline-item{position:relative;margin-bottom:28px}
.timeline-item::before{
  content:'';position:absolute;left:-30px;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--accent);
}
.timeline-item .year{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);
  letter-spacing:1.5px;display:block;margin-bottom:4px;font-weight:600;
}
.timeline-item h3{font-size:1.15rem;margin-bottom:6px}
.timeline-item p{color:var(--muted);font-size:.94rem}

/* ============================================================
   CASE STUDIES (Portfolio page)
   ============================================================ */
.case-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case-detail{
  background:#fff;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  transition:transform .35s,box-shadow .35s;
}
.case-detail:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.case-detail .cover{
  aspect-ratio:16/9;display:grid;place-items:center;font-size:5rem;color:rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.case-detail .cover::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 50%);
}
.case-detail.cd1 .cover{background:linear-gradient(135deg,#0066FF,#003a99)}
.case-detail.cd2 .cover{background:linear-gradient(135deg,#FF5E1F,#aa3010)}
.case-detail.cd3 .cover{background:linear-gradient(135deg,#7C3AED,#3a1473)}
.case-detail.cd4 .cover{background:linear-gradient(135deg,#00C896,#005c45)}
.case-detail.cd5 .cover{background:linear-gradient(135deg,#1a1f2e,#0a0e1a)}
.case-detail.cd6 .cover{background:linear-gradient(135deg,#F5A623,#aa7800)}
.case-detail .body{padding:28px}
.case-detail .meta-row{
  display:flex;gap:16px;margin-bottom:14px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;flex-wrap:wrap;
}
.case-detail .meta-row .platform{color:var(--accent)}
.case-detail .meta-row .stat{color:var(--muted)}
.case-detail h3{font-size:1.3rem;margin-bottom:10px}
.case-detail p{color:var(--muted);font-size:.94rem;margin-bottom:16px}
.case-detail .impact{
  display:flex;gap:24px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px;
}
.case-detail .impact div{flex:1}
.case-detail .impact strong{display:block;font-size:1.3rem;color:var(--accent);letter-spacing:-.02em;margin-bottom:2px}
.case-detail .impact span{font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.case-detail .tech{display:flex;flex-wrap:wrap;gap:6px}
.case-detail .tech span{
  font-size:11px;padding:3px 10px;border-radius:100px;background:var(--cream);
  color:var(--ink-2);border:1px solid var(--line);
}

/* ============================================================
   Responsive add-ons
   ============================================================ */
@media (max-width: 1100px){
  .about-values,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .case-detail-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .form-card-page{position:static}
  .sitemap-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .about-values,.blog-grid{grid-template-columns:1fr}
  .sitemap-grid{grid-template-columns:1fr}
  .legal-toc ol{columns:1}
}

/* ============================================================
   INDUSTRY-SPECIFIC BANNERS
   ============================================================ */

/* ---- HEALTHCARE: vitals / heart-rate monitor ---- */
.banner-ind-health{padding:24px;height:100%;position:relative}
.health-screen{
  position:absolute;inset:8%;background:linear-gradient(160deg,#0a1a25 0%,#0a0e1a 100%);
  border-radius:14px;border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.4);padding:16px;color:#fff;z-index:2;
}
.health-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);
}
.health-head h6{font-size:11px;color:#fff;font-family:'JetBrains Mono',monospace;letter-spacing:1px}
.health-head .pid{
  font-size:9px;color:#34D9A8;font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;gap:6px;
}
.health-head .pid .rec{
  width:6px;height:6px;border-radius:50%;background:#34D9A8;animation:recBlink 1.2s infinite;
}
.health-ecg{
  position:relative;height:36%;background:rgba(0,200,150,.04);
  border-radius:8px;padding:10px;margin-bottom:12px;overflow:hidden;
}
.health-ecg svg{width:100%;height:100%}
.ecg-line{
  stroke:#34D9A8;stroke-width:1.8;fill:none;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:ecgDraw 3.5s linear infinite;
  filter:drop-shadow(0 0 6px rgba(52,217,168,.6));
}
@keyframes ecgDraw{to{stroke-dashoffset:0}}
.health-vitals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.h-vital{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:8px 10px;
}
.h-vital .lbl{
  font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:1px;
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;
}
.h-vital .val{font-size:18px;font-weight:700;color:#34D9A8;letter-spacing:-.02em;margin-top:2px}
.h-vital .val span{font-size:9px;color:rgba(255,255,255,.5);margin-left:3px;font-weight:400}
.h-vital.v2 .val{color:#FF8B3D}
.h-vital.v3 .val{color:#5A9CFF}
.health-meta{
  position:absolute;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#fff;z-index:3;
  display:flex;align-items:center;gap:7px;
}
.health-meta i{color:#34D9A8}
.health-meta.s1{top:4%;left:4%;animation:floatA 5s ease-in-out infinite}
.health-meta.s2{bottom:4%;right:4%;animation:floatA 5s ease-in-out infinite -2.5s}

/* ---- FINTECH: live transaction ticker + balance card ---- */
.banner-ind-fintech{padding:24px;height:100%;position:relative}
.fin-card{
  position:absolute;top:8%;left:8%;right:8%;height:38%;border-radius:14px;
  background:linear-gradient(135deg,#FF5E1F,#7C3AED);
  padding:18px;color:#fff;box-shadow:0 20px 50px rgba(124,58,237,.35);
  z-index:3;overflow:hidden;
}
.fin-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 50%);
}
.fin-card .row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.fin-card .chip{
  width:32px;height:24px;border-radius:5px;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
}
.fin-card .brand{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;opacity:.85}
.fin-card .num{
  position:relative;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:3px;margin-bottom:14px;
}
.fin-card .footer{
  position:relative;display:flex;justify-content:space-between;align-items:flex-end;font-size:9px;
}
.fin-card .footer .lbl{opacity:.7;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block}
.fin-card .footer b{font-size:11px;font-weight:600}
.fin-ticker{
  position:absolute;bottom:8%;left:8%;right:8%;height:34%;
  background:rgba(15,19,32,.92);backdrop-filter:blur(8px);
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;z-index:3;overflow:hidden;
}
.fin-ticker .head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;color:rgba(255,255,255,.5);letter-spacing:1px;text-transform:uppercase;
}
.fin-ticker .head .live-ind{
  color:#34D9A8;display:flex;align-items:center;gap:5px;
}
.fin-ticker .head .live-ind .rec{width:5px;height:5px;border-radius:50%;background:#34D9A8;animation:recBlink 1.2s infinite}
.fin-row{
  display:flex;justify-content:space-between;align-items:center;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;
  animation:finRowIn .5s ease both;
}
.fin-row:last-child{border-bottom:none}
.fin-row:nth-child(2){animation-delay:.3s}
.fin-row:nth-child(3){animation-delay:.6s}
.fin-row:nth-child(4){animation-delay:.9s}
@keyframes finRowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.fin-row .name{font-weight:500}
.fin-row .amount.up{color:#34D9A8;font-weight:700}
.fin-row .amount.down{color:#FF8B3D;font-weight:700}
.fin-shield{
  position:absolute;top:5%;right:5%;width:42px;height:42px;border-radius:12px;
  background:rgba(0,200,150,.15);border:1px solid rgba(0,200,150,.3);color:#34D9A8;
  display:grid;place-items:center;font-size:18px;z-index:4;
  animation:shieldPulse 2.5s ease-in-out infinite;
}
@keyframes shieldPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(52,217,168,.4)}
  50%{box-shadow:0 0 0 10px rgba(52,217,168,0)}
}

/* ---- E-COMMERCE: product card + cart + order pulse ---- */
.banner-ind-ecom{padding:24px;height:100%;position:relative}
.ecom-product{
  position:absolute;top:6%;left:6%;width:46%;aspect-ratio:.78;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.25);z-index:3;
  animation:productFloat 5s ease-in-out infinite;
}
@keyframes productFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ecom-product .img{
  height:55%;background:linear-gradient(135deg,#FF5E1F,#FF8B3D);
  display:grid;place-items:center;font-size:32px;color:rgba(255,255,255,.85);position:relative;
}
.ecom-product .img::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 50%);
}
.ecom-product .body{padding:10px 12px}
.ecom-product .name{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:3px}
.ecom-product .price{font-size:14px;color:var(--accent);font-weight:700;letter-spacing:-.02em}
.ecom-product .price small{font-size:9px;color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:4px}
.ecom-product .add{
  margin-top:6px;background:var(--ink);color:#fff;padding:5px 10px;border-radius:100px;
  font-size:9px;font-weight:600;display:inline-flex;align-items:center;gap:5px;
}
.ecom-cart{
  position:absolute;top:6%;right:6%;width:38%;background:rgba(15,19,32,.95);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:12px;color:#fff;z-index:3;box-shadow:0 16px 36px rgba(0,0,0,.3);
}
.ecom-cart .head{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.6);
  letter-spacing:1px;text-transform:uppercase;
}
.ecom-cart .head i{color:#FF8B3D}
.ecom-cart .badge{
  background:#FF5E1F;color:#fff;padding:1px 7px;border-radius:100px;
  font-size:9px;font-weight:700;margin-left:auto;
}
.ecom-cart .item{
  display:flex;align-items:center;gap:8px;padding:5px 0;font-size:9.5px;
  border-bottom:1px solid rgba(255,255,255,.05);animation:cartIn .5s ease both;
}
.ecom-cart .item:nth-child(2){animation-delay:.3s}
.ecom-cart .item:nth-child(3){animation-delay:.6s}
.ecom-cart .item:nth-child(4){animation-delay:.9s}
@keyframes cartIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.ecom-cart .item .thumb{
  width:22px;height:22px;border-radius:5px;flex-shrink:0;
}
.ecom-cart .item .thumb.c1{background:linear-gradient(135deg,#FF5E1F,#FF8B3D)}
.ecom-cart .item .thumb.c2{background:linear-gradient(135deg,#0066FF,#5A9CFF)}
.ecom-cart .item .thumb.c3{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.ecom-cart .item .thumb.c4{background:linear-gradient(135deg,#00C896,#34D9A8)}
.ecom-cart .item .nm{flex:1;color:#fff}
.ecom-cart .item .pr{color:#FF8B3D;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:9px}
.ecom-cart .total{
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;font-size:10px;
}
.ecom-cart .total b{color:#FF8B3D;font-family:'JetBrains Mono',monospace}
.ecom-orders{
  position:absolute;bottom:6%;left:6%;right:6%;background:rgba(15,19,32,.95);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:10px 14px;color:#fff;z-index:3;
}
.ecom-orders .head{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;color:rgba(255,255,255,.5);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;
  display:flex;justify-content:space-between;
}
.ecom-orders .head .ok{color:#34D9A8}
.ecom-orders .num-row{
  display:flex;align-items:baseline;gap:14px;
}
.ecom-orders .big{
  font-size:24px;font-weight:700;color:#FF8B3D;letter-spacing:-.02em;
}
.ecom-orders .delta{
  color:#34D9A8;font-size:10px;font-family:'JetBrains Mono',monospace;
}
.ecom-orders .lbl{
  margin-left:auto;font-size:9px;color:rgba(255,255,255,.5);
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.5px;
}

/* ---- EDUCATION: course progress + quiz + classroom ---- */
.banner-ind-edu{padding:24px;height:100%;position:relative}
.edu-course{
  position:absolute;top:6%;left:8%;width:54%;background:#fff;border-radius:14px;
  padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.2);z-index:3;
  animation:eduFloat 5s ease-in-out infinite;
}
@keyframes eduFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.edu-course .badge{
  display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:8.5px;
  padding:3px 8px;border-radius:100px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:8px;
}
.edu-course h6{font-size:13px;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
.edu-progress{
  height:6px;border-radius:3px;background:#f3efe6;overflow:hidden;margin-bottom:8px;position:relative;
}
.edu-progress::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,#FF5E1F,#FF8B3D);border-radius:3px;
  animation:eduFill 2.5s ease-out forwards;
}
@keyframes eduFill{to{width:72%}}
.edu-meta{
  display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--muted);
}
.edu-meta b{color:var(--accent);font-size:11px}
.edu-modules{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.edu-mod{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;
  background:#f9f7f1;font-size:9.5px;color:var(--ink-2);
}
.edu-mod .num{
  width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:8.5px;font-weight:700;flex-shrink:0;
}
.edu-mod.done .num{background:#34D9A8}
.edu-mod.done .nm{text-decoration:line-through;color:var(--muted);opacity:.7}
.edu-mod .nm{flex:1}
.edu-mod .time{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--muted)}
.edu-mod i{color:#34D9A8;font-size:9px}
.edu-quiz{
  position:absolute;top:14%;right:6%;width:38%;background:rgba(15,19,32,.95);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:12px;color:#fff;z-index:4;animation:floatA 5s ease-in-out infinite -2s;
}
.edu-quiz .q{font-size:10px;font-weight:600;margin-bottom:8px;line-height:1.4}
.edu-quiz .opt{
  padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);margin-bottom:4px;font-size:9px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.3px;
  display:flex;align-items:center;gap:6px;
}
.edu-quiz .opt .dot-mark{
  width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex-shrink:0;
}
.edu-quiz .opt.correct{background:rgba(0,200,150,.15);border-color:#34D9A8;color:#34D9A8}
.edu-quiz .opt.correct .dot-mark{background:#34D9A8;border-color:#34D9A8;display:grid;place-items:center}
.edu-quiz .opt.correct .dot-mark::after{content:'✓';font-size:8px;color:#fff;line-height:1}
.edu-cert{
  position:absolute;bottom:6%;left:8%;background:rgba(15,19,32,.95);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:#fff;z-index:3;
  display:flex;align-items:center;gap:9px;animation:floatA 5s ease-in-out infinite -3.5s;
}
.edu-cert i{
  font-size:18px;color:#F5C453;
}
.edu-cert b{display:block;font-size:9px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px}
.edu-cert small{font-size:8px;color:rgba(255,255,255,.5)}

/* ---- LOGISTICS: live tracking map + driver card ---- */
.banner-ind-log{padding:24px;height:100%;position:relative;overflow:hidden}
.log-map{
  position:absolute;inset:8%;background:linear-gradient(160deg,#0a1a2e 0%,#0a0e1a 100%);
  border-radius:14px;border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.4);z-index:2;
}
.log-map::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
}
.log-svg{position:absolute;inset:0;width:100%;height:100%}
.log-route{
  stroke:#FF8B3D;stroke-width:2.5;fill:none;stroke-linecap:round;
  stroke-dasharray:8 6;
  animation:dashScroll 2s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,140,60,.5));
}
@keyframes dashScroll{to{stroke-dashoffset:-28}}
.log-pin{
  position:absolute;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;color:#fff;z-index:4;
  box-shadow:0 0 0 4px rgba(255,140,60,.2);
}
.log-pin.start{top:18%;left:18%;background:#34D9A8;box-shadow:0 0 0 4px rgba(52,217,168,.25)}
.log-pin.end{bottom:18%;right:18%;background:#FF5E1F;animation:nodePulse 2s ease-in-out infinite}
.log-truck{
  position:absolute;width:32px;height:32px;border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:14px;color:var(--ink);
  z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.log-truck::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,140,60,.4);
  animation:ringExpand 2s ease-out infinite;
}
.log-driver{
  position:absolute;top:4%;left:4%;width:48%;background:rgba(15,19,32,.92);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:9px 11px;color:#fff;z-index:5;
  display:flex;align-items:center;gap:9px;
  animation:floatA 5s ease-in-out infinite;
}
.log-driver .av{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#FF5E1F,#FF8B3D);
  display:grid;place-items:center;color:#fff;font-size:13px;flex-shrink:0;
}
.log-driver b{display:block;font-size:10px;font-weight:600}
.log-driver small{
  display:block;font-size:8px;color:rgba(255,255,255,.6);
  font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
}
.log-eta{
  position:absolute;bottom:4%;right:4%;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;
  font-family:'JetBrains Mono',monospace;color:#fff;font-size:9px;z-index:5;
  animation:floatA 5s ease-in-out infinite -2.5s;
}
.log-eta .lbl{
  font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:1px;
  text-transform:uppercase;display:block;margin-bottom:2px;
}
.log-eta .val{font-size:16px;font-weight:700;color:#FF8B3D;letter-spacing:-.02em}
.log-stops{
  position:absolute;bottom:4%;left:4%;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:#fff;z-index:5;
  font-family:'JetBrains Mono',monospace;font-size:9px;animation:floatA 5s ease-in-out infinite -1s;
}
.log-stops .lbl{
  font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:1px;
  text-transform:uppercase;display:block;margin-bottom:2px;
}
.log-stops .val{font-size:16px;font-weight:700;color:#34D9A8;letter-spacing:-.02em}

/* ---- TRAVEL: boarding pass + airplane path + booking ---- */
.banner-ind-travel{padding:24px;height:100%;position:relative;overflow:hidden}
.trv-pass{
  position:absolute;top:8%;left:50%;transform:translateX(-50%);width:80%;
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.25);z-index:3;display:flex;
}
.trv-pass .left{padding:14px;flex:1;position:relative}
.trv-pass .left::after{
  content:'';position:absolute;right:0;top:14%;bottom:14%;width:1px;
  background-image:linear-gradient(to bottom,rgba(0,0,0,.15) 50%,transparent 50%);
  background-size:1px 8px;
}
.trv-route{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.trv-route .city{
  text-align:center;
}
.trv-route .code{
  font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;
  color:var(--ink);letter-spacing:1px;
}
.trv-route .city-name{
  font-size:8.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;
}
.trv-route .plane{
  flex:1;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  position:relative;
}
.trv-route .plane::before{
  content:'';position:absolute;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--accent);top:-2.5px;
}
.trv-route .plane::after{
  content:'';position:absolute;right:0;width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);top:-2.5px;
}
.trv-route .plane i{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  font-size:14px;color:var(--accent);
  animation:planeFly 4s ease-in-out infinite;
}
@keyframes planeFly{
  0%{left:0%;transform:translateY(-50%) rotate(0deg)}
  45%,55%{left:calc(100% - 14px);transform:translateY(-50%) rotate(0deg)}
  60%{transform:translateY(-50%) rotate(180deg)}
  100%{left:0%;transform:translateY(-50%) rotate(180deg)}
}
.trv-details{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;
}
.trv-details .lbl{
  display:block;color:var(--muted);font-size:7px;letter-spacing:.5px;text-transform:uppercase;
}
.trv-details .v{color:var(--ink);font-size:10px;font-weight:700;margin-top:2px}
.trv-pass .right{
  width:34%;background:linear-gradient(135deg,var(--accent),#FF8B3D);color:#fff;
  padding:14px;display:flex;flex-direction:column;justify-content:space-between;
}
.trv-pass .right .seat{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:1.5px;opacity:.85;
}
.trv-pass .right .seat-num{
  font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;
}
.trv-pass .right .gate{
  display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9px;
}
.trv-pass .right .gate b{font-size:11px}
.trv-stars{
  position:absolute;top:5%;right:5%;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;color:#fff;z-index:4;
  font-size:9.5px;display:flex;align-items:center;gap:8px;
  animation:floatA 5s ease-in-out infinite;
}
.trv-stars .s{color:#F5C453;letter-spacing:1px;font-size:11px}
.trv-stars b{font-family:'JetBrains Mono',monospace}
.trv-card-bottom{
  position:absolute;bottom:6%;left:8%;right:8%;background:rgba(15,19,32,.92);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:12px 14px;color:#fff;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.trv-card-bottom .item{flex:1;text-align:center}
.trv-card-bottom .lbl{
  font-size:7.5px;color:rgba(255,255,255,.5);letter-spacing:1px;
  text-transform:uppercase;display:block;margin-bottom:3px;font-family:'JetBrains Mono',monospace;
}
.trv-card-bottom .val{font-size:14px;font-weight:700;color:#FF8B3D;letter-spacing:-.02em}
.trv-card-bottom .val.v2{color:#34D9A8}
.trv-card-bottom .val.v3{color:#5A9CFF}

/* ============================================================
   Industry page extras: regulations / compliance pills
   ============================================================ */
.regs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.reg-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);
  transition:all .25s;font-weight:500;
}
.reg-pill i{color:var(--accent);font-size:13px}
.reg-pill:hover{border-color:var(--accent);color:var(--accent)}

/* Industry "we build" smaller cards — reuse ai-features grid */

/* ============================================================
   ABOUT PAGE — unique editorial layout
   ============================================================ */

/* Manifesto hero */
.about-manifesto{
  padding:80px 5vw 60px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);
}
.about-manifesto::before{
  content:'';position:absolute;top:-300px;right:-200px;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.12),transparent 60%);
  pointer-events:none;
}
.manifesto-label{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);
  margin-bottom:30px;font-weight:500;position:relative;
}
.manifesto-label::before{content:'';width:32px;height:1.5px;background:var(--accent)}
.manifesto-headline{
  font-size:clamp(2.4rem,6vw,5.8rem);line-height:1.02;letter-spacing:-.04em;
  font-weight:800;max-width:1200px;position:relative;
}
.manifesto-headline .strike{
  position:relative;display:inline-block;color:var(--muted);
}
.manifesto-headline .strike::after{
  content:'';position:absolute;left:-4px;right:-4px;top:50%;height:6px;
  background:var(--accent);transform:translateY(-50%) skewY(-3deg);
  animation:strikeIn 1s ease-out .5s both;
  transform-origin:left;
}
@keyframes strikeIn{from{transform:translateY(-50%) skewY(-3deg) scaleX(0)}to{transform:translateY(-50%) skewY(-3deg) scaleX(1)}}
.manifesto-headline em{
  font-style:normal;color:var(--accent);
}
.manifesto-sub{
  margin-top:30px;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);
  max-width:720px;line-height:1.55;
}

/* "Marketing vs honest" toggle */
.honest-section{padding:90px 5vw;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.honest-toggle{
  display:inline-flex;background:var(--cream);border:1px solid var(--line);border-radius:100px;padding:5px;
  margin:30px 0;
}
.honest-toggle button{
  padding:10px 22px;border-radius:100px;border:none;background:transparent;color:var(--ink-2);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;cursor:pointer;transition:all .25s;
}
.honest-toggle button.active{background:var(--ink);color:#fff}
.honest-toggle button.active.honest{background:var(--accent)}
.honest-content{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:30px;
}
.honest-col h3{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:24px;color:var(--muted);font-weight:500;
}
.honest-col.honest h3{color:var(--accent)}
.honest-col p{font-size:1.1rem;line-height:1.65;color:var(--ink-2);margin-bottom:14px}
.honest-col.honest p{font-weight:500;color:var(--ink)}
.honest-col .quote-mark{
  font-size:4rem;font-weight:800;line-height:1;color:var(--accent);
  opacity:.2;display:block;margin-bottom:-20px;
}

/* "8 years in numbers" ticker */
.years-numbers{
  padding:90px 5vw;background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.years-numbers::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 400px at 30% 50%,rgba(255,94,31,.13),transparent 60%),
             radial-gradient(800px 400px at 80% 50%,rgba(124,58,237,.1),transparent 60%);
}
.years-numbers > *{position:relative}
.years-numbers h2{color:#fff;font-size:clamp(2rem,3.8vw,3rem);margin-bottom:14px;letter-spacing:-.03em}
.years-numbers > p{color:rgba(255,255,255,.65);margin-bottom:60px;max-width:600px;font-size:1.05rem}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.number-card{
  padding:36px 28px;border-radius:18px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);transition:all .35s;
}
.number-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,140,60,.3);transform:translateY(-4px)}
.number-card .num{
  font-size:clamp(2.5rem,4.5vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,#fff,#FF8B3D);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.number-card .num-unit{
  font-size:1.5rem;color:#FF8B3D;margin-left:4px;
}
.number-card h4{
  font-size:.85rem;color:rgba(255,255,255,.95);margin:14px 0 6px;
  font-family:'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;
}
.number-card p{color:rgba(255,255,255,.55);font-size:.9rem;line-height:1.5}

/* People-by-work cards */
.people-section{padding:90px 5vw}
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.person-card{
  padding:34px 32px;border-radius:22px;background:#fff;border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:flex-start;
  transition:all .35s;
}
.person-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.person-card .avatar{
  width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;
}
.person-card .av-1{background:linear-gradient(135deg,#FF5E1F,#FF8B3D)}
.person-card .av-2{background:linear-gradient(135deg,#0066FF,#5A9CFF)}
.person-card .av-3{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.person-card .av-4{background:linear-gradient(135deg,#00C896,#34D9A8)}
.person-card .role{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
  letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:4px;font-weight:500;
}
.person-card h3{font-size:1.25rem;margin-bottom:8px;letter-spacing:-.01em}
.person-card .focus{font-size:.95rem;color:var(--muted);line-height:1.6;margin-bottom:18px}
.person-detail{
  background:var(--cream);border-radius:12px;padding:14px 16px;margin-bottom:8px;
  display:flex;gap:10px;align-items:flex-start;
}
.person-detail i{color:var(--accent);font-size:13px;margin-top:3px;flex-shrink:0}
.person-detail .lbl{
  font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;margin-bottom:3px;display:block;font-weight:600;
}
.person-detail .val{font-size:.88rem;color:var(--ink-2);line-height:1.45}

/* Principles section */
.principles-section{padding:90px 5vw;background:var(--cream)}
.principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:50px}
.principle{
  padding:38px 34px;border-radius:22px;background:#fff;border:1px solid var(--line);
  transition:all .35s;position:relative;
}
.principle:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.principle .num{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);
  letter-spacing:2px;display:block;margin-bottom:14px;font-weight:600;
}
.principle h3{
  font-size:1.45rem;margin-bottom:14px;letter-spacing:-.02em;line-height:1.2;
}
.principle h3 em{font-style:normal;color:var(--accent)}
.principle p{color:var(--muted);font-size:1rem;line-height:1.65}

/* Wall of work */
.wall-section{padding:90px 5vw}
.wall-grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:140px;gap:14px;margin-top:50px;
}
.wall-tile{
  border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#1a1f2e,#0a0e1a);color:#fff;
  padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .35s,box-shadow .35s;cursor:default;
}
.wall-tile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(10,14,26,.18)}
.wall-tile.t1{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#FF5E1F,#aa3010)}
.wall-tile.t2{grid-column:span 2;background:linear-gradient(135deg,#0066FF,#003a99)}
.wall-tile.t3{grid-column:span 2;background:linear-gradient(135deg,#7C3AED,#3a1473)}
.wall-tile.t4{grid-column:span 3;background:linear-gradient(135deg,#00C896,#005c45)}
.wall-tile.t5{grid-column:span 3;background:linear-gradient(135deg,#F5A623,#aa7800)}
.wall-tile.t6{grid-column:span 2;background:linear-gradient(135deg,#1a1f2e,#0a0e1a);border:1px solid rgba(255,255,255,.08)}
.wall-tile.t7{grid-column:span 4;background:linear-gradient(135deg,#FF5E1F,#7C3AED)}
.wall-tile .icon{font-size:1.8rem;opacity:.85}
.wall-tile.t1 .icon{font-size:2.6rem}
.wall-tile.t4 .icon, .wall-tile.t5 .icon, .wall-tile.t7 .icon{font-size:2.2rem}
.wall-tile h4{font-size:1rem;line-height:1.25;letter-spacing:-.01em}
.wall-tile.t1 h4{font-size:1.4rem}
.wall-tile.t4 h4, .wall-tile.t5 h4, .wall-tile.t7 h4{font-size:1.2rem}
.wall-tile p{font-size:.82rem;color:rgba(255,255,255,.75);margin-top:4px}
.wall-tile .tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(255,255,255,.7);
}

/* HQ section */
.hq-section{
  padding:90px 5vw;background:var(--cream);
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
}
.hq-text h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:18px;letter-spacing:-.03em}
.hq-text p{color:var(--muted);font-size:1.02rem;margin-bottom:14px;line-height:1.65}
.hq-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;
}
.hq-meta-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
}
.hq-meta-item .lbl{
  font-size:10px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;display:block;margin-bottom:6px;font-weight:600;
}
.hq-meta-item .val{font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.4}

.hq-visual{
  aspect-ratio:1.1/1;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#0a1a2e 0%,#0a0e1a 100%);
  position:relative;border:1px solid var(--line);
  box-shadow:0 24px 50px rgba(10,14,26,.15);
}
.hq-visual::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 100%);
}
.hq-pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:24px;z-index:3;
  box-shadow:0 0 0 8px rgba(255,94,31,.2),0 0 0 18px rgba(255,94,31,.1);
  animation:pinPulse 2s ease-in-out infinite;
}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 8px rgba(255,94,31,.2),0 0 0 18px rgba(255,94,31,.1)}
  50%{box-shadow:0 0 0 14px rgba(255,94,31,.15),0 0 0 28px rgba(255,94,31,.05)}
}
.hq-overlay-card{
  position:absolute;background:rgba(15,19,32,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;
  color:#fff;font-size:12px;z-index:4;
  animation:floatA 5s ease-in-out infinite;
}
.hq-overlay-card .lbl{
  font-size:9px;color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;display:block;margin-bottom:3px;
}
.hq-overlay-card .val{font-weight:600}
.hq-overlay-card.c1{top:14%;left:8%;animation-delay:0s}
.hq-overlay-card.c2{bottom:14%;right:8%;animation-delay:-2.5s}
.hq-overlay-card .val .accent{color:#FF8B3D}

/* Hiring band */
.hiring-band{
  padding:80px 5vw;background:var(--ink);color:#fff;position:relative;overflow:hidden;
  text-align:left;
}
.hiring-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 400px at 80% 50%,rgba(255,94,31,.18),transparent 60%);
}
.hiring-band > *{position:relative}
.hiring-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.hiring-grid h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;margin-bottom:14px;line-height:1.1}
.hiring-grid p{color:rgba(255,255,255,.7);margin-bottom:20px;font-size:1.02rem;max-width:520px;line-height:1.6}
.hiring-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.hiring-list li{
  display:flex;align-items:flex-start;gap:12px;font-size:.96rem;color:rgba(255,255,255,.85);
}
.hiring-list li i{color:#FF8B3D;font-size:14px;margin-top:5px;flex-shrink:0}
.hiring-actions{display:flex;gap:14px;flex-wrap:wrap}
.hiring-actions .btn-ghost-light{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25);
}
.hiring-actions .btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* Responsive overrides */
@media (max-width: 1024px){
  .honest-content{grid-template-columns:1fr;gap:30px}
  .people-grid{grid-template-columns:1fr}
  .principles-grid{grid-template-columns:1fr}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .wall-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:130px}
  .wall-tile.t1,.wall-tile.t4,.wall-tile.t5,.wall-tile.t7{grid-column:span 3}
  .wall-tile.t2,.wall-tile.t3,.wall-tile.t6{grid-column:span 3}
  .hq-section{grid-template-columns:1fr;gap:40px}
  .hiring-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width: 768px){
  .numbers-grid{grid-template-columns:1fr;gap:18px}
  .wall-grid{grid-template-columns:1fr;grid-auto-rows:120px}
  .person-card{grid-template-columns:1fr;gap:18px}
  .person-card .avatar{width:60px;height:60px;font-size:1.4rem}
  .hq-meta{grid-template-columns:1fr}
  .manifesto-headline{font-size:2.4rem}
}

/* ============================================================
   ABOUT PAGE (unique design)
   ============================================================ */

/* MANIFESTO HERO */
.about-hero{
  position:relative;padding:80px 5vw 100px;
  background:linear-gradient(165deg,#0a0e1a 0%,#1a1f2e 100%);color:#fff;
  overflow:hidden;
}
.about-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 500px at 20% 30%,rgba(255,94,31,.2),transparent 60%),
             radial-gradient(800px 500px at 80% 70%,rgba(124,58,237,.15),transparent 60%);
}
.about-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 100%);
}
.about-hero > *{position:relative;z-index:2}
.about-tag{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:13px;color:rgba(255,255,255,.85);backdrop-filter:blur(6px);margin-bottom:30px;
}
.about-tag .pill{
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:1px;
}
.about-manifesto{
  font-size:clamp(2rem,4.4vw,4rem);line-height:1.1;letter-spacing:-.035em;
  color:#fff;font-weight:700;max-width:1100px;
}
.about-manifesto em{font-style:normal;color:#FF8B3D}
.about-sub{
  font-size:clamp(1rem,1.3vw,1.15rem);color:rgba(255,255,255,.7);margin-top:30px;max-width:720px;
  line-height:1.65;
}
.about-meta-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:60px;
  padding-top:40px;border-top:1px solid rgba(255,255,255,.08);
}
.about-meta-grid .meta-cell strong{
  font-size:clamp(2rem,3.5vw,2.8rem);color:#fff;display:block;letter-spacing:-.03em;font-weight:700;
  background:linear-gradient(135deg,#fff,#FF8B3D);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-meta-grid .meta-cell span{
  color:rgba(255,255,255,.5);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;display:block;margin-top:6px;
}

/* CONSTELLATION (banner inside hero) */
.constellation{
  position:absolute;top:0;right:-5%;width:55%;height:100%;z-index:1;pointer-events:none;
}
.constellation svg{width:100%;height:100%}
.const-node{fill:#FF8B3D;filter:drop-shadow(0 0 12px rgba(255,140,60,.6))}
.const-node.v2{fill:#5A9CFF;filter:drop-shadow(0 0 12px rgba(90,156,255,.6))}
.const-node.v3{fill:#A78BFA;filter:drop-shadow(0 0 12px rgba(167,139,250,.6))}
.const-node.v4{fill:#34D9A8;filter:drop-shadow(0 0 12px rgba(52,217,168,.6))}
.const-line{stroke:rgba(255,255,255,.15);stroke-width:1.2;stroke-dasharray:3 4}
.const-pulse{fill:#FF8B3D;opacity:.4}

/* TIMELINE (Years section) */
.timeline-section{padding:100px 5vw;background:var(--bg)}
.timeline-track{
  position:relative;max-width:1100px;margin:60px auto 0;
}
.timeline-track::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 8%,var(--accent) 92%,transparent);
  transform:translateX(-50%);
}
.timeline-year{
  position:relative;display:grid;grid-template-columns:1fr 80px 1fr;gap:30px;
  margin-bottom:60px;align-items:center;
}
.timeline-year:nth-child(even) .ty-content{
  grid-column:1;text-align:right;
}
.timeline-year:nth-child(even) .ty-image{
  grid-column:3;
}
.timeline-year:nth-child(odd) .ty-content{
  grid-column:3;text-align:left;
}
.timeline-year:nth-child(odd) .ty-image{
  grid-column:1;display:flex;justify-content:flex-end;
}
.ty-dot{
  grid-column:2;justify-self:center;width:60px;height:60px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent);
  display:grid;place-items:center;font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:700;color:var(--accent);z-index:2;
  transition:all .35s;
}
.timeline-year:hover .ty-dot{background:var(--accent);color:#fff;transform:scale(1.08)}
.ty-content h3{font-size:1.5rem;margin-bottom:10px;letter-spacing:-.02em}
.ty-content p{color:var(--muted);font-size:1rem;line-height:1.65}
.ty-content .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;font-weight:500;margin-bottom:8px;display:inline-block;
}
.ty-image{
  position:relative;
}
.ty-illust{
  width:200px;aspect-ratio:1.1/1;border-radius:18px;
  display:grid;place-items:center;font-size:3.4rem;
  background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--line);
  color:var(--accent);box-shadow:var(--shadow-md);
  transition:transform .35s;
}
.timeline-year:hover .ty-illust{transform:rotate(-3deg) scale(1.04)}
.ty-illust.v1{color:var(--accent)}
.ty-illust.v2{color:var(--accent-2)}
.ty-illust.v3{color:#7C3AED}
.ty-illust.v4{color:var(--accent-3)}
.ty-illust.v5{color:#F5A623}

/* PRINCIPLES (unique counter-positioning) */
.principles-section{
  padding:100px 5vw;background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.principles-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(900px 500px at 70% 30%,rgba(255,94,31,.15),transparent 60%);
  pointer-events:none;
}
.principles-section > *{position:relative;z-index:1}
.principles-section h2{color:#fff;margin-bottom:60px;max-width:680px}
.principles-section h2 em{color:#FF8B3D;font-style:normal}
.principles-section .eyebrow{color:#FF8B3D}
.principles-section .eyebrow::before{background:#FF8B3D}

.principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.principle{
  padding:34px 32px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  transition:all .35s;
}
.principle:hover{background:rgba(255,255,255,.07);border-color:rgba(255,140,60,.3);transform:translateY(-4px)}
.principle .num{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:3.5rem;font-weight:800;
  background:linear-gradient(135deg,#FF8B3D,#7C3AED);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;letter-spacing:-.05em;margin-bottom:18px;display:block;
}
.principle h3{font-size:1.25rem;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.principle p{color:rgba(255,255,255,.65);font-size:.97rem;line-height:1.65}

/* COUNTER-POSITIONING ("What we don't do") */
.counter-pos{
  padding:100px 5vw;background:var(--cream);position:relative;
}
.counter-pos h2{margin-bottom:50px;max-width:720px}
.counter-pos h2 .strike{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:3px;color:var(--muted);font-style:italic}
.no-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.no-card{
  padding:28px 30px;border-radius:18px;background:#fff;border:1px solid var(--line);
  position:relative;
}
.no-card .x{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,94,31,.1);border:1.5px solid rgba(255,94,31,.3);
  color:var(--accent);display:grid;place-items:center;font-size:14px;margin-bottom:16px;
}
.no-card h3{font-size:1.1rem;margin-bottom:8px;letter-spacing:-.02em}
.no-card p{color:var(--muted);font-size:.92rem;line-height:1.6}
.no-card .instead{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent-3);
  letter-spacing:.5px;
}
.no-card .instead i{color:var(--accent-3);margin-right:6px}

/* TEAM AS DISCIPLINES */
.team-disc{padding:100px 5vw}
.team-disc h2{margin-bottom:60px}
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.disc-card{
  padding:36px 32px;border-radius:22px;background:#fff;border:1px solid var(--line);
  transition:all .35s;position:relative;overflow:hidden;
}
.disc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.disc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.disc-card:hover::before{transform:scaleX(1)}
.disc-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.disc-card .count{
  font-family:'JetBrains Mono',monospace;font-size:42px;font-weight:700;
  color:var(--accent);letter-spacing:-.03em;line-height:1;
}
.disc-card .count small{
  font-size:13px;color:var(--muted);font-weight:500;display:block;letter-spacing:1px;
  text-transform:uppercase;margin-top:4px;
}
.disc-card .ico-disc{
  width:54px;height:54px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:22px;
}
.disc-card h3{font-size:1.3rem;margin-bottom:10px;letter-spacing:-.02em}
.disc-card p{color:var(--muted);font-size:.94rem;margin-bottom:18px}
.disc-card .skills{display:flex;flex-wrap:wrap;gap:6px}
.disc-card .skills span{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:4px 9px;border-radius:100px;
  background:var(--cream);color:var(--ink-2);border:1px solid var(--line);
}

/* CULTURE SECTION */
.culture-section{
  padding:100px 5vw;background:var(--cream);
}
.culture-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.culture-text h2{margin-bottom:24px;letter-spacing:-.03em;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1}
.culture-text > p{color:var(--muted);font-size:1.02rem;margin-bottom:20px}
.culture-text .quote-block{
  margin-top:30px;padding:24px 28px;border-left:3px solid var(--accent);
  background:#fff;border-radius:0 12px 12px 0;
}
.culture-text .quote-block p{font-style:italic;color:var(--ink-2);font-size:1.08rem;margin-bottom:14px}
.culture-text .quote-block .who{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:1px}
.culture-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.culture-stat{
  padding:28px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);
  transition:transform .3s;
}
.culture-stat:hover{transform:translateY(-3px)}
.culture-stat strong{
  font-size:2.4rem;display:block;color:var(--accent);letter-spacing:-.03em;font-weight:700;margin-bottom:4px;
}
.culture-stat span{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;
}
.culture-stat p{color:var(--ink-2);font-size:.9rem;margin-top:10px;line-height:1.5}

/* About hero animation utilities */
@keyframes constPulse{0%,100%{opacity:.3;r:8}50%{opacity:.8;r:14}}

/* ============================================================
   CASE STUDIES PAGE — filter chips + grid
   ============================================================ */
.cs-page{padding:60px 5vw 100px}
.cs-page h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px;max-width:700px}
.cs-page .intro{color:var(--muted);font-size:1.05rem;max-width:600px;margin-bottom:40px}
.cs-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:50px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.cs-chip{
  padding:8px 16px;border-radius:100px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:500;cursor:pointer;transition:all .25s;
}
.cs-chip:hover{border-color:var(--accent);color:var(--accent)}
.cs-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs-chip .count{
  display:inline-block;margin-left:6px;font-size:11px;font-family:'JetBrains Mono',monospace;
  background:var(--cream);color:var(--ink-2);padding:1px 7px;border-radius:100px;
}
.cs-chip.active .count{background:rgba(255,255,255,.15);color:#fff}

/* ============================================================
   BLOG PAGE — featured + grid + categories
   ============================================================ */
.blog-page{padding:60px 5vw 100px}
.blog-page h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px;max-width:700px}
.blog-page .intro{color:var(--muted);font-size:1.05rem;max-width:600px;margin-bottom:40px}
.blog-featured{
  display:grid;grid-template-columns:1.3fr 1fr;gap:30px;margin-bottom:60px;
  background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);border-radius:24px;
  padding:40px;color:#fff;overflow:hidden;position:relative;
}
.blog-featured::before{
  content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.3),transparent 60%);
}
.blog-featured > *{position:relative;z-index:1}
.blog-featured .badge{
  display:inline-block;padding:4px 12px;border-radius:100px;background:var(--accent);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:18px;
}
.blog-featured h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;margin-bottom:16px}
.blog-featured p{color:rgba(255,255,255,.7);font-size:1rem;margin-bottom:24px;max-width:520px}
.blog-featured .meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.5);
  letter-spacing:.5px;display:flex;gap:14px;margin-bottom:24px;
}
.blog-featured .img-side{
  display:grid;place-items:center;font-size:6rem;color:rgba(255,255,255,.85);
  background:radial-gradient(circle,rgba(255,94,31,.2),transparent 60%);
}
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.blog-page .blog-grid{margin-bottom:50px}

/* ============================================================
   FAQ PAGE — categorised sections
   ============================================================ */
.faq-page{padding:60px 5vw 100px}
.faq-page h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:14px;max-width:700px}
.faq-page .intro{color:var(--muted);font-size:1.05rem;max-width:600px;margin-bottom:40px}
.faq-section-block{margin-bottom:50px;max-width:900px;margin-left:auto;margin-right:auto}
.faq-section-block h2{
  font-size:1.5rem;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.faq-section-block h2 .ico-fq{
  width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:14px;flex-shrink:0;
}
.faq-section-block h2 .count-fq{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);font-weight:500;
}

/* ============================================================
   ABOUT PAGE v2 — CHAPTER-BASED NARRATIVE
   ============================================================ */

/* Chapter markers — sticky side rail */
.chapter-rail{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:14px;
}
.chapter-rail a{
  width:8px;height:8px;border-radius:50%;background:rgba(10,14,26,.2);
  position:relative;transition:all .25s;
}
.chapter-rail a:hover,.chapter-rail a.active{background:var(--accent);transform:scale(1.4)}
.chapter-rail a::after{
  content:attr(data-label);position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
  background:#fff;padding:4px 10px;border-radius:6px;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.chapter-rail a:hover::after{opacity:1}
@media (max-width:1100px){.chapter-rail{display:none}}

/* Chapter label */
.ch-label{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;
  color:var(--accent);text-transform:uppercase;font-weight:500;
}
.ch-label .num{
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:6px;font-weight:600;
}
.ch-label .bar{flex:1;max-width:60px;height:1.5px;background:var(--accent);opacity:.4}

/* Chapter on dark sections */
.dark-ch .ch-label{color:#FF8B3D}
.dark-ch .ch-label .bar{background:#FF8B3D}

/* ==== CH. 02 — TRUST / RELIABILITY ==== */
.trust-section{padding:100px 5vw;background:var(--bg)}
.trust-section h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em;max-width:780px;margin-bottom:18px}
.trust-section .lead-p{color:var(--muted);font-size:1.08rem;max-width:660px;margin-bottom:60px;line-height:1.65}

/* Numbers row — large proof tiles */
.trust-numbers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:60px;
}
.trust-numbers > div{
  padding:36px 28px;border-right:1px solid var(--line);
  position:relative;transition:background .3s;
}
.trust-numbers > div:last-child{border-right:none}
.trust-numbers > div:hover{background:var(--cream)}
.trust-numbers strong{
  font-size:clamp(2.4rem,4vw,3.2rem);display:block;letter-spacing:-.035em;
  background:linear-gradient(135deg,#0a0e1a,#FF5E1F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;line-height:1;font-weight:700;
}
.trust-numbers span{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;display:block;
}
.trust-numbers p{font-size:.9rem;color:var(--ink-2);margin-top:14px;line-height:1.55}

/* Three trust pillars */
.trust-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
.trust-pillar{
  padding:32px 30px;border-radius:22px;background:#fff;
  border:1px solid var(--line);position:relative;
  transition:all .35s;
}
.trust-pillar:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.trust-pillar .ico{
  width:54px;height:54px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:22px;margin-bottom:20px;
}
.trust-pillar h3{font-size:1.25rem;margin-bottom:10px;letter-spacing:-.02em}
.trust-pillar .pillar-lead{color:var(--ink-2);font-size:.96rem;margin-bottom:14px;font-weight:500}
.trust-pillar p{color:var(--muted);font-size:.92rem;line-height:1.6}
.trust-pillar .proof{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent-3);
  display:flex;align-items:center;gap:7px;
}
.trust-pillar .proof i{font-size:11px}

/* Client signal row — initials badges */
.client-signal{
  background:var(--cream);border-radius:22px;padding:36px 30px;
  display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;
}
.client-signal h4{font-size:1.15rem;margin-bottom:8px}
.client-signal > div:first-child p{color:var(--muted);font-size:.92rem;line-height:1.5}
.client-logos{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.client-badge{
  display:flex;align-items:center;justify-content:center;
  padding:14px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;
  font-weight:700;color:var(--ink-2);font-size:.95rem;letter-spacing:.5px;
  transition:all .3s;font-family:'Plus Jakarta Sans',sans-serif;
  min-width:90px;text-align:center;
}
.client-badge:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.client-badge .dot-c{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent-3);margin-right:8px;
  vertical-align:middle;
}

/* ==== CH. 03 — COMPARISON TABLE (Differentiation) ==== */
.diff-section{
  padding:100px 5vw;background:linear-gradient(170deg,var(--cream) 0%,var(--bg) 100%);
  position:relative;
}
.diff-section h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em;max-width:780px;margin-bottom:18px}
.diff-section .lead-p{color:var(--muted);font-size:1.08rem;max-width:660px;margin-bottom:50px;line-height:1.65}

.compare-table{
  background:#fff;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  box-shadow:var(--shadow-md);
}
.compare-row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;
  border-bottom:1px solid var(--line);
}
.compare-row:last-child{border-bottom:none}
.compare-row.header{
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);color:#fff;
}
.compare-row.header > div{
  padding:24px 28px;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);
  border-right:1px solid rgba(255,255,255,.08);
}
.compare-row.header > div:last-child{border-right:none}
.compare-row.header > div:nth-child(2){color:rgba(255,255,255,.45)}
.compare-row.header > div:nth-child(3){
  background:rgba(255,94,31,.15);color:#FF8B3D;font-weight:600;
}

.compare-row.row{transition:background .25s}
.compare-row.row:hover{background:var(--cream)}
.compare-row.row > div{
  padding:24px 28px;font-size:.97rem;line-height:1.55;border-right:1px solid var(--line);
}
.compare-row.row > div:last-child{border-right:none}
.compare-row.row .topic{
  font-weight:600;color:var(--ink);font-size:1rem;
  display:flex;align-items:center;gap:12px;
}
.compare-row.row .topic .num-sm{
  width:24px;height:24px;border-radius:50%;background:var(--cream);
  color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  display:grid;place-items:center;flex-shrink:0;
}
.compare-row.row .others{color:var(--muted);font-style:italic}
.compare-row.row .others i{color:#aa3010;margin-right:8px;font-size:12px;opacity:.7}
.compare-row.row .us{color:var(--ink-2);font-weight:500;background:rgba(255,94,31,.03)}
.compare-row.row .us i{color:var(--accent-3);margin-right:8px;font-size:12px}

/* ==== CH. 05 — WORK CULTURE: daily rhythm ==== */
.culture-rhythm-section{padding:100px 5vw;background:var(--bg)}
.culture-rhythm-section h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em;max-width:780px;margin-bottom:18px}
.culture-rhythm-section .lead-p{color:var(--muted);font-size:1.08rem;max-width:680px;margin-bottom:60px;line-height:1.65}

/* Daily rhythm timeline */
.day-rhythm{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:70px;
  position:relative;
}
.day-rhythm::before{
  content:'';position:absolute;left:5%;right:5%;top:32px;height:2px;
  background:linear-gradient(90deg,#FF5E1F,#0066FF,#7C3AED,#00C896,#FF5E1F);
  opacity:.25;z-index:0;
}
.rhythm-slot{
  text-align:center;padding:0 12px;position:relative;z-index:1;
}
.rhythm-slot .time{
  width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--accent);
  display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:13px;
  font-weight:700;color:var(--accent);margin:0 auto 16px;
  box-shadow:0 8px 18px rgba(255,94,31,.15);
}
.rhythm-slot.r2 .time{border-color:#0066FF;color:#0066FF;box-shadow:0 8px 18px rgba(0,102,255,.15)}
.rhythm-slot.r3 .time{border-color:#7C3AED;color:#7C3AED;box-shadow:0 8px 18px rgba(124,58,237,.15)}
.rhythm-slot.r4 .time{border-color:#00C896;color:#00C896;box-shadow:0 8px 18px rgba(0,200,150,.15)}
.rhythm-slot.r5 .time{border-color:#F5A623;color:#F5A623;box-shadow:0 8px 18px rgba(245,166,35,.15)}
.rhythm-slot h4{font-size:1rem;margin-bottom:6px;letter-spacing:-.01em}
.rhythm-slot p{font-size:.85rem;color:var(--muted);line-height:1.5}

/* Culture pillars row */
.culture-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.culture-pillar{
  padding:28px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);
  transition:all .3s;
}
.culture-pillar:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.culture-pillar .ico-c{
  width:46px;height:46px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-size:18px;margin-bottom:16px;
}
.culture-pillar h4{font-size:1.05rem;margin-bottom:8px}
.culture-pillar p{color:var(--muted);font-size:.88rem;line-height:1.55}

/* ==== CH. 06 — WORK-LIFE BALANCE ==== */
.wlb-section{
  padding:100px 5vw;background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.wlb-section::before{
  content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.18),transparent 60%);
}
.wlb-section > *{position:relative;z-index:1}
.wlb-section h2{color:#fff;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em;max-width:780px;margin-bottom:18px}
.wlb-section h2 em{color:#FF8B3D;font-style:normal}
.wlb-section .lead-p{color:rgba(255,255,255,.7);font-size:1.08rem;max-width:680px;margin-bottom:60px;line-height:1.65}

/* Policies — big bold callouts */
.wlb-policies{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:50px}
.wlb-policy{
  padding:32px 30px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  position:relative;transition:all .3s;
}
.wlb-policy:hover{background:rgba(255,255,255,.07);border-color:rgba(255,140,60,.3)}
.wlb-policy .big-num{
  font-size:3.2rem;line-height:1;letter-spacing:-.04em;font-weight:700;
  background:linear-gradient(135deg,#FF8B3D,#A78BFA);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px;display:block;
}
.wlb-policy .big-num small{font-size:1rem;color:rgba(255,255,255,.6);font-weight:500;margin-left:6px}
.wlb-policy h4{color:#fff;font-size:1.1rem;margin-bottom:8px;letter-spacing:-.02em}
.wlb-policy p{color:rgba(255,255,255,.65);font-size:.92rem;line-height:1.6}

/* Day-in-life — two columns */
.day-life{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
  background:rgba(255,255,255,.03);border-radius:22px;padding:36px;
  border:1px solid rgba(255,255,255,.06);
}
.day-life h3{color:#fff;font-size:1.3rem;margin-bottom:18px;letter-spacing:-.02em}
.day-life .label-l{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#FF8B3D;
  letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:10px;
}
.day-life ul{list-style:none;padding:0}
.day-life li{
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.94rem;color:rgba(255,255,255,.8);display:flex;gap:12px;line-height:1.55;
}
.day-life li:last-child{border-bottom:none}
.day-life li .mono-time{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#FF8B3D;
  width:64px;flex-shrink:0;letter-spacing:.5px;padding-top:2px;
}

/* ==== CH. 07 — EMPLOYEE BENEFITS ==== */
.benefits-section{padding:100px 5vw;background:var(--cream)}
.benefits-section h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.03em;max-width:780px;margin-bottom:18px}
.benefits-section .lead-p{color:var(--muted);font-size:1.08rem;max-width:680px;margin-bottom:60px;line-height:1.65}

/* Four-quadrant benefits */
.benefits-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.benefit-quad{
  background:#fff;border-radius:24px;padding:36px 34px;border:1px solid var(--line);
  position:relative;overflow:hidden;transition:all .35s;
}
.benefit-quad::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.benefit-quad:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.benefit-quad:hover::before{transform:scaleX(1)}
.benefit-quad.q2::before{background:#0066FF}
.benefit-quad.q3::before{background:#7C3AED}
.benefit-quad.q4::before{background:#00C896}
.benefit-quad .quad-head{
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.benefit-quad .quad-ico{
  width:54px;height:54px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:22px;flex-shrink:0;
}
.benefit-quad.q2 .quad-ico{background:rgba(0,102,255,.1);color:#0066FF}
.benefit-quad.q3 .quad-ico{background:rgba(124,58,237,.1);color:#7C3AED}
.benefit-quad.q4 .quad-ico{background:rgba(0,200,150,.1);color:#00C896}
.benefit-quad h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:2px}
.benefit-quad .quad-head p{font-size:.85rem;color:var(--muted);margin:0}
.benefit-list{list-style:none;padding:0}
.benefit-list li{
  padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:12px;font-size:.95rem;line-height:1.55;color:var(--ink-2);
}
.benefit-list li:last-child{border-bottom:none}
.benefit-list li i{
  color:var(--accent);font-size:13px;margin-top:5px;flex-shrink:0;
}
.benefit-quad.q2 .benefit-list li i{color:#0066FF}
.benefit-quad.q3 .benefit-list li i{color:#7C3AED}
.benefit-quad.q4 .benefit-list li i{color:#00C896}
.benefit-list li b{color:var(--ink);font-weight:600}
.benefit-list li small{
  display:block;color:var(--muted);font-size:.82rem;margin-top:3px;line-height:1.45;
}

/* Stickers / extras row at end of benefits */
.bonus-row{
  margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.bonus-tag{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;text-align:center;transition:all .3s;
}
.bonus-tag:hover{border-color:var(--accent);transform:translateY(-2px)}
.bonus-tag .ico-b{font-size:24px;color:var(--accent);margin-bottom:10px}
.bonus-tag b{display:block;font-size:.95rem;margin-bottom:4px;color:var(--ink)}
.bonus-tag small{font-size:.8rem;color:var(--muted);line-height:1.4}

/* RESPONSIVE */
@media (max-width:1100px){
  .trust-numbers{grid-template-columns:repeat(2,1fr)}
  .trust-numbers > div{border-right:none;border-bottom:1px solid var(--line)}
  .trust-numbers > div:nth-child(2n){border-right:none}
  .trust-numbers > div:nth-child(2n+1){border-right:1px solid var(--line)}
  .trust-pillars{grid-template-columns:1fr}
  .client-signal{grid-template-columns:1fr;gap:24px}
  .compare-row{grid-template-columns:1fr}
  .compare-row > div{border-right:none !important;border-bottom:1px solid var(--line)}
  .compare-row.header > div{border-bottom-color:rgba(255,255,255,.08) !important}
  .day-rhythm{grid-template-columns:1fr 1fr;gap:30px 16px}
  .day-rhythm::before{display:none}
  .culture-pillars{grid-template-columns:repeat(2,1fr)}
  .wlb-policies{grid-template-columns:1fr}
  .day-life{grid-template-columns:1fr}
  .benefits-quad{grid-template-columns:1fr}
  .bonus-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .trust-numbers{grid-template-columns:1fr}
  .trust-numbers > div{border-right:none !important}
  .day-rhythm{grid-template-columns:1fr}
  .culture-pillars{grid-template-columns:1fr}
  .bonus-row{grid-template-columns:1fr}
}

/* ============================================================
   LEGAL PAGE — SIDEBAR LAYOUT + BADGES
   ============================================================ */
.legal-layout{
  display:grid;grid-template-columns:240px 1fr;gap:60px;
  max-width:1100px;margin:0 auto;padding:60px 5vw 100px;
}
.legal-side{position:sticky;top:90px;align-self:start}
.legal-side h4{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600;
}
.legal-side ol{list-style:none;padding:0;counter-reset:toc}
.legal-side ol li{counter-increment:toc;margin-bottom:6px}
.legal-side ol li a{
  display:flex;align-items:flex-start;gap:10px;padding:6px 0;color:var(--ink-2);
  font-size:.92rem;line-height:1.45;transition:color .2s;
  border-left:2px solid transparent;padding-left:10px;
}
.legal-side ol li a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  flex-shrink:0;letter-spacing:.5px;padding-top:2px;
}
.legal-side ol li a:hover,.legal-side ol li a.active{
  color:var(--accent);border-left-color:var(--accent);
}

.legal-doc{max-width:740px}
.legal-doc h2{
  font-size:1.5rem;margin:46px 0 14px;letter-spacing:-.02em;color:var(--ink);
  padding-top:14px;scroll-margin-top:80px;
}
.legal-doc h2:first-of-type{margin-top:0;padding-top:0}
.legal-doc h2 .sec-num{
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent);
  margin-right:12px;font-weight:500;
}
.legal-doc h3{font-size:1.08rem;margin:22px 0 8px;color:var(--ink)}
.legal-doc p,.legal-doc li{color:var(--ink-2);font-size:.98rem;line-height:1.78;margin-bottom:14px}
.legal-doc strong{color:var(--ink);font-weight:600}
.legal-doc ul,.legal-doc ol{padding-left:22px;margin-bottom:14px}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--accent);text-decoration:underline}

.legal-badges{
  display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;
}
.legal-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;
  background:#fff;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--ink-2);letter-spacing:.5px;
}
.legal-badge i{color:var(--accent);font-size:11px}
.legal-badge.live i{color:var(--accent-3)}

.legal-callout{
  background:var(--cream);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:24px 0;
}
.legal-callout p{margin-bottom:0;font-size:.94rem}
.legal-callout strong{color:var(--accent)}

.legal-table{
  width:100%;border-collapse:collapse;margin:18px 0 22px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  font-size:.92rem;
}
.legal-table th{
  background:var(--cream);text-align:left;padding:12px 14px;font-weight:600;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-2);
}
.legal-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.6}
.legal-table tr:nth-child(even) td{background:rgba(243,239,230,.3)}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */
.sitemap-page{padding:60px 5vw 100px;max-width:1200px;margin:0 auto}
.sitemap-intro{
  background:var(--cream);border-radius:18px;padding:30px 32px;margin-bottom:50px;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
}
.sitemap-intro h4{font-size:1.05rem;margin-bottom:6px}
.sitemap-intro p{color:var(--muted);font-size:.95rem;margin:0}
.sitemap-intro .counts{
  display:flex;gap:30px;text-align:center;
}
.sitemap-intro .counts > div strong{
  display:block;font-size:1.8rem;color:var(--accent);font-weight:700;letter-spacing:-.02em;
}
.sitemap-intro .counts > div span{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;
}

.sitemap-section{margin-bottom:50px}
.sitemap-section-head{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
  padding-bottom:14px;border-bottom:2px solid var(--accent);
}
.sitemap-section-head .ico-sm{
  width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.sitemap-section-head h2{font-size:1.5rem;letter-spacing:-.02em;margin:0;flex:1}
.sitemap-section-head .badge-sm{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
  background:var(--accent-soft);padding:4px 10px;border-radius:100px;letter-spacing:.5px;
}
.sitemap-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.sitemap-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  transition:all .25s;display:flex;align-items:flex-start;gap:14px;
}
.sitemap-card:hover{
  border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.sitemap-card .ico-sc{
  width:38px;height:38px;border-radius:10px;background:var(--cream);color:var(--accent);
  display:grid;place-items:center;font-size:14px;flex-shrink:0;
}
.sitemap-card .info{flex:1;min-width:0}
.sitemap-card b{
  display:block;color:var(--ink);font-size:.96rem;font-weight:600;margin-bottom:3px;
}
.sitemap-card small{
  color:var(--muted);font-size:.83rem;line-height:1.45;display:block;
}
.sitemap-card .arrow-sc{
  color:var(--accent);font-size:11px;opacity:0;transition:all .25s;align-self:center;
}
.sitemap-card:hover .arrow-sc{opacity:1;transform:translateX(2px)}

@media (max-width:1100px){
  .legal-layout{grid-template-columns:1fr;gap:40px;padding:50px 5vw 80px}
  .legal-side{position:static;border-bottom:1px solid var(--line);padding-bottom:24px}
  .sitemap-cards{grid-template-columns:repeat(2,1fr)}
  .sitemap-intro{grid-template-columns:1fr;text-align:left}
  .sitemap-intro .counts{justify-content:flex-start}
}
@media (max-width:768px){
  .sitemap-cards{grid-template-columns:1fr}
  .legal-table{font-size:.85rem}
  .legal-table th,.legal-table td{padding:10px 11px}
}

/* ============================================================
   BLOG ARTICLE (single post) PAGE
   ============================================================ */

/* Article hero */
.article-hero{
  padding:60px 5vw 50px;
  background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.article-hero .container{max-width:880px;margin:0 auto}
.article-cat{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;
  background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:24px;
}
.article-title{
  font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:18px;
}
.article-deck{
  font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted);line-height:1.55;
  max-width:760px;margin-bottom:32px;font-weight:400;
}
.article-meta-bar{
  display:flex;align-items:center;gap:18px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.article-author{
  display:flex;align-items:center;gap:12px;
}
.article-author .av-lg{
  width:48px;height:48px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:1rem;
  flex-shrink:0;
}
.article-author b{display:block;font-size:.94rem;line-height:1.3}
.article-author small{color:var(--muted);font-size:.8rem;display:block}
.article-meta-bar .meta-divider{
  width:1px;height:24px;background:var(--line);
}
.article-meta-bar .meta-item{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:6px;letter-spacing:.5px;
}
.article-meta-bar .meta-item i{color:var(--accent);font-size:11px}
.article-meta-bar .share-quick{margin-left:auto;display:flex;gap:8px}
.article-meta-bar .share-quick a{
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);font-size:13px;
  transition:all .2s;
}
.article-meta-bar .share-quick a:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);
}

/* Cover image banner */
.article-cover{
  max-width:1100px;margin:0 auto 0;padding:0 5vw;
}
.article-cover-inner{
  aspect-ratio:21/9;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);
  position:relative;display:grid;place-items:center;
  box-shadow:0 30px 70px rgba(10,14,26,.18);margin-top:-40px;
}
.article-cover-inner::before{
  content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.4),transparent 60%);
}
.article-cover-inner::after{
  content:'';position:absolute;bottom:-100px;left:-100px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.3),transparent 60%);
}
.article-cover-inner > *{position:relative;z-index:1}
.article-cover-glyph{
  font-size:7rem;color:rgba(255,255,255,.85);
  filter:drop-shadow(0 0 40px rgba(255,140,60,.4));
}
.article-cover-label{
  position:absolute;bottom:24px;left:30px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.55);letter-spacing:1.5px;text-transform:uppercase;
  z-index:2;
}

/* Article body layout */
.article-layout{
  display:grid;grid-template-columns:240px 1fr;gap:60px;
  max-width:1100px;margin:0 auto;padding:60px 5vw 80px;
}
.article-toc{position:sticky;top:90px;align-self:start}
.article-toc h4{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600;
}
.article-toc ol{list-style:none;padding:0;counter-reset:atoc}
.article-toc ol li{counter-increment:atoc;margin-bottom:4px}
.article-toc ol li a{
  display:flex;gap:10px;padding:6px 0 6px 10px;color:var(--ink-2);
  font-size:.9rem;line-height:1.45;transition:all .2s;
  border-left:2px solid transparent;
}
.article-toc ol li a::before{
  content:counter(atoc, decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);
  flex-shrink:0;padding-top:1px;letter-spacing:.5px;
}
.article-toc ol li a:hover,
.article-toc ol li a.active{
  color:var(--accent);border-left-color:var(--accent);
}

/* Article body typography */
.article-body{max-width:720px}
.article-body p,.article-body li{
  font-size:1.05rem;line-height:1.78;color:var(--ink-2);margin-bottom:20px;
}
.article-body p:first-of-type{font-size:1.18rem;line-height:1.6;color:var(--ink)}
.article-body h2{
  font-size:1.7rem;margin:50px 0 18px;letter-spacing:-.02em;color:var(--ink);
  scroll-margin-top:80px;line-height:1.2;
}
.article-body h2 .sec-marker{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--accent);letter-spacing:1px;margin-right:12px;font-weight:500;vertical-align:middle;
}
.article-body h3{font-size:1.2rem;margin:30px 0 10px;color:var(--ink);letter-spacing:-.01em}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article-body a:hover{text-decoration-thickness:2px}
.article-body ul,.article-body ol{padding-left:24px;margin-bottom:20px}
.article-body li{margin-bottom:8px}
.article-body img{
  width:100%;border-radius:14px;margin:24px 0;border:1px solid var(--line);
}

/* Key takeaways box */
.takeaways{
  background:var(--cream);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;
  padding:24px 28px;margin:30px 0 36px;
}
.takeaways .label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;
  color:var(--accent);text-transform:uppercase;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.takeaways h4{font-size:1.1rem;margin-bottom:14px;letter-spacing:-.02em}
.takeaways ul{padding-left:22px;margin:0}
.takeaways li{
  font-size:.96rem !important;line-height:1.6;color:var(--ink-2);
  margin-bottom:8px;
}

/* Pull quote */
.pull-quote{
  margin:40px -20px;padding:30px 28px;
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);
  color:#fff;border-radius:18px;position:relative;
  box-shadow:0 18px 40px rgba(10,14,26,.15);
}
.pull-quote::before{
  content:'\\201C';position:absolute;top:-10px;left:24px;
  font-family:Georgia,serif;font-size:6rem;color:#FF8B3D;line-height:1;
}
.pull-quote p{
  font-size:1.2rem !important;line-height:1.5;color:#fff !important;
  font-style:italic;margin:0 0 14px !important;padding-left:14px;
}
.pull-quote cite{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#FF8B3D;
  letter-spacing:1px;text-transform:uppercase;font-style:normal;padding-left:14px;display:block;
}

/* Code blocks */
.article-body pre{
  background:#0a0e1a;color:#e8e8e8;padding:24px;border-radius:14px;
  margin:24px 0;overflow-x:auto;font-family:'JetBrains Mono',monospace;
  font-size:.86rem;line-height:1.6;border:1px solid rgba(255,255,255,.08);
}
.article-body pre .k{color:#FF8B3D}
.article-body pre .s{color:#34D9A8}
.article-body pre .c{color:rgba(255,255,255,.4);font-style:italic}
.article-body pre .n{color:#5A9CFF}
.article-body code{
  font-family:'JetBrains Mono',monospace;font-size:.88em;
  background:var(--cream);padding:2px 6px;border-radius:4px;color:var(--accent);
}
.article-body pre code{background:none;padding:0;color:inherit}

/* Numbered insight box (for "eight things we learned" style lists) */
.insight-list{
  list-style:none !important;padding:0 !important;margin:30px 0 !important;
  counter-reset:insight;
}
.insight-list li{
  counter-increment:insight;padding:22px 24px 22px 70px;border-radius:14px;
  background:#fff;border:1px solid var(--line);margin-bottom:12px;
  position:relative;font-size:1rem !important;line-height:1.65 !important;
  transition:all .25s;
}
.insight-list li:hover{border-color:var(--accent);transform:translateX(3px)}
.insight-list li::before{
  content:counter(insight, decimal-leading-zero);
  position:absolute;left:22px;top:22px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  color:var(--accent);letter-spacing:.5px;
}
.insight-list li b{
  display:block;color:var(--ink);font-size:1.06rem;font-weight:600;
  margin-bottom:6px;letter-spacing:-.01em;
}

/* Info callout */
.article-callout{
  display:flex;gap:18px;padding:22px 24px;border-radius:14px;
  background:rgba(255,94,31,.06);border:1px solid rgba(255,94,31,.2);
  margin:28px 0;
}
.article-callout .ico-cl{
  width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:14px;flex-shrink:0;
}
.article-callout p{margin:0 !important;font-size:.97rem !important;line-height:1.6 !important}

/* End of article: share + feedback bar */
.article-end{
  margin-top:50px;padding:36px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.article-end .row{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.article-end .label-end{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;display:block;
}
.article-end .share-group,.article-end .feedback-group{display:flex;gap:10px;align-items:center}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  background:#fff;border:1px solid var(--line);border-radius:100px;
  font-size:13px;font-weight:500;color:var(--ink-2);transition:all .2s;
}
.share-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.share-btn.x:hover{background:#000;border-color:#000}
.share-btn.li:hover{background:#0A66C2;border-color:#0A66C2}
.share-btn.copy:hover{background:var(--accent);border-color:var(--accent)}
.feedback-btn{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);font-size:16px;transition:all .2s;cursor:pointer;
}
.feedback-btn:hover{transform:translateY(-2px)}
.feedback-btn.up:hover{background:rgba(0,200,150,.1);color:var(--accent-3);border-color:var(--accent-3)}
.feedback-btn.down:hover{background:rgba(255,94,31,.1);color:var(--accent);border-color:var(--accent)}

/* Author card */
.author-card{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:32px;border-radius:22px;background:var(--cream);margin:50px 0;
}
.author-card .av-xl{
  width:88px;height:88px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.6rem;
  flex-shrink:0;
}
.author-card h4{font-size:1.2rem;margin-bottom:4px}
.author-card .role-au{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;display:block;
}
.author-card p{font-size:.95rem;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.author-card .author-links{display:flex;gap:10px}
.author-card .author-links a{
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);font-size:13px;transition:all .2s;
}
.author-card .author-links a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Related posts */
.related-posts{padding:80px 5vw;background:var(--cream)}
.related-posts h2{font-size:clamp(1.6rem,2.4vw,2rem);margin-bottom:36px;letter-spacing:-.02em}
.related-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:0 auto}

/* Newsletter inline */
.newsletter-inline{
  margin:40px 0;padding:36px 32px;border-radius:22px;
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1f2e 100%);color:#fff;
  position:relative;overflow:hidden;
}
.newsletter-inline::before{
  content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,94,31,.2),transparent 60%);
}
.newsletter-inline > *{position:relative}
.newsletter-inline .label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#FF8B3D;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;display:block;
}
.newsletter-inline h3{color:#fff;font-size:1.4rem;margin-bottom:8px;letter-spacing:-.02em}
.newsletter-inline > p{color:rgba(255,255,255,.7);font-size:.96rem;margin-bottom:20px;max-width:480px}
.newsletter-inline form{display:flex;gap:10px;max-width:500px;flex-wrap:wrap}
.newsletter-inline input{
  flex:1;min-width:200px;padding:12px 18px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);color:#fff;border-radius:100px;font-family:inherit;font-size:14px;
}
.newsletter-inline input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-inline input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.08)}
.newsletter-inline button{
  padding:12px 24px;background:var(--accent);color:#fff;border:none;border-radius:100px;
  font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;
}
.newsletter-inline button:hover{background:#FF8B3D;transform:translateY(-1px)}

/* Reading progress bar (top of page) */
.reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;background:rgba(10,14,26,.05);z-index:200;
}
.reading-progress .bar{
  height:100%;background:linear-gradient(90deg,var(--accent),#FF8B3D);width:0%;
  transition:width .1s;
}

/* Responsive */
@media (max-width:1100px){
  .article-layout{grid-template-columns:1fr;gap:30px;padding:40px 5vw 60px}
  .article-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:20px}
  .related-grid-3{grid-template-columns:repeat(2,1fr)}
  .pull-quote{margin:30px 0}
  .author-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .author-card .author-links{justify-content:center}
}
@media (max-width:768px){
  .related-grid-3{grid-template-columns:1fr}
  .article-meta-bar .share-quick{margin-left:0;width:100%}
  .article-end .row{flex-direction:column;align-items:stretch}
  .article-cover-inner{aspect-ratio:16/9}
  .article-cover-glyph{font-size:5rem}
  .insight-list li{padding-left:60px}
  .newsletter-inline form{flex-direction:column}
}