*,*::before,*::after{
margin:0; padding:0; box-sizing:border-box;
}

:root{
--cyan:#00f0ff; --violet:#8a3bff; --magenta:#ff2fd0;
--bg:#07040f; --ink:#f2eefc; --muted:#a79fc9;
--line:rgba(167,159,201,0.16);
}

html{ overflow-x:hidden; width:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  width:100%;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--magenta); color:#07040f; }

body.light-mode{
--bg:#f2eefc; --ink:#1a1528; --muted:#6b6390; --line:rgba(107,99,144,0.2);
}

.logo-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:0.04em;background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 50%,var(--magenta) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(0,240,255,0.5)) drop-shadow(0 0 16px rgba(138,59,255,0.35));transition:filter .3s ease,transform .3s ease;line-height:1;}
.logo:hover .logo-text{filter:drop-shadow(0 0 12px rgba(0,240,255,0.9)) drop-shadow(0 0 26px rgba(255,47,208,0.6));transform:scale(1.04);}
@media (max-width:560px){.logo-text{font-size:1.3rem;}}
.footer-logo{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:0.04em;display:inline-block;margin-bottom:14px;background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 50%,var(--magenta) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(0,240,255,0.5)) drop-shadow(0 0 14px rgba(138,59,255,0.35));}
.preloader-logo{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:2rem;letter-spacing:0.06em;background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 50%,var(--magenta) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(0,240,255,0.7)) drop-shadow(0 0 22px rgba(138,59,255,0.5));animation:pulse-logo 1.4s ease-in-out infinite;}

.orb{ position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; }
.orb.one{ width:380px; height:380px; background:var(--violet); opacity:0.35; top:-100px; left:-80px; }
.orb.two{ width:340px; height:340px; background:var(--cyan); opacity:0.20; top:600px; right:-100px; }
@media (max-width:768px){ .orb{ filter:blur(50px); } .orb.one{ width:220px; height:220px; top:-60px; left:-60px; opacity:0.25; } .orb.two{ width:200px; height:200px; top:auto; bottom:100px; right:-60px; opacity:0.15; } }

nav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 6vw;
  background:rgba(7,4,15,0.7);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
body.light-mode nav{
  background:rgba(242,238,252,0.7);
}
body.light-mode .nav-links{ color:#555; }
body.light-mode .nav-links a:hover{ color:#222; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:10px; font-size:1.1rem; cursor:pointer;
  align-items:center; justify-content:center; transition:border-color .2s, color .2s;
}
.nav-toggle:hover{ border-color:var(--cyan); color:var(--cyan); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.logo{ display:flex; align-items:center; }
.nav-links{ display:flex; gap:20px; font-size:0.9rem; color:var(--muted); font-weight:500; }
.nav-links a{ transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  padding:10px 20px; border-radius:999px; border:1px solid var(--cyan);
  font-size:0.85rem; font-weight:600; color:var(--cyan); transition:all .2s;
  box-shadow:0 0 12px rgba(0,240,255,0.25), inset 0 0 8px rgba(0,240,255,0.08);
}
.nav-cta:hover{ background:var(--cyan); color:#07040f; box-shadow:0 0 22px rgba(0,240,255,0.6); }

@media (max-width:768px){
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:rgba(7,4,15,0.98); backdrop-filter:blur(14px); padding:20px 6vw 30px;
    gap:0; border-bottom:1px solid var(--line); z-index:20;
  }
  body.light-mode .nav-links{ background:rgba(242,238,252,0.98); }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-right{ gap:12px; }
  .nav-cta{ display:none; }
}
@media (max-width:480px){
  .nav-cta{ display:none; }
}

header.hero{
  position:relative; z-index:1; overflow:hidden;
  min-height:82vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:100px 6vw 60px;
}
.hero-3d-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
@media (prefers-reduced-motion: reduce){ .hero-3d-canvas{ display:none; } }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; letter-spacing:0.3em;
  color:var(--cyan); text-transform:uppercase; margin-bottom:20px;
}
.hero-sub{ margin:24px auto 0; max-width:560px; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; justify-content:center; }
.btn{
  padding:14px 26px; border-radius:10px; font-weight:600; font-size:0.92rem;
  display:inline-flex; align-items:center; gap:8px; transition:transform .2s, box-shadow .2s;
  border:none; cursor:pointer; font-family:inherit;
}
.btn-primary{ background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#07040f; box-shadow:0 0 18px rgba(0,240,255,0.3), 0 0 34px rgba(138,59,255,0.2); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,47,208,0.45), 0 0 26px rgba(0,240,255,0.4); }
.btn:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--magenta); color:var(--magenta); }

.status-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,240,255,0.07); border:1px solid rgba(0,240,255,0.2);
  padding:8px 16px; border-radius:999px; font-size:0.78rem; color:var(--cyan);
  margin-bottom:10px; position:relative; z-index:1;
}
.status-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--cyan); animation:pulse-dot 1.6s ease-in-out infinite;
  box-shadow:0 0 8px rgba(0,240,255,0.8);
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 8px rgba(0,240,255,0.8); }
  50%{ opacity:0.5; transform:scale(0.7); box-shadow:0 0 16px rgba(0,240,255,0.3); }
}
body.light-mode .status-badge{ background:rgba(0,240,255,0.12); border-color:rgba(0,240,255,0.4); }

section{ padding:80px 6vw; position:relative; z-index:1; }
main{ padding:80px 6vw; position:relative; z-index:1; }
main h1:not(.hero-title){ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:clamp(1.8rem,3.6vw,2.6rem); text-transform:uppercase; margin-bottom:8px; }
main h2{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:clamp(1.3rem,2.8vw,1.8rem); text-transform:uppercase; color:var(--ink); margin:36px 0 16px; }
main p{ color:var(--muted); font-size:0.95rem; line-height:1.8; margin-bottom:16px; max-width:680px; }
main ul{ padding-left:20px; margin-bottom:18px; }
main ul li{ color:var(--muted); font-size:0.92rem; line-height:1.7; margin-bottom:8px; }
.section-tag{
  font-family:'JetBrains Mono', monospace; font-size:0.75rem; letter-spacing:0.26em;
  color:var(--magenta); text-transform:uppercase; margin-bottom:14px;
}
.section-title{
  font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem,3.6vw,2.8rem); margin-bottom:16px; position:relative; padding-bottom:14px;
}
.section-title::after{
  content:''; position:absolute; bottom:0; left:0; width:50px; height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:2px;
}
.section-lead{ color:var(--muted); max-width:620px; font-size:1rem; line-height:1.7; }

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

.stats-strip{ padding:50px 6vw; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:960px; margin:0 auto; }
.stat-card{
  text-align:center; padding:24px 16px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,0.02); transition:border-color .2s, transform .2s;
}
.stat-num{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:2.4rem; background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ font-size:0.78rem; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.07em; }
@media (max-width:600px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

.trust-strip{ padding:0 6vw 60px; }
.trust-label{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:18px; }
.trust-row{ display:flex; flex-wrap:wrap; gap:12px; }
.trust-chip{
  padding:8px 18px; border-radius:999px; border:1px solid var(--line); font-size:0.82rem; color:var(--muted);
  background:rgba(255,255,255,0.02); transition:border-color .2s, color .2s;
}
.trust-chip:hover{ border-color:var(--cyan); color:var(--cyan); }

.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:10px; }
.feature-card{
  border:1px solid var(--line); border-radius:14px; padding:26px 22px;
  transition:border-color .2s, transform .2s;
}
.feature-card:hover{ border-color:var(--magenta); transform:translateY(-4px); }
.feature-card h4{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.15rem; text-transform:uppercase; margin-bottom:8px;
}
.feature-card p{ color:var(--muted); font-size:0.85rem; line-height:1.55; }
.feature-num{
  display:inline-flex; width:44px; height:44px; border-radius:12px; background:rgba(138,59,255,0.15);
  align-items:center; justify-content:center; font-size:1.1rem; color:var(--violet); margin-bottom:16px;
}

