/* -------------------------------------------------------
   AuroraCX — Professional theme with contextual images
   ---------------------------------------------------- */

/* Design tokens (light defaults) */
:root{
  --brand: #3e6cff;
  --brand-2: #00c6b3;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #0e1220;
  --muted: #5c6478;
  --border: #e6e8f0;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.06);
  --shadow: 0 12px 40px rgba(10, 20, 60, .10);
  --shadow-strong: 0 24px 80px rgba(10, 20, 60, .16);

  --container: 1200px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Dark palette */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --panel: #0f1631;
    --text: #e8ebf6;
    --muted: #9aa6be;
    --border: #1e2a4a;
    --shadow-sm: 0 6px 20px rgba(0,0,0,.25);
    --shadow: 0 12px 40px rgba(0,0,0,.35);
    --shadow-strong: 0 24px 80px rgba(0,0,0,.45);
  }
}
/* Forced theme */
:root[data-theme="light"]{
  --bg: #f7f8fb; --panel: #fff; --text:#0e1220; --muted:#5c6478; --border:#e6e8f0;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.06); --shadow: 0 12px 40px rgba(10, 20, 60, .10); --shadow-strong: 0 24px 80px rgba(10, 20, 60, .16);
}
:root[data-theme="dark"]{
  --bg:#0b1020; --panel:#0f1631; --text:#e8ebf6; --muted:#9aa6be; --border:#1e2a4a;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.25); --shadow:0 12px 40px rgba(0,0,0,.35); --shadow-strong:0 24px 80px rgba(0,0,0,.45);
}

/* Global */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.6;
  background:
    radial-gradient(1000px 600px at 10% -10%, color-mix(in oklab, var(--brand), transparent 85%), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, color-mix(in oklab, var(--brand-2), transparent 88%), transparent 60%),
    var(--bg);
}
body.theming{transition: background-color .26s ease, color .26s ease}
.no-scroll{overflow:hidden}

/* Ornament layer */
.bg-ornament{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(800px 500px at 80% -10%, color-mix(in oklab, var(--brand), transparent 92%), transparent 65%),
    radial-gradient(700px 400px at -5% 15%, color-mix(in oklab, var(--brand-2), transparent 92%), transparent 65%);
  filter:saturate(1.1);
}

img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing:-.02em}
h2{font-size:clamp(1.6rem, 2.4vw, 2.2rem)}
h3{font-size:1.25rem}
p{margin:.5rem 0 1rem}
.lead{font-size:clamp(1.05rem, 1.2vw, 1.18rem); color:color-mix(in oklab, var(--text), #fff 20%)}
.eyebrow{text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.8rem; color:var(--muted); margin-bottom:.3rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.accent{
  background:linear-gradient(90deg,var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.container{max-width:var(--container); margin-inline:auto; padding:0 24px}

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:10px}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* -----------------------------------
   HEADER (beautified navigation)
----------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 10%), color-mix(in oklab, var(--bg), transparent 60%));
  border-bottom:1px solid color-mix(in oklab, var(--border), #000 10%);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header[data-scrolled="true"]{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 14%), color-mix(in oklab, var(--bg), transparent 55%));
}
.nav-wrap{display:flex; align-items:center; gap:14px; justify-content:space-between; min-height:72px; position:relative}
.brand, .brand-footer{display:flex; align-items:center; gap:.6rem; color:var(--text); font-weight:800; letter-spacing:.01em}
.brand svg{color:var(--brand)}

.primary-nav{display:block}
.nav{list-style:none; display:flex; gap:6px; margin:0; padding:0}
.nav li{position:relative}
.nav-link{
  display:inline-block; padding:.6rem .8rem; border-radius:12px; font-weight:700; letter-spacing:.01em;
  color:var(--text); opacity:.9; transition: opacity .15s ease, background-color .15s ease;
}
.nav-link:hover{opacity:1; text-decoration:none; background:color-mix(in oklab, var(--panel), var(--text) 6%)}
.nav-link.is-active{opacity:1}

.header-actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-block; border:1px solid var(--brand); color:var(--text);
  padding:.64rem 1rem; border-radius:999px; font-weight:800; letter-spacing:.01em;
  box-shadow:var(--shadow-sm); transform:translateZ(0);
}
.btn:hover{box-shadow:var(--shadow); text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:.86rem 1.15rem}
.btn-primary{background:linear-gradient(90deg,var(--brand), var(--brand-2)); border-color:transparent; color:#fff}
.btn-outline{background:transparent}
.btn-ghost{border-color:transparent; background:color-mix(in oklab, var(--panel), var(--text) 6%); color:var(--text)}
.btn-quiet{border-color:transparent; background:color-mix(in oklab, var(--panel), var(--text) 8%); color:var(--text)}
.btn-block{display:block; width:100%}

/* Animated underline (desktop) */
.nav-underline{
  position:absolute; height:2px; width:0; bottom:8px; left:0; border-radius:2px;
  background:linear-gradient(90deg,var(--brand), var(--brand-2));
  transition: transform .22s ease, width .22s ease, opacity .22s ease;
  opacity:0; pointer-events:none;
}

/* Theme toggle pill */
.toggle{
  display:inline-grid; grid-auto-flow:column; place-items:center; gap:6px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:999px; padding:.45rem .7rem; cursor:pointer; box-shadow:var(--shadow-sm);
}
.toggle .icon{font-size:1rem; line-height:1}
.toggle .mode-label{font-size:.8rem; color:var(--muted)}
:root[data-theme="dark"] .toggle{outline:1px solid color-mix(in oklab, var(--brand), #000 30%)}

/* Hamburger */
.hamburger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow-sm); cursor:pointer}
.hamburger span{display:block; height:2px; margin:8px 9px; background:var(--text); border-radius:2px}

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:72px 0 auto 0; background:color-mix(in oklab, var(--panel), var(--text) 10%);
  border-top:1px solid var(--border); box-shadow:0 18px 60px rgba(0,0,0,.25); z-index:99; padding:12px 16px;
}
.mobile-drawer nav ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.mobile-drawer a{display:block; padding:.9rem 1rem; border-radius:12px; background:color-mix(in oklab, var(--panel), var(--text) 6%); color:var(--text); font-weight:800}

/* -----------------------------------
   MEDIA CARDS / STRIPS
----------------------------------- */
.media-card{
  border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), #000 8%));
}
.media-card img{display:block; width:100%; height:auto}
.hero-media img{aspect-ratio: 4 / 3; object-fit: cover}
.contact-media img{aspect-ratio: 3 / 2; object-fit: cover}

