/* styles/base.css */
:root{
  --bg:#0a0a12;
  --bg-2:#0e0e18;
  --card:#10101a;
  --text:#e9edf6;
  --muted:#a8b2c4;
  --accent:#8a80ff; /* violet */
  --accent-2:#6ad8ff; /* light-blue */
  --accent-3:#c084fc; /* purple */
  --glow: 0 0 24px rgba(138,128,255,.35), 0 0 64px rgba(106,216,255,.18);
  --radius:18px;
  --space: clamp(14px, 2vw, 24px);
  --space-lg: clamp(24px, 4vw, 48px);
  --maxw: 1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  margin:0; background: radial-gradient(1200px 600px at 80% -20%, rgba(106,216,255,.12), transparent),
             radial-gradient(900px 500px at 10% 10%, rgba(200,132,252,.10), transparent),
             var(--bg);
  color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Poppins", sans-serif;
  line-height:1.6; letter-spacing:.2px;
}

a{color:var(--text); text-decoration:none; outline:none}
a:hover{color:white}
img{max-width:100%; display:block}
button{cursor:pointer; font:inherit}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.container{width: min(100% - 32px, var(--maxw)); margin-inline:auto}

header.site-header{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,10,18,.7), rgba(10,10,18,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.nav-center{display:flex; gap:18px; align-items:center; justify-content:center}
.nav-center a{padding:10px 14px; border-radius:12px; transition:all .2s}
.nav-center a:hover{background:rgba(255,255,255,.06); box-shadow:var(--glow)}

.cta{padding:10px 16px; border-radius:12px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b12; font-weight:700}

.mobile-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.15); width: 50px; height: 50px; border-radius:12px; padding:6px}
@media (max-width: 900px){
  .nav-center{display:none}
  .mobile-toggle{display:inline-flex}
}

.mobile-panel{
  position:fixed; inset:0; background:rgba(10,10,18,.9); display:none; z-index:1000;
}
.mobile-panel[aria-hidden="false"]{display:block}
.mobile-sheet{
  position:absolute; right:0; top:0; width:min(92vw,420px); height:100vh; background:var(--bg-2);
  border-left: 1px solid rgba(255,255,255,.08);
  padding:24px; overflow:auto;
}
.mobile-sheet a{display:block; padding:14px 10px; border-radius:12px}
.mobile-sheet a:hover{background:rgba(255,255,255,.06)}

.hero{
  position: relative;
  min-height: 100vh;      /* full screen height */
  padding: min(12vh, 140px) 0 min(10vh, 100px);
  overflow: hidden;       /* hide image overflow */
  display: flex;
  align-items: center;    /* vertically centers content */
  position: relative;
  min-height: 100vh;                 /* full height */
  padding: clamp(56px, 10vh, 140px) 0 clamp(40px, 8vh, 100px);
  overflow: hidden;                   /* hides sweep overflow */
  display: grid;
  align-items: center;                /* center content vertically */
}

.hero-dual{
    position: relative;
    min-height: 100vh;      /* full screen height */
    padding: min(12vh, 140px) 0 min(10vh, 100px);
    overflow: hidden;       /* hide image overflow */
    display: flex;
    align-items: center;    /* vertically centers content */
    position: relative;
    min-height: 100vh;                 /* full height */
    padding: clamp(56px, 10vh, 140px) 0 clamp(40px, 8vh, 100px);
    overflow: hidden;                   /* hides sweep overflow */
    display: grid;
    align-items: center;                /* center content vertically */
  }
  .hero-dual .hero-img{
    position: absolute; inset: 0;
    width: 100%; height: 100vh;
    object-fit: cover; display: block;
  }
  /* Show mobile by default, hide desktop */
  .hero-dual .hero-img--desktop{ display: none; }
  .hero-dual .hero-img--mobile { display: block; }

  /* At ≥900px, show desktop and hide mobile */
  @media (min-width: 900px){
    .hero-dual .hero-img--desktop{ display: block; }
    .hero-dual .hero-img--mobile { display: none; }
  }

  /* Keep your text above the image */
  .hero-dual .hero-content{
    position: relative; z-index: 1;
    padding: clamp(16px, 4vw, 48px);
  }

.hero .hero-bg{
  position: absolute; inset: 0;
  width:100%; height:fit-contents;
  object-fit: cover;                 /* fills width & height without distortion */
}

/* content sits above sweep/overlay */
.hero > * { position: relative; z-index: 2; }
.hero .container { width: 100%; height: 100vh; }