/* ═══ FOOTER — 2026 REDESIGN ═══ */
footer{
  position:relative; z-index:1; padding:0 6vw;
  background:linear-gradient(180deg, transparent 0%, rgba(0,240,255,0.02) 100%);
}
.footer-glow{
  height:2px; background:linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  opacity:0.5; border-radius:2px; margin-bottom:0;
}
.footer-inner{ padding:44px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.6fr 3fr; gap:50px; margin-bottom:36px; }
.footer-brand .footer-logo{ margin-bottom:10px; }
.footer-brand p{ color:var(--muted); font-size:0.82rem; line-height:1.65; max-width:280px; margin-top:8px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:0.85rem;
  transition:border-color .2s, color .2s, transform .2s;
}
.footer-social a:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.fc h5{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:0.65rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--muted); margin-bottom:14px; opacity:0.5;
}
.fc ul{ list-style:none; }
.fc li{ margin-bottom:5px; }
.fc a{
  color:var(--muted); font-size:0.78rem; transition:color .2s; display:inline-block; padding:2px 0;
}
.fc a:hover{ color:var(--cyan); padding-left:3px; }
.footer-mid{
  border-top:1px solid var(--line); padding:20px 0; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.footer-mid p{ color:var(--muted); font-size:0.75rem; opacity:0.6; }
.newsletter-form{ display:flex; gap:6px; }
.newsletter-form input{
  padding:7px 12px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--ink); font-family:inherit; font-size:0.78rem; outline:none; min-width:200px;
}
.newsletter-form input:focus{ border-color:var(--cyan); }
.newsletter-form button{
  padding:7px 14px; border-radius:6px; border:none; background:linear-gradient(90deg,var(--cyan),var(--violet));
  color:#07040f; font-weight:600; font-size:0.78rem; cursor:pointer; white-space:nowrap; transition:opacity .2s;
}
.newsletter-form button:hover{ opacity:0.85; }
.footer-bot{
  border-top:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:0.72rem; color:var(--muted);
}
.footer-bot a{ color:var(--muted); transition:color .2s; }
.footer-bot a:hover{ color:var(--cyan); }
.footer-bot-links{ display:flex; gap:16px; }

@media (max-width:820px){
  .footer-top{ grid-template-columns:1fr; gap:30px; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (max-width:480px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:16px; }
  .footer-inner{ padding:30px 0 0; }
  .newsletter-form input{ min-width:140px; }
}

#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:var(--bg); transition:opacity .4s ease, visibility .4s ease;
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-bar{
  width:120px; height:3px; background:var(--line); border-radius:2px; overflow:hidden;
}
.loader-bar::after{
  content:''; display:block; width:40%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--violet));
  border-radius:2px; animation:loader-slide 1s ease-in-out infinite;
}
@keyframes loader-slide{
  0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); }
}
@keyframes pulse-logo{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(0,240,255,0.7)) drop-shadow(0 0 22px rgba(138,59,255,0.5)); }
  50%{ filter:drop-shadow(0 0 20px rgba(0,240,255,1)) drop-shadow(0 0 40px rgba(138,59,255,0.8)); }
}

#backToTop{
  position:fixed; bottom:30px; right:30px; z-index:20;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
  color:var(--muted); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transform:translateY(80px); opacity:0; transition:transform .3s ease, opacity .3s ease, border-color .2s, color .2s;
}
#backToTop.show{ transform:translateY(0); opacity:1; }
#backToTop:hover{ border-color:var(--cyan); color:var(--cyan); }
body.light-mode #backToTop{ background:#fff; }

#themeToggle{
  background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer;
  width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  transition:color .2s, background .2s;
}
#themeToggle:hover{ color:var(--ink); background:rgba(255,255,255,0.04); }

.ai-typing{ display:flex; gap:5px; align-items:center; background:rgba(255,255,255,0.03); border:1px solid var(--line); padding:11px 15px; border-radius:4px 14px 14px 14px; }
.ai-typing span{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:aiBounce 1.2s infinite; display:inline-block; }
.ai-typing span:nth-child(2){ animation-delay:0.15s; }
.ai-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes aiBounce{
  0%,60%,100%{ transform:translateY(0); opacity:0.5; } 30%{ transform:translateY(-5px); opacity:1; }
}

