/* ---------- THEME ---------- */
:root{
  --bg:#ffffff; --bg-alt:#f5f7fb; --text:#0f172a; --muted:#475569; --line:#e2e8f0;
  --brand:#0ea5b5; --brand-ink:#0a4a53; --accent:#2dd4bf; --focus:#6366f1; --btn-ghost:rgba(14,165,181,0.12);
}
body.theme-dark{
  --bg:#0b1220; --bg-alt:#0f1830; --text:#e6eef5; --muted:#a6b3c4; --line:#1f2a44;
  --brand:#22d3ee; --brand-ink:#042b32; --accent:#34d399; --btn-ghost:rgba(34,211,238,0.1);
}

/* ---------- GLOBAL ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text)}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1120px,92%); margin-inline:auto}
.nowrap{white-space:nowrap}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ---------- HEADER ---------- */
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg), transparent 10%); border-bottom:1px solid var(--line);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.5rem; color:inherit}
.logo{width:40px; height:auto}
.logo.small{width:28px}
.brand-text{font-weight:700}

.nav-toggle{display:none; background:none; border:0; padding:.25rem; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:1px}
.nav-menu{display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0}
.nav-menu li{list-style:none}
.nav-menu a{padding:.5rem .75rem; border-radius:999px}
.nav-menu .btn{padding:.6rem 1rem}

.theme-switcher button{background:var(--btn-ghost); border:1px solid var(--line); border-radius:999px; padding:.5rem .75rem; color:var(--text)}

@media (max-width:880px){
  .nav-toggle{display:inline-block}
  .nav-menu{position:absolute; right:1rem; top:64px; background:var(--bg); border:1px solid var(--line);
    border-radius:12px; padding:.5rem; display:none; flex-direction:column; align-items:stretch; min-width:220px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .nav-menu.show{display:flex}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:12px; border:1px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease}
.btn-primary{background:var(--brand); color:#00262a; padding:.8rem 1.2rem}
.btn-outline{border-color:var(--brand); color:var(--brand); padding:.8rem 1.2rem; background:transparent}
.btn-ghost{background:var(--btn-ghost); color:var(--brand); padding:.8rem 1.2rem}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(2,10,25,.15); }

/* ---------- HERO ---------- */
.hero{position:relative; min-height:60vh; display:grid; place-items:center; overflow:clip}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}