/* readable block for the heading/subtitle/buttons */
.hero-content{
  max-width: 80%;
  padding: clamp(16px, 30px, 24px);
  text-align: center;
  border-radius: 16px;
  object-fit: cover;
}

@media (max-width: 900px){
  .hero-content{
    max-width: 100%;
  }
}

.hero h1{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: .2px;
  line-height: 1.05;                  /* tighter lines */
}

.hero .subtitle{
  margin: 0 0 18px;
  max-width: 62ch;
  text-align: center;
  opacity: .92;
}

.hero .actions{
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* the small note under the block */
.hero-note{
  margin: 20px;
  max-width: 62ch;
  opacity: .85;
}

/* Optional dark overlay so white text pops */
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,18,.55), rgba(10,10,18,.35));
  z-index: 0;
}

/* Ensure hero content sits above the overlay */
.hero > *{ position: relative; z-index: 1; }

.hero h1{
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight:800; line-height:1.1;
  font-size: clamp(32px, 6vw, 64px);
  text-shadow: 0 2px 24px rgba(138,128,255,.4);
}
.hero .subtitle{color:var(--muted); font-size: clamp(16px, 2.2vw, 20px); margin-top:10px}
.hero .actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}

.media-placeholder{
  --w: 1920; --h:1080;
  display:grid; place-items:center; width:100%; aspect-ratio: var(--w) / var(--h);
  border:1px dashed rgba(255,255,255,.18); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, rgba(138,128,255,.12), rgba(138,128,255,.12) 8px, rgba(106,216,255,.08) 8px, rgba(106,216,255,.08) 16px);
  color:var(--muted);
}
.media-placeholder span{background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px; box-shadow:var(--glow)}

.section{padding: clamp(48px, 10vw, 100px) 0}
.section h2{font-family:"Orbitron", system-ui, sans-serif; font-size: clamp(24px, 4vw, 42px); margin:0 0 12px}
.section .lead{color:var(--muted); margin-bottom:24px}

.grid{
  display:grid; gap:var(--space);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 1200px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--glow);
  height: fit-content;
}
.card h3{margin:0 0 8px; font-family:"Rajdhani", system-ui, sans-serif; font-size: clamp(18px, 2.4vw, 22px)}
.card p{color:var(--muted)}