.ai-shell{
  max-width:min(860px,100%); margin:20px auto 0; border:1px solid var(--line); border-radius:20px;
  overflow:hidden; background:rgba(255,255,255,0.02); box-sizing:border-box;
}
.ai-topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; padding:14px 20px; border-bottom:1px solid var(--line);
}
.ai-identity{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.ai-avatar{
  width:34px; height:34px; border-radius:50%; background-color:var(--bg1);
  display:flex; align-items:center; justify-content:center; color:#07040f; font-size:0.85rem; flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ai-name{ font-weight:600; font-size:0.85rem; white-space:nowrap; }
.ai-status{ font-size:0.72rem; color:var(--muted); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.ai-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:#25d366; flex-shrink:0; }
.ai-toolbar{ flex-shrink:0; }
.ai-tool-btn{
  background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px;
  width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s; flex-shrink:0;
}
.ai-tool-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
@media (max-width:480px){
  .ai-topbar{ padding:12px 14px; }
  .ai-tool-btn{ width:32px; height:32px; }
  .ai-toolbar{ gap:6px !important; }
}
.ai-messages{
  height:440px; overflow-y:auto; overflow-x:hidden; padding:20px; display:flex; flex-direction:column; gap:14px;
}
.ai-messages::-webkit-scrollbar{ width:4px; }
.ai-messages::-webkit-scrollbar-thumb{ background:var(--violet); border-radius:2px; }
.ai-empty{ text-align:center; padding:40px 20px; color:var(--muted); }
.ai-empty i{ font-size:2rem; margin-bottom:12px; color:var(--violet); }
.ai-empty-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:12px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ai-empty-icon i{ font-size:2rem; margin-bottom:0; }
.ai-empty-title{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.15rem; color:var(--ink); margin-bottom:6px; }
.ai-empty-sub{ font-size:0.85rem; line-height:1.55; }
.ai-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.ai-chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); font-size:0.78rem; color:var(--muted);
  cursor:pointer; transition:border-color .2s, color .2s; background:none; font-family:inherit;
}
.ai-chip:hover{ border-color:var(--cyan); color:var(--cyan); }

.ai-persona-panel{
  border-bottom:1px solid var(--line); background:rgba(255,255,255,0.015);
  max-height:340px; overflow-y:auto;
}
.ai-persona-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;
  position:sticky; top:0; background:var(--bg);
}
.ai-persona-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;
  padding:4px 20px 18px;
}
.ai-persona-card{
  border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; cursor:pointer;
  background:none; font-family:inherit; color:var(--ink); transition:border-color .2s, transform .15s;
}
.ai-persona-card:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.ai-persona-card.active{ border-color:var(--magenta); background:rgba(255,47,208,0.06); }
.ai-persona-card-icon{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; color:#07040f; margin:0 auto 8px; overflow:hidden; position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ai-pfp-letter{ font-size:1.2rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.3); }
.ai-persona-card-name{ font-weight:600; font-size:0.82rem; margin-bottom:2px; text-align:center; }
.ai-persona-card-series{ font-size:0.6rem; color:var(--violet); margin-bottom:3px; text-align:center; text-transform:uppercase; letter-spacing:0.5px; }
.ai-persona-card-tag{ font-size:0.68rem; color:var(--muted); line-height:1.4; text-align:center; }
.ai-persona-bar{
  display:none; align-items:center; gap:8px; padding:8px 20px; font-size:0.75rem; color:var(--muted);
  border-bottom:1px solid var(--line); background:rgba(255,47,208,0.04);
}
.ai-persona-bar.show{ display:flex; }
.ai-persona-bar button{
  margin-left:auto; background:none; border:1px solid var(--line); color:var(--muted); border-radius:999px;
  padding:4px 10px; font-size:0.72rem; cursor:pointer; font-family:inherit;
}
.ai-persona-bar button:hover{ border-color:var(--cyan); color:var(--cyan); }
#aiPersonaShareBtn{ padding:4px 8px; }

/* ── CHARACTER TREE ── */
.ai-tree-wrap{ padding:4px 20px 8px; text-align:center; }
.ai-tree-root{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#ff2fd0,#8a3bff);
  padding:8px 18px; border-radius:10px; cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  border:2px solid transparent;
}
.ai-tree-root:hover{ transform:scale(1.03); box-shadow:0 0 20px rgba(138,59,255,0.3); }
.ai-tree-root.active{ border-color:#fff; }
.ai-tree-root-icon{ font-size:1.1rem; color:#fff; }
.ai-tree-root-info{ text-align:left; }
.ai-tree-root-name{ font-weight:700; font-size:0.88rem; color:#fff; line-height:1.2; }
.ai-tree-root-label{ font-size:0.62rem; color:rgba(255,255,255,0.65); line-height:1.3; }
.ai-tree-branch{ width:2px; height:16px; background:var(--line); margin:4px auto; }
.ai-tree-leaves{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; padding:2px 0 6px; }
.ai-tree-leaf{
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:8px; padding:4px 8px 4px 4px; cursor:pointer;
  transition:all .2s;
}
.ai-tree-leaf:hover{ border-color:var(--cyan); background:rgba(0,240,255,0.05); transform:translateY(-1px); }
.ai-tree-leaf.active{ border-color:var(--magenta); background:rgba(255,47,208,0.06); }
.ai-tree-leaf-icon{
  width:24px; height:24px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ai-tree-leaf-icon .ai-pfp-letter{ font-size:0.7rem; }
.ai-tree-leaf-name{ font-size:0.7rem; font-weight:600; }

.ai-msg{ display:flex; gap:10px; max-width:85%; min-width:0; }
.ai-msg.ai{ align-self:flex-start; }
.ai-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.ai-msg-avatar{
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ai-msg.ai .ai-msg-avatar{ background:linear-gradient(135deg,var(--cyan),var(--violet)); color:#07040f; }
.ai-msg.user .ai-msg-avatar{ background:var(--magenta); color:#07040f; }
.ai-msg-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ai-msg.user .ai-msg-body{ align-items:flex-end; }
.ai-msg-meta{ font-size:0.68rem; color:var(--muted); }
.ai-bubble{
  padding:10px 14px; border-radius:4px 14px 14px 14px; background:rgba(255,255,255,0.04);
  font-size:0.88rem; line-height:1.6; white-space:pre-wrap;
  max-width:100%; overflow-wrap:break-word; word-break:break-word; box-sizing:border-box;
}
.ai-msg.ai .ai-bubble{ border-radius:4px 14px 14px 14px; }
.ai-msg.user .ai-bubble{ border-radius:14px 4px 14px 14px; background:rgba(0,240,255,0.08); }
.ai-msg.user .ai-bubble p{ margin-bottom:0; }
.ai-bubble code{ background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; font-size:0.82rem; overflow-wrap:break-word; word-break:break-word; }
.ai-code-wrap{ margin:8px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:100%; }
.ai-code-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; background:rgba(255,255,255,0.04); border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted);
}
.ai-copy-btn{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.75rem; font-family:inherit;
  transition:color .2s;
}
.ai-copy-btn:hover{ color:var(--cyan); }
.ai-code-wrap pre{ margin:0; padding:12px; overflow-x:auto; max-width:100%; box-sizing:border-box; }
.ai-code-wrap pre code{ background:none; padding:0; font-size:0.8rem; line-height:1.5; white-space:pre; overflow-wrap:normal; word-break:normal; }
.ai-input-row{
  display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line);
  background:rgba(255,255,255,0.015);
}
.ai-input{
  flex:1; padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,0.03);
  color:var(--ink); font-family:inherit; font-size:0.88rem; outline:none; resize:none; min-height:46px; max-height:120px;
}
.ai-input:focus{ border-color:var(--cyan); }
.ai-send-btn{
  width:46px; height:46px; border-radius:12px; border:none; background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:#07040f; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s, opacity .15s;
}
.ai-send-btn:hover:not(:disabled){ transform:scale(1.06); }
.ai-send-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.ai-send-btn.stop-mode{ background:linear-gradient(135deg,#ff6b35,var(--magenta)); }

body.light-mode .ai-shell{ background:rgba(0,0,0,0.02); }
body.light-mode .ai-bubble{ background:rgba(0,0,0,0.04); }
body.light-mode .ai-msg.user .ai-bubble{ background:rgba(0,240,255,0.15); }
body.light-mode .ai-input{ background:#fff; }

/* MOOD BUTTONS */
#aiPersonaControls{
  padding:8px 16px 10px; border-bottom:1px solid var(--line);
  background:var(--bg1);
}
.ai-ctrl-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-ctrl-label{ font-size:0.7rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; min-width:36px; }
.ai-mood-section{ border-top:1px solid var(--line); margin-top:8px; }
.ai-mood-options{ display:flex; gap:6px; flex-wrap:wrap; }
.ai-mood-btn{
  background:none; border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer;
  font-family:inherit; font-size:0.68rem; font-weight:600; color:var(--muted);
  transition:border-color .2s, color .2s, background .2s; min-width:60px; text-align:center; line-height:1.3;
}
.ai-mood-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.ai-mood-btn.active{ border-color:var(--magenta); color:var(--magenta); background:rgba(255,47,208,0.06); }

/* ── RELATIONSHIP TOGGLE ── */
.ai-relation-section{ border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.ai-relation-options{ display:flex; gap:6px; flex-wrap:wrap; }
.ai-relation-btn{
  background:none; border:1px solid var(--line); border-radius:10px; padding:7px 14px; cursor:pointer;
  font-family:inherit; font-size:0.72rem; font-weight:600; color:var(--muted);
  transition:border-color .2s, color .2s, background .2s, box-shadow .2s;
  display:flex; align-items:center; gap:6px;
}
.ai-relation-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.ai-relation-btn.active{ border-color:#ff2fd0; color:#ff2fd0; background:rgba(255,47,208,0.06); box-shadow:0 0 12px rgba(255,47,208,0.2); }
.ai-relation-btn i{ font-size:0.85rem; }
body.light-mode .stat-card, body.light-mode .stack-card, body.light-mode .feature-card, body.light-mode .pricing-card, body.light-mode .faq-item, body.light-mode .service-card{
  background:rgba(0,0,0,0.03);
}
body.light-mode #preloader{ background:#f2eefc; }
body.light-mode .review-card, body.light-mode .trust-chip, body.light-mode .tag,
body.light-mode .contact-form input, body.light-mode .contact-form textarea,
body.light-mode .newsletter-form input{ background:#fff; }
body.light-mode .stack-card:hover{ border-color:var(--violet); }

.work-categories{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:10px; }
.cat-link{ display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:0.82rem;font-weight:600;color:var(--magenta);transition:color .2s,gap .2s; }
.cat-link:hover{ color:var(--cyan);gap:8px; }
.service-link{ display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:0.82rem;font-weight:600;color:var(--magenta);transition:color .2s,gap .2s; }
.service-link:hover{ color:var(--cyan);gap:8px; }
.estimator-cta{ text-align:center; margin-top:30px; }
.estimator-cta p{ color:var(--muted); font-size:0.9rem; margin-bottom:14px; }

.cookie-content, .policy-content{ max-width:760px; margin:40px auto 0; color:var(--muted); font-size:0.92rem; line-height:1.75; }
.cookie-content h2, .policy-content h2{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.3rem; color:var(--ink); margin:30px 0 12px; text-transform:uppercase; }
.cookie-content h3, .policy-content h3{ font-weight:600; font-size:1rem; color:var(--ink); margin:24px 0 8px; }
.cookie-content p, .policy-content p{ margin-bottom:14px; }
.cookie-content ul, .policy-content ul{ padding-left:20px; margin-bottom:14px; }
.cookie-content li, .policy-content li{ margin-bottom:6px; }

.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:10px; }
.blog-card{ border:1px solid var(--line); border-radius:14px; padding:26px 22px; transition:border-color .2s, transform .2s; }
.blog-card:hover{ border-color:var(--violet); transform:translateY(-4px); }
.blog-card .blog-meta{ font-size:0.75rem; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-bottom:10px; }
.blog-card h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem; text-transform:uppercase; margin-bottom:8px; }
.blog-card p{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin-bottom:14px; }

.post-content{ max-width:740px; margin:40px auto 0; color:var(--muted); font-size:0.95rem; line-height:1.8; }
.post-content h2{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.4rem; color:var(--ink); margin:40px 0 14px; }
.post-content h3{ font-weight:600; font-size:1.05rem; color:var(--ink); margin:30px 0 10px; }
.post-content p{ margin-bottom:18px; }
.post-content ul{ padding-left:22px; margin-bottom:18px; }
.post-content li{ margin-bottom:8px; }
.post-content strong{ color:var(--ink); }

.contact-panel{ display:grid; grid-template-columns:1.5fr auto 1fr; gap:24px; align-items:start; max-width:960px; margin:0 auto; }
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form label{ font-size:0.82rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--ink); font-family:inherit; font-size:0.9rem; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--cyan); }
.contact-form textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:0.8rem; color:var(--muted); text-align:center; margin-top:10px; padding:10px 14px; border:1px dashed var(--line); border-radius:8px; background:rgba(0,240,255,0.03); line-height:1.5; }
.divider-or{
  display:flex; align-items:center; gap:14px; color:var(--muted); font-size:0.8rem; font-weight:500;
  writing-mode:vertical-lr; padding:0 6px; letter-spacing:0.05em;
}
.divider-or::before, .divider-or::after{
  content:''; flex:1; width:1px; background:var(--line);
}
.contact-methods{ display:flex; flex-direction:column; gap:12px; }
.contact-pill{
  display:flex; align-items:center; gap:12px; padding:16px 22px; border-radius:14px;
  border:1px solid var(--line); color:var(--ink); font-size:0.88rem; transition:border-color .2s, color .2s, background .2s, transform .2s;
}
.contact-pill i{ width:20px; text-align:center; font-size:1rem; }
.contact-pill:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(0,240,255,0.04); transform:translateX(4px); }
@media (max-width:740px){ .contact-panel{ grid-template-columns:1fr; gap:20px; } .divider-or{ writing-mode:horizontal-tb; flex-direction:row; padding:4px 0; } .divider-or::before, .divider-or::after{ width:auto; height:1px; flex:1; } .contact-methods{ flex-direction:row; flex-wrap:wrap; } .contact-pill{ flex:1; min-width:180px; } }

.service-card{
  display:block; padding:28px 24px; border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s, transform .2s; color:inherit;
}
.service-card:hover{ border-color:var(--cyan); transform:translateY(-4px); }
.service-card h4{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem; text-transform:uppercase; margin-bottom:8px; }
.service-card p{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin:0; }

.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:10px; }
.pricing-card{
  border:1px solid var(--line); border-radius:16px; padding:32px 24px;
  display:flex; flex-direction:column; gap:14px; transition:border-color .2s, transform .2s, background .2s;
}
.pricing-card.featured{ border-color:var(--cyan); background:rgba(0,240,255,0.03); }
.pricing-card h4{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.15rem; text-transform:uppercase; color:var(--cyan); }
.pricing-card .price{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:2.2rem; letter-spacing:-0.02em; }
.pricing-card .price small{ font-size:0.9rem; color:var(--muted); font-weight:400; }
.pricing-card .desc{ color:var(--muted); font-size:0.85rem; line-height:1.55; }
.pricing-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.pricing-card ul li{ font-size:0.84rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
.pricing-card ul li i{ color:var(--cyan); font-size:0.7rem; }

.review-card{
  border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:border-color .2s, transform .2s;
}
.review-card:hover{ border-color:var(--violet); }
.review-card .review-stars{ color:#ffd700; font-size:0.85rem; margin-bottom:10px; }
.review-card p{ color:var(--muted); font-size:0.88rem; line-height:1.65; margin-bottom:14px; font-style:italic; }
.review-card .review-author{ font-weight:600; font-size:0.82rem; color:var(--ink); }
.review-card .review-role{ font-size:0.74rem; color:var(--muted); }

.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:10px; }

.faq-grid{ max-width:700px; margin:20px auto 0; display:flex; flex-direction:column; gap:2px; }
.faq-item{ border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s; }
.faq-item:hover{ border-color:var(--violet); }
.faq-item summary{
  padding:18px 20px; color:var(--ink); font-size:0.92rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:color .2s;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq-item summary:hover{ color:var(--cyan); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ display:none; }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
  color:var(--muted); font-size:0.86rem; line-height:1.65;
}
.faq-item[open] .faq-a{ max-height:600px; padding:0 20px 18px; }

.stack-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; }
.stack-card{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  border:1px solid var(--line); border-radius:14px; padding:22px 14px;
  background:rgba(255,255,255,0.02);
  transition:transform .2s, border-color .2s, background .2s;
}
.stack-card:hover{ transform:translateY(-4px); border-color:var(--cyan); background:rgba(0,240,255,0.04); }
.stack-card i{ font-size:1.7rem; color:var(--cyan); }
.stack-card span{ font-size:0.82rem; color:var(--ink); font-weight:600; }
.stack-card small{ font-size:0.68rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }

.tag{ display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(138,59,255,0.12); color:var(--violet); font-size:0.72rem; font-weight:500; }

.about-cta{
  max-width:600px; margin:30px auto 0; text-align:center; padding:40px 32px;
  border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,0.015);
}
.about-cta h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.2rem; text-transform:uppercase; margin-bottom:10px; }
.about-cta p{ color:var(--muted); font-size:0.88rem; margin-bottom:0; }