.services-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px
}
.strip-item{border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.strip-item img{width:100%; height:100%; object-fit:cover; aspect-ratio: 16 / 10}

/* Cards with image */
.card-media{
  border-radius:14px; overflow:hidden; border:1px solid var(--border); margin-bottom:.65rem; box-shadow:var(--shadow-sm)
}
.card-media img{width:100%; height:auto; aspect-ratio: 4 / 3; object-fit: cover}

/* Case thumbnails */
.case-media{
  border-radius:14px; overflow:hidden; border:1px solid var(--border); margin-bottom:.55rem; box-shadow:var(--shadow-sm)
}
.case-media img{width:100%; height:auto; aspect-ratio: 16 / 10; object-fit: cover}

/* Avatars */
.avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--panel); box-shadow:var(--shadow-sm); margin-bottom:.6rem
}
.avatar img{width:100%; height:100%; object-fit:cover}

/* -----------------------------------
   HERO / CONTENT
----------------------------------- */
.hero{padding:96px 0 72px}
.hero-grid{display:grid; gap:40px; grid-template-columns: 1.2fr .8fr; align-items:center}
.hero-ctas{display:flex; gap:12px; margin:1.1rem 0}
.hero-metrics{list-style:none; margin:1.2rem 0 0; padding:0; display:flex; gap:16px; flex-wrap:wrap}
.metric{
  background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), #000 8%));
  border:1px solid var(--border); border-radius:14px; padding:.7rem .9rem; min-width:170px; box-shadow:var(--shadow-sm)
}
.metric span{display:block; font-weight:900; font-size:1.4rem; line-height:1.1}
.metric small{color:var(--muted)}

/* Trust */
.trust{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:color-mix(in oklab, var(--panel), transparent 92%)}
.trust-grid{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.logo-row{list-style:none; padding:0; margin:0; display:flex; gap:20px; opacity:.75; font-weight:700; letter-spacing:.02em}

/* Sections & Cards */
section{padding:72px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px}
.section-lead{margin-top:.3rem; color:color-mix(in oklab, var(--text), #9cf 25%)}
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:32px}
.cards{display:grid; grid-template-columns: repeat(12, 1fr); gap:20px}
.cards > .card{grid-column: span 4}
.cards-3 > .card{grid-column: span 4}
.card{
  background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), #000 8%));
  border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-strong); border-color:color-mix(in oklab, var(--border), var(--brand) 30%)}
