:root{
  --bg: #7b94e6;
  --panel: #293e6e;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #ffffff00;
  --card: #1a253d00;
  --border: #00000015;
  --shadow: 0 10px 30px rgba(255, 255, 255, 0.137);
  --glow-rgb: 140 180 255; /* Aevaron blue */
}

/* ===== Animated site background (glass-friendly) ===== */

/* Keep your existing body background as the base */
body{
  /* you already have a nice radial gradient; keep it */
  position: relative;                 /* create a containing context */
  overflow-x: hidden;                 /* avoid horizontal scroll during transforms */
}

/* Moving gradient blobs */
body::before,
body::after{
  content:"";
  position: fixed;                    /* sits behind everything, even while scrolling */
  inset: -15%;                        /* overscan so edges never show when moving */
  z-index: -1;                        /* behind the page */
  pointer-events: none;
  filter: blur(42px);                 /* dreamy, soft */
  opacity: .35;                       /* keep it subtle */
  will-change: transform;
}

/* Layer 1 — cool blues/teals */
body::before{
  background:
    radial-gradient(45% 40% at 20% 30%, rgb(59, 131, 246), transparent 60%),
    radial-gradient(38% 32% at 78% 18%, rgb(56, 191, 248), transparent 62%),
    radial-gradient(40% 48% at 60% 82%, rgb(34, 197, 94),  transparent 70%);
  animation: bgFloatA 38s ease-in-out infinite;
}

/* Layer 2 — indigo/magenta wash + vignette */
body::after{
  background:
    radial-gradient(50% 46% at 30% 78%, rgb(99, 101, 241), transparent 66%),
    radial-gradient(36% 34% at 88% 62%, rgb(236, 72, 154), transparent 66%),
    radial-gradient(120% 70% at 50% 110%, rgb(238, 216, 216), transparent 70%); /* soft vignette */
  animation: bgFloatB 6s ease-in-out infinite reverse;
}