.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; max-width:800px; margin:30px auto 0; }
.sitemap-grid a{ display:block; padding:14px 18px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:0.88rem; transition:border-color .2s, color .2s, transform .2s; }
.sitemap-grid a:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }

/* Page-specific light mode overrides */
body.light-mode .work-cat-card{ background:rgba(0,0,0,0.02); }
body.light-mode .est-card{ background:rgba(0,0,0,0.02); }
body.light-mode .est-option.selected{ background:rgba(0,240,255,0.12); }
body.light-mode .about-cta{ background:rgba(0,0,0,0.02); }
body.light-mode .pricing-card.featured{ background:rgba(0,240,255,0.06); }

/* Wrap (404/thank-you centered layout) */
.wrap{ max-width:560px; margin:0 auto; padding:80px 6vw; text-align:center; position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* Skip link */
.skip-link{position:fixed;top:-100%;left:16px;z-index:9999;padding:12px 20px;background:var(--cyan);color:#07040f;font-weight:600;font-size:0.85rem;border-radius:0 0 10px 10px;text-decoration:none;transition:top .25s ease;outline:none;}
.skip-link:focus{top:0;color:#07040f;}

/* Particle canvas */
#particleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.5;}

/* Text reveal */
.reveal-text{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal-text.in{opacity:1;transform:translateY(0);}

/* Custom scrollbar */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;transition:background .3s;}
::-webkit-scrollbar-thumb:hover{background:var(--violet);}
@supports (scrollbar-color: auto){
  *{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg);}
}

/* Enhanced back to top */
#backToTop.show{transform:translateY(0) scale(1);opacity:1;}
#backToTop:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 0 24px rgba(0,240,255,0.5);}

/* Card hover depth */
.feature-card:hover,.stat-card:hover,.pricing-card:hover,.review-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 30px rgba(138,59,255,0.15);}

.about-link{
display:inline-flex;align-items:center;gap:5px;font-size:0.85rem;font-weight:600;color:var(--magenta);transition:color .2s,gap .2s;
}

.about-link:hover{
color:var(--cyan);gap:8px;
}

.about-links{
display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;justify-content:center;
}

.est-wrap{
max-width:760px; margin:0 auto;
}

.est-card{
border:1px solid var(--line); border-radius:20px; padding:36px 32px; background:rgba(255,255,255,0.02);
}

.est-group{
margin-bottom:30px;
}

.est-group-label{
font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:1rem; margin-bottom:14px; display:block;
}

.est-options{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
}

.est-option{
border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; text-align:center;
    font-size:0.85rem; color:var(--muted); transition:border-color .2s, color .2s, background .2s; user-select:none;
}

.est-option:hover{
border-color:var(--cyan); color:var(--ink);
}

.est-option.selected{
border-color:var(--cyan); background:rgba(0,240,255,0.08); color:var(--cyan); font-weight:600;
}

.est-option small{
display:block; color:var(--muted); font-size:0.72rem; margin-top:3px; font-family:'JetBrains Mono',monospace;
}

.est-result{
margin-top:10px; border-top:1px solid var(--line); padding-top:28px; text-align:center;
}

.est-result-label{
font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px;
}

.est-result-value{
font-family:'Rajdhani',sans-serif; font-weight:700; font-size:clamp(1.6rem,4vw,2.4rem);
    background:linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip:text;
    background-clip:text; color:transparent; filter:drop-shadow(0 0 12px rgba(0,240,255,0.3)); margin-bottom:8px;
    text-transform:uppercase;
}

.est-result-note{
color:var(--muted); font-size:0.85rem; max-width:440px; margin:0 auto 24px; line-height:1.6;
}

h1.hero-title{
font-family:'Rajdhani', sans-serif; font-weight:700;
    font-size:clamp(2.4rem, 7vw, 5.4rem); line-height:1; text-transform:uppercase;
    filter: drop-shadow(0 0 18px rgba(0,240,255,0.25));
    animation: heroGlow 3s ease-in-out infinite alternate;
}

@keyframes heroGlow{
0%{ filter:drop-shadow(0 0 18px rgba(0,240,255,0.25)) drop-shadow(0 0 4px rgba(138,59,255,0.1)); }
    100%{ filter:drop-shadow(0 0 30px rgba(0,240,255,0.45)) drop-shadow(0 0 60px rgba(138,59,255,0.3)) drop-shadow(0 0 90px rgba(255,47,208,0.15)); }
}

.hero-build{
display:inline-block;
    background:linear-gradient(100deg, var(--cyan) 0%, var(--violet) 35%, var(--magenta) 55%, var(--violet) 75%, var(--cyan) 100%);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer{
0%{ background-position:300% 0; }
    100%{ background-position:-300% 0; }
}

h1.hero-title .grad{
background:linear-gradient(100deg, var(--cyan) 10%, var(--violet) 50%, var(--magenta) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size:200% 100%;
    animation: gradShift 5s ease-in-out infinite alternate;
}

@keyframes gradShift{
0%{ background-position:0% 0; filter:brightness(1); }
    50%{ filter:brightness(1.3); }
    100%{ background-position:100% 0; filter:brightness(1); }
}

.type-cursor{
display:inline-block; color:var(--cyan); font-weight:700;
    animation: blink 0.7s step-end infinite;
    text-shadow:0 0 10px rgba(0,240,255,0.8);
}

#waBubble{
position:fixed; bottom:26px; left:26px; z-index:40; width:56px; height:56px; border-radius:50%;
    background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    box-shadow:0 0 18px rgba(37,211,102,0.5); transition:transform .2s, box-shadow .2s; text-decoration:none;
    animation: wa-pulse 2.4s ease-in-out infinite;
}

#waBubble:hover{
transform:scale(1.08); box-shadow:0 0 28px rgba(37,211,102,0.75);
}

@keyframes wa-pulse{
0%,100%{ box-shadow:0 0 18px rgba(37,211,102,0.5); } 50%{ box-shadow:0 0 30px rgba(37,211,102,0.8); }
}

@media (max-width:560px){
.ai-messages{ height:60vh; }
#waBubble{ width:50px; height:50px; font-size:1.3rem; bottom:20px; left:20px; }
}

#exitOverlay{
position:fixed; inset:0; z-index:200; background:rgba(4,2,10,0.82); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}