.card h3{margin-bottom:.35rem}
.card .mini{list-style:none; padding:0; margin:.5rem 0 0}
.card .mini li{margin:.22rem 0; color:color-mix(in oklab, var(--text), #88a 35%)}

/* Service highlights */
.card.pro{position:relative}
.card-top{display:flex; justify-content:flex-end; margin-bottom:.2rem}
.pill{font-size:.72rem; padding:.2rem .5rem; border-radius:999px; color:#fff; background:linear-gradient(90deg,var(--brand), var(--brand-2)); box-shadow:var(--shadow-sm)}

/* About stats & lists */
.about-card{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.stat{background:color-mix(in oklab, var(--panel), var(--text) 5%); border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center}
.stat span{font-size:1.7rem; font-weight:900; display:block}
.bullets{list-style:none; padding:0; margin:0}
.bullets li{padding-left:28px; position:relative; margin:.5rem 0}
.bullets li::before{content:""; position:absolute; left:6px; top:.5rem; width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg,var(--brand), var(--brand-2))}

/* Benefits */
.benefits .checklist{list-style:none; padding:0; margin:0}
.checklist li{margin:.7rem 0; padding-left:34px; position:relative}
.checklist li::before{
  content:""; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(90deg,var(--brand), var(--brand-2));
  position:absolute; left:0; top:.2rem;
}
.cta-panel{
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel), #000 8%), color-mix(in oklab, var(--panel), #000 14%));
  border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}

/* Process */
.steps{list-style:none; margin:0; padding:0}
.steps li{background:color-mix(in oklab, var(--panel), var(--text) 6%); border:1px solid var(--border); border-radius:16px; padding:16px 16px 16px 60px; margin:.6rem 0; position:relative}
.steps li span{
  position:absolute; left:16px; top:12px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(90deg,var(--brand), var(--brand-2));
}

/* Chips */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  padding:.5rem .8rem; border-radius:999px; border:1px solid var(--border);
  background:color-mix(in oklab, var(--panel), var(--text) 6%); box-shadow:var(--shadow-sm)
}

/* Pricing */
.pricing-grid{grid-template-columns: repeat(12, 1fr)}
.pricing-grid > .card{grid-column: span 4}
.price .price-tag{font-size:1.55rem; font-weight:900; margin:.55rem 0}
.price .price-tag span{font-size:.9rem; color:var(--muted); font-weight:700; letter-spacing:.02em; margin-right:.3rem}
.price .price-tag small{font-size:.95rem; color:var(--muted)}
.price.featured{outline:2px solid var(--brand); background:linear-gradient(180deg, color-mix(in oklab, var(--panel), #000 10%), color-mix(in oklab, var(--panel), #000 18%)); position:relative}
.price.featured .ribbon{
  position:absolute; top:-12px; right:16px; font-size:.75rem; padding:.28rem .6rem; border-radius:999px;
  background:linear-gradient(90deg,var(--brand), var(--brand-2)); color:#fff; box-shadow:var(--shadow-sm)
}

/* Testimonials */
.testimonials .quotes{display:grid; grid-template-columns: 1fr 1fr; gap:22px}
.quote{margin:0; background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), #000 8%)); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.quote blockquote{margin:0 0 .6rem; font-style:italic}

/* FAQ */
.faq details{background:color-mix(in oklab, var(--panel), var(--text) 6%); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:.6rem 0; box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer; font-weight:800; letter-spacing:.01em}

/* Contact */
.form .form-row{display:flex; flex-direction:column; gap:.35rem; margin:.6rem 0}
.form input, .form textarea{
  width:100%; padding:.9rem 1rem; border-radius:14px; border:1px solid var(--border); background:color-mix(in oklab, var(--panel), #000 6%); color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.form input::placeholder, .form textarea::placeholder{color:var(--muted)}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:.6rem}
.form-note{font-size:.92rem; color:var(--muted)}
.form-status{
  margin-top:12px; padding:.75rem 1rem; border-radius:12px; display:block; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--border); background:color-mix(in oklab, var(--panel), var(--text) 6%); box-shadow:var(--shadow-sm)
}
.form-status[data-state="success"]{border-color: color-mix(in oklab, #2ecc71, var(--border) 40%); background: color-mix(in oklab, #2ecc71, var(--panel) 85%)}
.form-status[data-state="error"]{border-color: color-mix(in oklab, #ff5a66, var(--border) 40%); background: color-mix(in oklab, #ff5a66, var(--panel) 88%)}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:color-mix(in oklab, var(--panel), transparent 92%); padding:32px 0}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:24px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.brand-footer svg{color:var(--brand)}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Responsive */
@media (max-width: 1100px){
  .nav{gap:2px}
  .cards > .card{grid-column: span 6}
  .pricing-grid > .card{grid-column: span 6}
}
@media (max-width: 900px){
  .primary-nav{display:none}
  .hamburger{display:inline-block}
  .hero-grid{grid-template-columns: 1fr}
  .two-col{grid-template-columns: 1fr}
  .testimonials .quotes{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .services-strip{grid-template-columns:1fr}
  .cards > .card,
  .pricing-grid > .card{grid-column: 1 / -1}
  .footer-grid{grid-template-columns: 1fr}
  .trust-grid{flex-direction:column; align-items:flex-start}
}