/* ---------- INTRO ---------- */
.intro .hero-content{ text-align:center; padding:3.5rem 0 }
.display{font-size:clamp(2.25rem, 4.5vw + .25rem, 4rem); line-height:1.1; margin:0 0 .75rem 0; letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.lead{font-size:clamp(1.05rem, 1.6vw + .2rem, 1.35rem); color:var(--muted); max-width:760px; margin-inline:auto; text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero-ctas{display:flex; gap:.75rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}

/* ---------- SECTIONS ---------- */
.section{padding:64px 0; border-top:1px solid var(--line)}
.section.alt{background:var(--bg-alt)}
.section-header{text-align:center; margin-bottom:2rem}
.section-header h2{margin:.25rem 0 .25rem 0; font-size:clamp(1.5rem, 2.8vw, 2rem)}
.section-header p{color:var(--muted)}

/* Section themes (subtle gradients) */
.section.theme-a{ background: radial-gradient(1200px 600px at 100% -20%, color-mix(in oklab, var(--brand), transparent 92%), transparent 60%), var(--bg) }
.section.theme-b{ background: radial-gradient(900px 420px at -10% 10%, color-mix(in oklab, var(--accent), transparent 92%), transparent 60%), var(--bg) }
.section.theme-c{ background: radial-gradient(1200px 520px at 110% 10%, color-mix(in oklab, var(--brand), transparent 93%), transparent 60%), var(--bg-alt) }
.section.theme-d{ background: radial-gradient(900px 420px at 10% -10%, color-mix(in oklab, var(--accent), transparent 93%), transparent 60%), var(--bg) }
.section.theme-e{ background: radial-gradient(1100px 520px at 100% 110%, color-mix(in oklab, var(--brand), transparent 92%), transparent 60%), var(--bg-alt) }
.section.theme-f{ background: radial-gradient(1000px 460px at -10% 110%, color-mix(in oklab, var(--accent), transparent 92%), transparent 60%), var(--bg) }

/* Cards */
.cards{display:grid; gap:1rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:1.25rem; box-shadow:0 8px 20px rgba(2,10,25,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{ transform: translateY(-3px); box-shadow:0 14px 32px rgba(2,10,25,.12); border-color: color-mix(in oklab, var(--brand), transparent 60%) }
.card .icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:12px; background:var(--btn-ghost); color:var(--brand);
  margin-bottom:.5rem; /* left aligned: don't auto-center */
}
.card .icon svg{ width:28px; height:28px; display:block; }
.card h3{margin:.5rem 0 .25rem 0}
.card p{color:var(--muted)}
@media (max-width:880px){ .cards.three{grid-template-columns:1fr} }

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.price-card{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1.25rem; position:relative; display:flex; flex-direction:column; gap:.75rem; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease}
.price-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow:0 18px 40px rgba(2,10,25,.16); border-color: color-mix(in oklab, var(--brand), transparent 55%) }
.price-card .price-tag{font-size:1.75rem; font-weight:800}
.price-card .price-tag span{font-weight:500; font-size:1rem; color:var(--muted)}
.price-card ul{padding-left:1.1rem; margin:.25rem 0 .5rem 0; color:var(--muted)}
.price-card .btn{margin-top:auto}
.price-card.featured{border-color:var(--brand); outline:3px solid color-mix(in oklab, var(--brand), transparent 70%); background:color-mix(in oklab, var(--brand), transparent 90%)}
.price-card .badge{position:absolute; top:12px; right:12px; background:var(--brand); color:#00262a; font-size:.75rem; padding:.25rem .5rem; border-radius:999px}
@media (max-width:880px){ .pricing{grid-template-columns:1fr} }

/* Testimonials */
.testimonials{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.testimonial{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:1rem; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.testimonial:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(2,10,25,.12); border-color: color-mix(in oklab, var(--brand), transparent 65%) }
.testimonial blockquote{margin:0 0 .5rem 0}
.testimonial figcaption{color:var(--muted); font-size:.95rem}
@media (max-width:880px){ .testimonials{grid-template-columns:1fr} }

/* Areas */
.areas{display:grid; gap:1rem; grid-template-columns:repeat(4,1fr)}
.area{border:1px solid var(--line); border-radius:16px; padding:1rem; background:var(--bg); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.area:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(2,10,25,.10); border-color: color-mix(in oklab, var(--brand), transparent 65%) }
.area h3{margin:.25rem 0}
.area p{color:var(--muted)}
@media (max-width:880px){ .areas{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .areas{grid-template-columns:1fr} }

/* Forms */
.form{background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:0 8px 20px rgba(2,10,25,.06)}
.form label{display:flex; flex-direction:column; gap:.5rem; font-weight:600}
.form input,.form select,.form textarea{appearance:none; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:.75rem .8rem; border-radius:12px; font:inherit; outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--focus); box-shadow:0 0 0 4px color-mix(in oklab, var(--focus), transparent 80%)}
.form .grid.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:720px){ .form .grid.two{grid-template-columns:1fr} }
.form .form-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.5rem}
.form .form-fine{color:var(--muted); font-size:.9rem}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:32px 0; background:var(--bg-alt)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-nav{display:flex; gap:1rem; flex-wrap:wrap}
.footer-brand p{margin:.25rem 0}

/* Modal */
dialog{border:none; border-radius:16px; padding:0; background:transparent}
dialog::backdrop{background:rgba(0,0,0,.45)}
.modal-content{background:var(--bg); color:var(--text); border:1px solid var(--line); padding:1.2rem; border-radius:16px; width:min(520px,90vw)}
.modal-content h3{margin-top:0}

/* Reveal on scroll */
.reveal > *{opacity:0; transform:translateY(12px); transition:.4s ease}
.reveal.in > *{opacity:1; transform:none}

/* Sticky Call bubble (mobile) */
.sticky-call{ position:fixed; right:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-radius:999px; background:var(--brand); color:#00262a; font-weight:800; border:1px solid color-mix(in oklab, var(--brand), transparent 60%); box-shadow:0 12px 30px rgba(2,10,25,.22); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease }
.sticky-call:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(2,10,25,.26) }
.sticky-call svg{ width:20px; height:20px }
@media (min-width:880px){ .sticky-call{ display:none } }

/* Big screens: gently larger base size */
@media (min-width:1280px){ html{ font-size:17px } }
@media (min-width:1536px){ html{ font-size:18px } }


/* === Glass pattern background for Process section === */
.section#process{
  background-image:
    linear-gradient(135deg, color-mix(in oklab, var(--text), transparent 94%) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in oklab, var(--text), transparent 94%) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in oklab, var(--text), transparent 94%) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in oklab, var(--text), transparent 94%) 25%, transparent 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}