#exitOverlay.show{
opacity:1; visibility:visible;
}

.exit-modal{
max-width:420px; width:100%; border:1px solid var(--cyan); border-radius:20px; padding:36px 30px;
    background:#0a0714; text-align:center; box-shadow:0 0 40px rgba(0,240,255,0.25);
    transform:scale(0.92); transition:transform .3s;
}

#exitOverlay.show .exit-modal{
transform:scale(1);
}

.exit-modal i.fa-envelope-open-text{
font-size:2rem; color:var(--cyan); margin-bottom:14px;
}

.exit-modal h3{
font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:1.4rem; margin-bottom:10px;
}

.exit-modal p{
color:var(--muted); font-size:0.9rem; line-height:1.6; margin-bottom:22px;
}

.exit-modal .btn{
width:100%; justify-content:center; margin-bottom:10px;
}

#exitCloseBtn{
background:none; border:none; color:var(--muted); font-size:0.8rem; cursor:pointer; text-decoration:underline;
}

#exitCloseBtn:hover{
color:var(--ink);
}

.estimator-cta{
margin-top:30px;text-align:center;
}

.estimator-cta p{
color:var(--muted);margin-bottom:16px;
}

.service-link{
display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:0.82rem;font-weight:600;color:var(--magenta);transition:color .2s,gap .2s;
}