/* Gentle drifting motion (transform is performant) */
@keyframes bgFloatA{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d( 2%,  1%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}
@keyframes bgFloatB{
  0%   { transform: translate3d( 2%,  1%, 0) scale(1.02) rotate(0deg); }
  50%  { transform: translate3d(-2%, -1%, 0) scale(1.07) rotate(1deg); }
  100% { transform: translate3d( 2%,  1%, 0) scale(1.02) rotate(0deg); }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  body::before,
  body::after{
    animation: none;
    opacity: .28; /* still visible, but static */
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(10000px 800px at 40% -10%, #546685 0%, #031b2b 60%) fixed;
  color: var(--text);
  line-height: 1.5;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}
.nav a{color:var(--text);text-decoration:none;margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}
.h1{font-family: "DM Serif Display", Georgia, serif; font-weight:600;letter-spacing:-.02em;font-size: clamp(36px, 6vw, 64px);line-height:1.04;margin:0 0 14px}
.sub{font-size: clamp(16px, 2.6vw, 20px);color:var(--muted);max-width:800px;margin:0 auto 28px}
.cta{display:inline-block;background:var(--accent);color:white;padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:var(--shadow)}
.cta.secondary{background:transparent;border:1px solid var(--border);color:var(--text);margin-left:10px}
.section{padding:54px 0}
.section h2{font-family: "DM Serif Display", Georgia, serif;font-size: clamp(28px, 4vw, 40px);margin:0 0 22px;text-align:center}
.grid{display:grid;gap:18px}
.grid.demo{grid-template-columns: repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
/* Make all price cards equal height */
.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch; /* ensures equal height */
}

.price-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* space out top vs button */
  background: #0e152b00;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Ensure text sections align */
.price-card h3 {
  min-height: 48px; /* lock all titles to the same space */
  display: flex;
  align-items: flex-end; /* keep text anchored neatly */
}


.price {
  font-size: 28px;
  font-weight: 800;
  margin: 2px 0 4px; /* tighter spacing */
}

.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:#1d4ed8;color:#fff;margin-left:8px}
.list{margin:0 0 10px;padding:0 0 0 18px;color:var(--muted)}
.timeline{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px}
.timeline .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(59, 131, 246, 0.623)}
.timeline .line{flex:1;height:2px;background:linear-gradient(90deg,transparent, #0e72ff 20%, #80b5ff 80%, transparent)}
.testimonial{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:22px;max-width:900px;margin:0 auto}
.form{max-width:760px;margin:0 auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input, select, textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#0c1226;color:var(--text)}
textarea{min-height:120px;resize:vertical}
.btn{background:var(--accent);color:#fff;border:none;padding:14px 18px;border-radius:10px;font-weight:700;cursor:pointer}
.footer{padding:40px 0;color:var(--muted);font-size:14px}

/* === Demo cards: premium pop === */
.demo-card{
  position: relative;
  display:block;
  text-decoration:none;
  color:inherit;

  background: rgba(17, 24, 39, 0);                 /* glassy panel */
  border-radius: 20px;
  padding: 16px;
  border: 1px solid #00000010;                          /* base border */
  box-shadow:
    0 6px 20px rgba(0,0,0,.35),                       /* lift */
    inset 0 1px 0 rgba(255, 255, 255, 0);              /* subtle top edge */
  backdrop-filter: saturate(120%) blur(6px);          /* glass effect */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

/* gradient “neon” border (only the border, not filled) */
.demo-card::before{
  content:"";
  position:absolute; inset:0; padding:1px;            /* border thickness */
  border-radius: inherit;
  background: linear-gradient(140deg,
              rgba(59,130,246,.35),
              rgba(236,72,153,.25) 40%,
              rgba(34,197,94,.25) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;                         /* show only the ring */
          mask-composite: exclude;
  pointer-events:none;
  opacity:.6;
  transition: opacity .25s ease;
}

/* soft spotlight behind the laptop */
.demo-card::after{
  content:"";
  position:absolute;
  left:50%; top:34%;
  width:70%; height:50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(59,130,246,.18), transparent 60%);
  filter: blur(18px);
  opacity:.65;
  pointer-events:none;
}

/* hover: lift, glow a bit more */
.demo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(155, 144, 253, 0.267);
}
.demo-card:hover::before{ opacity:1; }
.demo-card:hover .laptop-shell{ filter: drop-shadow(0 10px 18px rgba(143, 188, 255, 0.35)); }

/* text contrast tweaks */
.demo-meta h3{ margin:10px 0 4px; color:#f4f7fb; }
.demo-meta p{ margin:0; color:#a7b4c7; font-size:14px }


/* ============ LAPTOP MOCKUP (fit + clip) ============ */
/* Use the real PNG proportion — this prevents the frame itself from stretching past the container */
.laptop-shell{
  --screen-top:    19.8%;
  --screen-right:  22.8%;
  --screen-bottom: 27.6%;
  --screen-left:   22.8%;
  --preview-w: 1600px;
  --preview-h: 1000px;
  --preview-scale: 0.60;   /* grid/card */

  position: relative;
  width: 100%;
  aspect-ratio: 1512 / 988;  /* <— IMPORTANT: fit to the PNG aspect, not 16/10 */

  /* LOCAL CLIP (fix bleed from frame/iframe inside the shell) */
  overflow: hidden;
  contain: paint;
}

/* Frame ABOVE screen — hides edges cleanly */
.laptop-shell .laptop-img{
  position: absolute; inset: 0;
  filter: brightness(2.0) contrast(1.1);
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Screen cutout clamped on ALL four sides */
.laptop-shell .screen{
  position: absolute;
  inset: var(--screen-top) var(--screen-right) var(--screen-bottom) var(--screen-left);
  border-radius: 6px;
  overflow: hidden;
  background: #fffcfc00;
  z-index: 1;
}

/* Render large and scale down (no internal scrollbars) */
.laptop-shell .screen iframe{
  width: var(--preview-w);
  height: var(--preview-h);
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  border: 0;
  display: block;
  overflow: hidden;
  scrollbar-width: none;
  background: #ffffff00
}
.laptop-shell .screen iframe::-webkit-scrollbar{ display:none }

/* =================== HERO =================== */
/* Clip hero region so side laptops never bleed */
.hero{
  position: relative;
  overflow: hidden;
  clip-path: inset(0);   /* hard clip for cross-browser */
  contain: paint;
  isolation: isolate;
}
.hero-laptops{
  position: relative;
  max-width: 1200px;
  margin: 14px auto 0;
  height: clamp(220px, 34vw, 380px);

  overflow: hidden;      /* clip contents */
  clip-path: inset(0);   /* hard clip */
  contain: paint;
  isolation: isolate;
}

/* Remove filter-based shadow (it can paint outside),
   and use a clipped pseudo-element for the same visual */
.hero-laptop{
  position:absolute; bottom:0;
  contain: paint;
}
.hero-laptop::after{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  bottom: -2%;
  top: 70%;
  border-radius: 24px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 0;
}

.hero-laptop.center{
  left:50%; transform:translateX(-50%);
  width: clamp(360px, 42vw, 640px);
  z-index:3;
}
.hero-laptop.left{
  left:0; width: clamp(280px, 32vw, 520px);
  transform: translateY(6%) rotate(-2deg);
  z-index:2; opacity:.98;
}
.hero-laptop.right{
  right:0; width: clamp(280px, 32vw, 520px);
  transform: translateY(6%) rotate(2deg);
  z-index:2; opacity:.98;
}

/* base stand under center laptop (the grey pill) */
.hero-stand{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width: clamp(220px, 32vw, 520px); height:12px;
  border-radius:10px;
  background: linear-gradient(180deg, #9ca3af, #6b7280);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}

/* small screens: stack a bit tighter */
@media (max-width: 640px){
  .hero-laptop.left{ transform: translateY(10%) rotate(-2deg) scale(.92); }
  .hero-laptop.right{ transform: translateY(10%) rotate(2deg) scale(.92); }
  .hero-stand{ bottom:-6px; }
}

/* === Logo Styling === */
.logo {
  height: 60px;        /* make the logo bigger */
  width: auto;         /* keeps proportions */
  display: block;
  filter: brightness(0) invert(1); /* makes it white */
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.08); /* subtle hover effect */
}
/* ====== STAGE 1: INTRO OVERLAY ====== */
#intro{
  position: fixed; inset:0; background:#010d14; display:grid; place-items:center;
  z-index: 9999; opacity:1; visibility:visible; transition: opacity .5s ease, visibility .5s ease;
}
#intro.hide{ opacity:0; visibility:hidden; }
.intro-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(28px, 6vw, 72px);
  text-transform: uppercase;
  color:#e5e7eb;
  letter-spacing:.02em;

  /* Glow */
  text-shadow:
    0 0 8px rgba(170, 203, 255, 0.7),   /* bright glow */
    0 0 16px rgba(169, 202, 255, 0.6),
    0 0 32px rgba(155, 193, 255, 0.5);
  
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(154, 193, 255, 0.6),
      0 0 14px rgba(169, 202, 255, 0.5),
      0 0 28px rgba(166, 200, 255, 0.4);
  }
  50% {
    text-shadow:
      0 0 12px rgba(59,130,246,.9),
      0 0 24px rgba(59,130,246,.8),
      0 0 48px rgba(59,130,246,.7);
  }
}

#intro-typed{ white-space:nowrap; display:inline-block; }
#intro-caret{ display:inline-block; width:.12em; height:1.05em; margin-left:.1em; background:#e5e7eb; transform:translateY(.12em); animation: introBlink 1s steps(2,start) infinite; }
@keyframes introBlink { 50%{opacity:0} }

/* ====== STAGE 2: DIAMOND REVEAL ====== */
#diamond{
  position: fixed; inset:0; background:#000; display:grid; place-items:center;
  z-index: 9998;
}
.diamond-wrap{ position:relative; }
.diamond{
  width:min(38vw, 280px); height:auto; opacity:0; transform:scale(.92);
  filter: drop-shadow(0 10px 28px rgba(59,130,246,.35));
  animation: diamondIn .9s ease forwards .15s;
}
.diamond-pulse{
  position:absolute; inset:-20% -20% -20% -20%; pointer-events:none;
  background: radial-gradient(circle at center, rgba(59,130,246,.28), transparent 60%);
  filter: blur(22px); opacity:0; animation: pulse .9s ease forwards .5s;
}
@keyframes diamondIn { to { opacity:1; transform:scale(1);} }
@keyframes pulse { 30%{opacity:1} 100%{opacity:0} }

/* ====== STAGE 3: HERO TYPER + LAPTOPS ====== */
.hero { position: relative; overflow: hidden; }
.hero-wrap { text-align:center; }
.hero-heading{ position:relative; }
#hero-caret{
  display:inline-block; width:.12em; height:1.05em; margin-left:.12em; background:#e5e7eb;
  transform: translateY(.12em); animation: blink 1s steps(2,start) infinite;
}
@keyframes blink { 50%{opacity:0} }

/* Existing hero laptops layout (keep your tuned laptop fit rules elsewhere) */
.hero-laptops{ position:relative; max-width:1200px; margin:14px auto 0; height:clamp(260px,36vw,420px); }
.hero-laptop{ position:absolute; bottom:0; transition: transform .35s ease, filter .35s ease; }
.hero-laptop.center{ left:50%; transform:translateX(-50%); width:clamp(360px,42vw,640px); z-index:3; }
.hero-laptop.left{ left:0; width:clamp(280px,32vw,520px); transform: translateY(6%) rotate(-2deg); z-index:2; }
.hero-laptop.right{ right:0; width:clamp(280px,32vw,520px); transform: translateY(6%) rotate(2deg); z-index:2; }

/* Screen pop so laptops aren’t too dark */
.laptop-shell .screen{ filter: brightness(1.12) contrast(1.04); }


/* Fail-safe: auto hide intro after ~4.5s even if JS fails */
@keyframes introFailSafe { 0%{opacity:1} 80%{opacity:1} 100%{opacity:0; visibility:hidden} }
#intro { animation: introFailSafe 4.5s 0.2s forwards; }
/* Fail-safe: auto hide intro after ~4.5s even if JS fails */
@keyframes introFailSafe { 0%{opacity:1} 80%{opacity:1} 100%{opacity:0; visibility:hidden} }
#intro { animation: introFailSafe 4.5s 0.2s forwards; }

/* Make [hidden] actually remove from flow (Safari fix) */
#diamond[hidden] { display: none !important; }

/* Fail-safe: auto hide diamond even if JS or image fails */
@keyframes diamondFailSafe { 0%{opacity:1} 85%{opacity:1} 100%{opacity:0; visibility:hidden} }
#diamond { animation: diamondFailSafe 2.2s 0s forwards; }
/* smooth staggered reveal for hero headline */
.fade-line {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.fade-line.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* accessibility: no animation for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .fade-line { transition: none; opacity: 1; transform: none; filter: none; }
}
/* ===== Aevaron Neo-Retro Theme (add-only) ===== */
.aevaron {
  /* subtle radial vignette like the intro */
  background:
    radial-gradient(1600px 900px at 50% -20%, #2c3f66 0%, #0b1a2b 55%, #071220 100%) fixed;
}

/* shared glow color */
:root {
  --glow: rgba(90, 170, 255, .85);
  --glow-soft: rgba(90, 170, 255, .35);
}

/* Headline glow to match intro */
.aevaron .h1,
.aevaron .section h2 {
  text-shadow:
    0 0 10px var(--glow-soft),
    0 0 22px rgba(90,170,255,.28),
    0 2px 0 rgba(0,0,0,.35);
}

/* Hero subtext: a touch brighter for readability */
.aevaron .sub {
  color: #cfe3ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* CTA button: glass + glow ring */
.aevaron .cta {
  background: linear-gradient(180deg, rgba(80,150,255,.95), rgba(60,130,230,.95));
  box-shadow:
    0 8px 28px rgba(80,150,255,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  border: 0;
}
.aevaron .cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 36px rgba(80,150,255,.48),
    inset 0 1px 0 rgba(255,255,255,.4);
}

/* Glassy section panels / cards slightly brighter */
.aevaron .card,
.aevaron .price-card,
.aevaron .testimonial {
  background: rgba(16, 24, 39, 0);
  border: 1px solid rgba(120, 170, 255, 0.432);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.384),
    inset 0 1px 0 rgba(255, 255, 255, 0);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Pricing headings + prices pop */
.aevaron .price-card h3,
.aevaron .price-card .price {
  color: #eaf3ff;
  text-shadow: 0 0 10px rgba(90,170,255,.18);
}

/* “Our Work” demo cards glow ring on hover */
.aevaron .demo-card::before {
  background: linear-gradient(140deg,
              rgba(90,170,255,.55),
              rgba(120,200,255,.35) 45%,
              rgba(140,220,255,.28) 80%);
  opacity: .7;
}
.aevaron .demo-card:hover {
  box-shadow: 0 18px 40px rgba(90,170,255,.28);
}

/* Laptops: slightly brighter screens + soft underglow */
.aevaron .laptop-shell .screen { filter: brightness(1.18) contrast(1.05); }
.aevaron .hero-laptop::after {
  box-shadow: 0 16px 36px rgba(90,170,255,.22);
}

/* Divider/stand tint to match */
.aevaron .hero-stand {
  background: linear-gradient(180deg, #a6c8ff, #6b92d6);
  box-shadow: 0 8px 20px rgba(90,170,255,.25);
}

/* Section titles spacing with glow looks nicer slightly higher */
.aevaron .section { padding-top: 60px; }
/* ---------- HERO TEXT: crisper glow + spacing ---------- */
.hero .h1 { line-height: 1.12; letter-spacing: -0.01em; }
.hero .h1 .fade-line {
  text-shadow:
    0 2px 18px rgba(0,0,0,.25),
    0 0 18px rgba(120,160,255,.18);
}

/* proof line under the hero CTA */
.hero-proof {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(229,231,235,.85);
  text-shadow: 0 1px 8px rgba(90,130,220,.18);
}

/* Full-bleed bar */
.header{
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: linear-gradient(180deg, rgba(14, 22, 38, 0), rgba(14, 22, 38, 0)); /* was transparent */
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Center the content and control thickness */
.header-inner{
  max-width: 1100px;                 /* match your site container */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 1px;                /* thickness */
  min-height: 1px;                  /* thickness */
}

/* Optional: sticky state feedback (uses your existing .is-sticky rules) */
.header.is-sticky{
  background: rgba(15, 23, 42, 0);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(158, 154, 154, 0.295);
}
/* ===== Buttons: glass + border + glow-on-hover ===== */
/* Transparent glass buttons with glow */
.cta,
.btn,
input[type="submit"] {
  background: transparent;                /* fully transparent */
  color: var(--text);                     /* text still visible */
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;                       /* no shadow by default */
  backdrop-filter: blur(6px);             /* glass effect */
}

/* Hover: glow + slight lift */
.cta:hover,
.btn:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(253, 253, 253, 0.322);
  border-color: rgba(255, 255, 255, 0.26);      /* brighter glow border */
  color: #fff;                            /* optional: text goes white */
}


/* Active press */
.cta:active,
.btn:active,
input[type="submit"]:active{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(var(--glow-rgb) / .35);
}

/* Keyboard focus ring (accessible) */
.cta:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible{
  outline: 2px solid rgb(var(--glow-rgb) / .9);
  outline-offset: 2px;
}

@media (max-width: 640px){
  .header-inner{ padding:10px 14px; min-height:56px; }
}


/* ---------- CTA REPEAT ROW (used after sections) ---------- */
.cta-row{ text-align:center; margin: 26px 0 8px; }
.cta-row .cta{ box-shadow: 0 10px 26px rgba(120,170,255,.22); }

/* ---------- MOBILE TWEAKS ---------- */
@media (max-width: 480px){
  .hero .h1 { letter-spacing: 0; line-height: 1.1; }
  .hero-laptop.left, .hero-laptop.right { display: none; }
}
@import url("mobile.css") only screen and (max-width: 768px);