.badge{display:inline-block; padding:6px 10px; border-radius:10px; background:rgba(138,128,255,.18); border:1px solid rgba(138,128,255,.35); color:#dfe3ff; font-weight:600}

.pricing{display:grid; gap:var(--space); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.price-card{position:relative}
.price-card .most-popular{position:absolute; top:14px; right:14px}

@media (max-width: 950px){
  .pricing{ grid-template-columns: 1fr; }
}

.price{
  font-size: clamp(28px, 4vw, 40px);
  font-weight:900; letter-spacing:.4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

footer.site-footer{
  margin-top:80px; padding:40px 0; border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{display:grid; gap:var(--space); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:8px 0}
.footer-links a{position:relative}
.footer-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0%; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s}
.footer-links a:hover::after{width:100%}

/* Chatbot */
.chat-toggle{
  position: fixed; right: 18px; bottom: 18px; z-index: 2000;
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg, var(--card), #0a0a12);
  box-shadow: var(--glow);
}
.chatbot{
  position: fixed; right: 18px; bottom: 86px; z-index: 2000;
  width: min(420px, 28vw); height: min(70vh, 720px);
  background: var(--bg-2); border:1px solid rgba(255,255,255,.12); border-radius: 18px;
  display:none; overflow:hidden;
}
.chatbot.open{display:block}
@media (max-width: 640px){
  .chatbot{width:92vw; height: min(60vh, 560px)}
}
.chat-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:rgba(255,255,255,.03)}
.chat-body{padding:12px; height: calc(100% - 110px); overflow:auto; display:flex; flex-direction:column; gap:10px}
.chat-input{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03)}
.chat-input input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0c0c14; color:var(--text)}
.msg{max-width:80%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.msg.user{align-self:flex-end; background:rgba(138,128,255,.16)}
.msg.bot{align-self:flex-start; background:rgba(255,255,255,.04)}

/* Forms */
.form-grid{display:grid; gap:var(--space); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.field{display:flex; flex-direction:column; gap:8px}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select{
  background:#0c0c14; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:14px; min-height:52px; outline:none;
}
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 3px rgba(138,128,255,.35)}
textarea{min-height:120px; resize:vertical}
.helper{color:var(--muted); font-size:.9rem}
.error{color:#ff9b9b}
.success{color:#6affc8}

/* Animations & Utilities */
.js .reveal{opacity:0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease}
.js .reveal.in{opacity:1; transform:none}
.parallax{will-change: transform}
.hidden{display:none!important}
.progressbar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0; z-index:1000}
.reduce-motion-toggle{position:fixed; left:18px; bottom:18px; z-index:2000; padding:8px 10px; border-radius:10px; background:#0c0c14; border:1px solid rgba(255,255,255,.2)}


/* Global heading typography */
h1,h2,h3,h4,h5{font-family:"Orbitron","Rajdhani",system-ui,sans-serif}


/* Cyber headings tweak */
h1,h2{letter-spacing:.6px; text-transform:none;}
h3{letter-spacing:.3px}


/* Cyber headings tweak v2 */
h1,h2,h3,h4{font-family:"Orbitron","Rajdhani",system-ui,sans-serif;letter-spacing:.06em}


/* Cyber Headers v3 */
:root{ --font-headings: "Orbitron","Rajdhani","Inter",system-ui,sans-serif; --font-body: "Inter",system-ui,sans-serif; }
h1,h2,h3,h4{ font-family: var(--font-headings); letter-spacing:.06em }
body{ font-family: var(--font-body); }


/* Button unification v4 */
.btn.secondary, .btn.dark, .button.secondary {
  background: linear-gradient(90deg, var(--accent,#7C4DFF), var(--accent-2,#00E5FF)) !important;
  color:#0b0f14 !important;
  border-color: transparent !important;
}

/* Features list under pricing cards */
.pricing-card { --accent: #c77dff; }                 /* default accent */
.pricing-card.card--business { --accent: #ff4dff; }  /* magenta like your mock */
.pricing-card.card--premium  { --accent: #21d4fd; }  /* cyan like your mock */

.features{
  list-style:none; margin:14px 0 0; padding:0;
  border-top:1px solid rgba(255,255,255,.12);
}
.features li{
  display:flex; align-items:center; gap:10px;
  padding:10px 2px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.features li:last-child{ border-bottom:0; }

.features .icon{
  width:20px; height:20px; flex:0 0 20px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent), transparent 65%));
}
.features .icon path,
.features .icon circle,
.features .icon rect{ stroke: currentColor; }

/* Optional: tighten copy so it matches the neon cards */
.pricing-card .price + .features{ margin-top:12px; }


/* Cyber Headers v4 */
:root{ --font-headings: "Orbitron","Rajdhani","Inter",system-ui,sans-serif; --font-body: "Inter",system-ui,sans-serif; --accent:#7C4DFF; --accent-2:#00E5FF; --text:#E6EAF2; }
h1,h2,h3,h4{ font-family: var(--font-headings); letter-spacing:.06em }
body{ font-family: var(--font-body); color: var(--text); }

/* Image card that matches the pricing cards */
.pricing-card.pricing-art{
  padding:0; overflow:hidden; display:block;
  /* choose one: fixed height or aspect ratio */
  /* min-height: 420px; */
  aspect-ratio: 4 / 3;              /* keeps it balanced */
}
.pricing-card.pricing-art img{
  width:100%; height:100%; display:block; object-fit:cover;
}

.pricing-card2.pricing-art2{
  padding:0; overflow:hidden; display:none;
  /* choose one: fixed height or aspect ratio */
  /* min-height: 420px; */
  aspect-ratio: 4 / 3;              /* keeps it balanced */
}
.pricing-card2.pricing-art2 img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius: 20px;
}

/* Optional: only show on desktop where the gap exists */
@media (max-width: 1200px){
  .pricing-card.pricing-art{ display:none; }
  .pricing-card2.pricing-art2{ display:block; }
}


/* === Reduce Motion — extended site-wide (v33) === */
html.reduce-motion .marquee .track { animation: none !important; transform: none !important; }
html.reduce-motion .neon-sweep { animation: none !important; transform: none !important; }
html.reduce-motion .carousel-track { transition: none !important; }
html.reduce-motion * { scroll-behavior: auto !important; }
/* Optional: calm button and card hover effects */
html.reduce-motion .package-card,
html.reduce-motion .service-card,
html.reduce-motion .card,
html.reduce-motion .glow-hover,
html.reduce-motion [class*="hover"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}