.service-link:hover{
color:var(--cyan);gap:8px;
}

.work-categories{
display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:10px;
}

.work-cat-card{
border:1px solid var(--line); border-radius:16px; padding:28px 24px; background:rgba(255,255,255,0.02); transition:border-color .2s,transform .2s;
}

.work-cat-card:hover{
border-color:var(--cyan); transform:translateY(-4px);
}

.work-cat-card .cat-icon{
font-size:1.8rem; color:var(--cyan); margin-bottom:14px;
}

.work-cat-card h3{
font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.2rem; text-transform:uppercase; margin-bottom:10px;
}

.work-cat-card p{
color:var(--muted); font-size:0.88rem; line-height:1.65; margin-bottom:16px;
}

.work-cat-card .cat-tags{
display:flex; flex-wrap:wrap; gap:8px;
}

.cat-link{
display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:0.82rem;font-weight:600;color:var(--magenta);transition:color .2s,gap .2s;
}

.cat-link:hover{
color:var(--cyan);gap:8px;
}

/* Footer */
.footer-bottom-links{ display:flex; gap:18px; }
.footer-bot-links{ display:flex; gap:16px; }

/* Back link (used on many pages) */
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:0.85rem; transition:color .2s; margin-bottom:20px; }
.back-link:hover{ color:var(--cyan); }

/* Theme toggle class (matches #themeToggle ID) */
.theme-toggle{ background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer; width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:color .2s, background .2s; }
.theme-toggle:hover{ color:var(--ink); background:rgba(255,255,255,0.04); }

/* CTA box */
.cta-box{ border:1px solid var(--line); border-radius:18px; padding:40px; text-align:center; background:radial-gradient(ellipse at top, rgba(0,240,255,0.06), transparent 70%); }

/* Legal page updated date */
.updated{ font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--muted); margin-bottom:24px; }

/* Reviews page */
.review-text{ color:var(--muted); font-size:0.9rem; line-height:1.65; margin-bottom:14px; font-style:italic; }
.review-author{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.review-author b{ font-weight:600; font-size:0.82rem; color:var(--ink); display:block; }
.review-author span{ font-size:0.74rem; color:var(--muted); display:block; }
.review-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:#07040f; flex-shrink:0; }
.review-placeholder{ opacity:0.55; border-style:dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:200px; }

/* Work page */
.project-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; max-width:1100px; margin:0 auto; }
@media (max-width:820px){ .project-wrap{ grid-template-columns:1fr; } }
.tilt-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.02); transition:transform .2s; }
.tilt-card:hover{ border-color:var(--cyan); }
.browser-chrome{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.03); }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.url-bar{ flex:1; padding:6px 12px; border-radius:6px; background:rgba(255,255,255,0.05); font-size:0.75rem; color:var(--muted); text-align:center; }
.live-badge{ font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:#25d366; letter-spacing:0.06em; }
.frame-body{ min-height:260px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2); position:relative; flex-direction:column; }
.frame-body iframe{ width:100%; height:480px; border:none; display:block; background:#fff; }
.frame-fallback-note{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted); text-align:center; padding:10px 16px; }
.preview-cta{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:1px dashed var(--line); border-radius:14px; padding:28px 36px; color:var(--muted); cursor:pointer; font-family:inherit; transition:border-color .2s, color .2s; }
.preview-cta:hover{ border-color:var(--cyan); color:var(--cyan); }
.preview-cta span{ font-size:0.9rem; font-weight:600; }
.preview-cta small{ font-size:0.72rem; }
.project-info{ display:flex; flex-direction:column; gap:14px; }
.project-info p{ color:var(--muted); font-size:0.95rem; line-height:1.7; }
.client{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--cyan); letter-spacing:0.08em; }
.project-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.project-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.frame-open-btn{ display:inline-block; margin-top:10px; padding:10px 20px; background:rgba(0,240,255,0.1); border-radius:8px; color:var(--cyan); font-size:0.85rem; font-weight:600; transition:background .2s; text-decoration:none; }
.frame-open-btn:hover{ background:rgba(0,240,255,0.2); }

/* Services page */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:10px; }
.icon-wrap{ width:48px; height:48px; border-radius:14px; background:rgba(0,240,255,0.08); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--cyan); margin-bottom:14px; }
.price-badge{ display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(138,59,255,0.12); color:var(--violet); font-size:0.72rem; font-weight:500; margin-top:10px; }

/* Process section */
.process-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:20px; }
.process-step{ border:1px solid var(--line); border-radius:14px; padding:24px 20px; transition:border-color .2s; }
.process-step:hover{ border-color:var(--cyan); }
.process-step h4{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; text-transform:uppercase; margin-bottom:8px; color:var(--ink); }
.process-step p{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin:0; }

/* Pricing page */
.pricing-tier{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }
.pricing-list{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:4px; }

/* FAQ page */
.faq-icon{ float:right; color:var(--muted); transition:transform .3s, color .2s; }
details[open] .faq-icon i{ transform:rotate(45deg); color:var(--cyan); display:inline-block; }

/* Blog page */
.blog-thumb{ width:100%; height:140px; border-radius:10px; background:rgba(138,59,255,0.08); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--violet); margin-bottom:14px; }
.blog-body{ display:flex; flex-direction:column; gap:6px; }
.read-more{ display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:600; color:var(--magenta); transition:color .2s, gap .2s; }
.read-more:hover{ color:var(--cyan); gap:10px; }
.coming-soon{ border:1px dashed var(--line); border-radius:14px; padding:40px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:0.88rem; text-align:center; }

/* Blog post */
.post-date{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--muted); margin-bottom:20px; }

/* Sitemap page */
.sitemap-col h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
.sitemap-col ul{ list-style:none; }
.sitemap-col ul li{ margin-bottom:8px; }
.sitemap-col ul li a{ color:var(--muted); font-size:0.88rem; transition:color .2s; display:inline-flex; align-items:center; gap:6px; }
.sitemap-col ul li a:hover{ color:var(--cyan); }
.sitemap-col ul li a i{ font-size:0.65rem; color:var(--violet); }

/* About page */
.profile-head{ display:flex; align-items:center; gap:20px; margin-bottom:30px; }
.avatar{ width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; color:#07040f; flex-shrink:0; }
.role{ color:var(--muted); font-size:0.88rem; margin-top:4px; }
.timeline{ display:flex; flex-direction:column; gap:16px; margin:20px 0; }
.tl-item{ border-left:2px solid var(--cyan); padding-left:20px; padding-bottom:20px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-year{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--cyan); letter-spacing:0.08em; display:block; margin-bottom:6px; }
.tl-item h4{ font-weight:600; font-size:0.95rem; color:var(--ink); margin-bottom:4px; }
.tl-item p{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin:0; }
.skills-grid{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.skill-chip{ padding:8px 18px; border-radius:999px; border:1px solid var(--line); font-size:0.82rem; color:var(--muted); background:rgba(255,255,255,0.02); transition:border-color .2s, color .2s; }
.skill-chip:hover{ border-color:var(--cyan); color:var(--cyan); }

@keyframes blink{
0%,100%{ opacity:1; } 50%{ opacity:0; }
}

/* === ENHANCEMENTS === */

/* Gradient background shift on btn-primary */
.btn-primary{ background-size:200% 100%; background-position:0 0; transition:transform .2s, box-shadow .2s, background-position .3s; }
.btn-primary:hover{ background-position:100% 0; }

/* Toast notification */
.toast-container{ position:fixed; bottom:90px; right:30px; z-index:999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{ padding:14px 22px; border-radius:10px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:0.88rem; font-weight:500; box-shadow:0 8px 30px rgba(0,0,0,0.3); transform:translateX(120%); opacity:0; transition:transform .4s ease, opacity .4s ease; max-width:320px; display:flex; align-items:center; gap:10px; pointer-events:auto; }
.toast.show{ transform:translateX(0); opacity:1; }
.toast-success{ border-color:var(--cyan); }
.toast-error{ border-color:var(--magenta); }

/* Footer brand spacing */
.footer-brand{ padding-right:16px; }

/* GDPR consent banner */
.gdpr-banner{ position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-top:1px solid var(--line); padding:14px 6vw; display:flex; align-items:center; justify-content:space-between; gap:16px; z-index:9999; font-size:0.85rem; color:var(--muted); backdrop-filter:blur(12px); transform:translateY(100%); transition:transform .4s ease; }
.gdpr-banner.show{ transform:translateY(0); }
.gdpr-banner p{ margin:0; flex:1; }
.gdpr-btn{ background:var(--cyan); color:#07040f; border:none; padding:8px 20px; border-radius:8px; font-weight:600; font-size:0.82rem; cursor:pointer; white-space:nowrap; font-family:inherit; }
.gdpr-btn:hover{ opacity:0.85; }
@media (max-width:600px){ .gdpr-banner{ flex-direction:column; text-align:center; padding:12px 5vw; } }

/* Backlinks section */
.backlinks-wrap{ border-top:1px solid var(--line); padding-top:16px; margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.backlinks-wrap .bl-label{ font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; opacity:0.5; margin-right:6px; }
.backlinks-wrap a{ font-size:0.78rem; color:var(--muted); transition:color .2s; text-decoration:none; }
.backlinks-wrap a:hover{ color:var(--cyan); }
.backlinks-wrap a::before{ content:"// "; color:var(--violet); font-size:0.65rem; opacity:0.4; }

/* Trustpilot widget row */
.trustpilot-wrap{ grid-column:1 / -1; padding-top:12px; border-top:1px solid var(--line); margin-top:8px; }
.trustpilot-wrap iframe{ max-width:260px !important; }

/* Legal/content pages */
.updated{ font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--muted); margin-bottom:28px; opacity:0.7; }

/* Content tables (cookie policy, etc.) */
main table{ width:100%; border-collapse:collapse; margin:20px 0; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
main th, main td{ padding:12px 16px; text-align:left; font-size:0.9rem; }
main th{ background:rgba(0,240,255,0.06); color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--line); }
main td{ color:var(--muted); border-bottom:1px solid var(--line); }
main tr:last-child td{ border-bottom:none; }
main tr:hover td{ background:rgba(255,255,255,0.02); }

/* === 3D EFFECTS === */

/* Subtle 3D Noise Texture Background */
#bgTexture{ position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:0.15; background:
  radial-gradient(ellipse at 20% 50%, rgba(0,240,255,0.06) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(138,59,255,0.05) 0%, transparent 50%),
  radial-gradient(ellipse at 50% 80%, rgba(255,47,208,0.04) 0%, transparent 50%);
  background-size: 100% 100%;
  animation: texDrift 20s ease-in-out infinite alternate;
}
@keyframes texDrift{ 0%{ transform:scale(1) rotate(0deg); } 100%{ transform:scale(1.05) rotate(2deg); } }

/* Holographic Card Effect */
.holo-card{ position:relative; overflow:hidden; }
.holo-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none; z-index:1; background:linear-gradient(135deg, rgba(0,240,255,0.1), rgba(138,59,255,0.08), rgba(255,47,208,0.06)); mix-blend-mode:overlay; }
.holo-card:hover::before{ opacity:1; }
.holo-card::after{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none; z-index:2; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.08), transparent 50%); }
.holo-card:hover::after{ opacity:1; }

/* 3D Scroll-Triggered Flip */
.flip-section{ perspective:1200px; }
.flip-inner{ transform-style:preserve-3d; transform:rotateX(12deg) scale(0.95); opacity:0.6; transition:transform .8s cubic-bezier(.23,1,.32,1), opacity .8s ease; }
.flip-inner.in{ transform:rotateX(0deg) scale(1); opacity:1; }

/* 3D Button Morph */
.btn-3d{ transition:transform .2s, box-shadow .2s; transform-style:preserve-3d; }
.btn-3d:hover{ transform:perspective(400px) translateZ(8px) rotateX(-2deg); box-shadow:0 12px 30px rgba(0,240,255,0.25), 0 0 20px rgba(138,59,255,0.15); }
.btn-3d:active{ transform:perspective(400px) translateZ(-2px) rotateX(1deg); }

/* Depth-of-field Cursor */
.dof-element{ transition:filter .2s ease; }
/* No more depth-of-field or Three.js — removed */

/* ═══════════════════════════════════════════════════
   COMMAND PALETTE / SITE SEARCH (Ctrl/Cmd+K)
   ═══════════════════════════════════════════════════ */
.nav-search-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s, color .2s; flex-shrink:0;
}
.nav-search-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
#cmdPalette{
  position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center;
  padding:12vh 20px 0;
}
#cmdPalette.show{ display:flex; }
.cmd-backdrop{ position:absolute; inset:0; background:rgba(7,4,15,0.75); backdrop-filter:blur(4px); }
body.light-mode .cmd-backdrop{ background:rgba(242,238,252,0.75); }
.cmd-box{
  position:relative; width:100%; max-width:560px; background:var(--bg); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:cmdIn .18s ease;
}
@keyframes cmdIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.cmd-input-row{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line);
  color:var(--muted);
}
.cmd-input-row input{
  flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:0.95rem; font-family:inherit;
}
.cmd-input-row kbd{
  font-size:0.68rem; border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--muted);
}
.cmd-list{ max-height:50vh; overflow-y:auto; padding:8px; }
.cmd-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; font-size:0.9rem;
  color:var(--ink); transition:background .15s;
}
.cmd-item i{ width:16px; color:var(--cyan); }
.cmd-item:hover{ background:rgba(0,240,255,0.08); }
.cmd-empty{ padding:20px 12px; color:var(--muted); font-size:0.85rem; text-align:center; }

/* ═══════════════════════════════════════════════════
   EXIT-INTENT POPUP
   ═══════════════════════════════════════════════════ */
#exitPopup{ position:fixed; inset:0; z-index:210; opacity:0; pointer-events:none; transition:opacity .3s; }
#exitPopup.show{ opacity:1; pointer-events:auto; }
.exit-backdrop{ position:absolute; inset:0; background:rgba(7,4,15,0.8); backdrop-filter:blur(4px); }
body.light-mode .exit-backdrop{ background:rgba(242,238,252,0.8); }
.exit-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,88vw);
  background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:36px 32px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.exit-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.25em; color:var(--cyan);
  text-transform:uppercase; margin-bottom:14px;
}
.exit-card h3{ font-family:'Rajdhani',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:12px; }
.exit-card p{ color:var(--muted); font-size:0.9rem; line-height:1.6; margin-bottom:22px; }
.exit-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.exit-close:hover{ border-color:var(--cyan); color:var(--cyan); }
@media (max-width:480px){ .exit-card{ padding:28px 20px; } }

/* Process page */
.process-full{ display:flex; flex-direction:column; gap:20px; max-width:740px; }
.pf-step{ display:flex; gap:20px; padding:24px 24px; border:1px solid var(--line); border-radius:16px; transition:border-color .2s; align-items:flex-start; }
.pf-step:hover{ border-color:var(--cyan); }
.pf-num{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.6rem; color:var(--magenta); min-width:48px; line-height:1; }
.pf-body h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem; text-transform:uppercase; margin-bottom:4px; }
.pf-tag{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--muted); margin-bottom:10px; display:block; }
.pf-body p{ color:var(--muted); font-size:0.88rem; line-height:1.65; margin:0; max-width:600px; }
@media (max-width:560px){ .pf-step{ flex-direction:column; gap:10px; padding:20px 16px; } }
.timeline-bar{ display:flex; gap:2px; height:44px; margin:20px 0; border-radius:10px; overflow:hidden; max-width:640px; }
.tl-bar-seg{ display:flex; align-items:center; justify-content:center; width:calc(var(--pct) * 1%); background:var(--color); opacity:0.7; }
.tl-bar-seg span{ font-size:0.65rem; font-weight:600; color:#07040f; text-transform:uppercase; letter-spacing:0.04em; }
@media (max-width:480px){ .tl-bar-seg span{ font-size:0.5rem; } }

/* Case studies page */
.cs-card{ border:1px solid var(--line); border-radius:18px; padding:36px 32px; background:rgba(255,255,255,0.015); transition:border-color .2s; max-width:800px; }
.cs-card:hover{ border-color:var(--cyan); }
.cs-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap; gap:8px; }
.cs-client{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--cyan); letter-spacing:0.08em; }
.cs-year{ font-size:0.72rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.cs-card h2{ margin-bottom:8px; }
.cs-sub{ color:var(--muted); font-size:0.92rem; line-height:1.65; max-width:640px; }
.cs-meta-row{ display:flex; gap:24px; margin:18px 0; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; }
.cs-meta{ display:flex; flex-direction:column; gap:2px; }
.cs-meta-label{ font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.cs-meta span:last-child{ font-size:0.88rem; font-weight:600; color:var(--ink); }
.cs-section{ margin-top:20px; }
.cs-section h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.cs-section p{ color:var(--muted); font-size:0.9rem; line-height:1.7; }
.cs-section ul{ padding-left:20px; margin-bottom:14px; }
.cs-section ul li{ color:var(--muted); font-size:0.88rem; line-height:1.7; margin-bottom:6px; }
.cs-placeholder{ border-style:dashed; border-color:var(--line); }
@media (max-width:560px){ .cs-card{ padding:24px 18px; } }

/* Audit form specific styling */
#audit-form .contact-panel{
  background:rgba(255,255,255,0.015);
  border:1px solid var(--line);
  border-radius:20px;
  padding:36px 32px;
}
#audit-form .contact-form{
  max-width:100%;
}
@media (max-width:560px){
  #audit-form .contact-panel{ padding:24px 18px; }
}

/* Portfolio gallery */
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-top:10px; }
.port-item{ border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .2s, transform .2s; background:rgba(255,255,255,0.015); }
.port-item:hover{ border-color:var(--cyan); transform:translateY(-4px); }
.port-thumb{ position:relative; aspect-ratio:16/10; background:rgba(138,59,255,0.06); overflow:hidden; }
.port-thumb-inner{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:0.85rem; border:1px solid var(--line); border-radius:12px; }
.port-thumb-inner i{ font-size:2rem; color:var(--violet); }
.port-overlay{ position:absolute; inset:0; background:rgba(7,4,15,0.8); display:flex; align-items:center; justify-content:center; gap:12px; opacity:0; transition:opacity .3s; }
.port-item:hover .port-overlay{ opacity:1; }
.port-overlay .btn{ padding:10px 18px; font-size:0.82rem; }
.port-info{ padding:18px 20px 22px; }
.port-info h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; text-transform:uppercase; margin-bottom:4px; }
.port-info p{ color:var(--muted); font-size:0.82rem; line-height:1.5; margin:0; }
.filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filter-tab{ padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--muted); font-size:0.82rem; cursor:pointer; font-family:inherit; transition:border-color .2s, color .2s, background .2s; }
.filter-tab:hover{ border-color:var(--cyan); color:var(--cyan); }
.filter-tab.active{ background:rgba(0,240,255,0.1); border-color:var(--cyan); color:var(--cyan); font-weight:600; }
@media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* Tools page */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-top:10px; }
.tool-card{ border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:border-color .2s, transform .2s; display:block; color:inherit; }
.tool-card:hover{ border-color:var(--cyan); transform:translateY(-4px); }
.tool-icon{ width:48px; height:48px; border-radius:14px; background:rgba(0,240,255,0.08); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--cyan); margin-bottom:16px; }
.tool-card h3{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; text-transform:uppercase; margin-bottom:8px; }
.tool-card p{ color:var(--muted); font-size:0.85rem; line-height:1.55; margin-bottom:14px; }
.tool-link{ font-size:0.82rem; font-weight:600; color:var(--magenta); display:inline-flex; align-items:center; gap:5px; }
.tool-link:hover{ gap:8px; color:var(--cyan); }
.tool-meta{ font-size:0.72rem; color:var(--muted); font-family:'JetBrains Mono',monospace; padding:4px 10px; border:1px dashed var(--line); border-radius:999px; display:inline-block; }
.coming-soon-tool{ opacity:0.65; cursor:default; }
.coming-soon-tool:hover{ border-color:var(--line) !important; transform:none !important; }

/* ── AUTH / DASHBOARD / GROUP STYLES ── */
.auth-nav-item { transition:color .2s !important; }
.auth-nav-item:hover { color:var(--cyan) !important; }
.auth-tab.active { border-bottom:2px solid var(--cyan); }
.dash-card:hover { border-color:var(--cyan) !important; transform:translateY(-4px) !important; }
.dash-group-card:hover { border-color:var(--violet) !important; }
.auth-container input:focus,
.char-create-panel input:focus,
.char-create-panel textarea:focus,
.group-create-panel input:focus,
.group-join-panel input:focus { border-color:var(--cyan) !important; }
#googleSignInBtn:hover { border-color:#4285F4 !important; color:#4285F4 !important; }

/* Logo on minimal pages (404, 500, thank-you) */
.logo-404{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:3rem;letter-spacing:0.08em;display:inline-block;margin-bottom:30px;background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 50%,var(--magenta) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(0,240,255,0.6)) drop-shadow(0 0 18px rgba(138,59,255,0.4));line-height:1;transition:filter .3s ease;text-decoration:none;}
.logo-404:hover{filter:drop-shadow(0 0 14px rgba(0,240,255,1)) drop-shadow(0 0 30px rgba(255,47,208,0.7));}

/* Response-time trust badge (contact page) */
.response-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); background:rgba(37,211,102,0.06); color:var(--muted); font-size:0.82rem;
}
.response-badge i{ color:#25d366; }