:root{
  --ink:#0b0c0d;--muted:#5b6472;--brand:#2563eb;--brand-2:#06b6d4;
  --bg:#ffffff;--panel:#f8fafc;--ring:rgba(37,99,235,.25);--border:#e6eaf0;
  --grad:linear-gradient(90deg,var(--brand),var(--brand-2));
  --accent:color-mix(in oklab, var(--brand) 10%, var(--panel));
}
:root.dark{
  --ink:#e5e7eb;--muted:#9aa4b2;--brand:#60a5fa;--brand-2:#22d3ee;
  --bg:#0b1220;--panel:#0f172a;--ring:rgba(96,165,250,.28);--border:#1f2937;
  --accent:color-mix(in oklab, var(--brand) 16%, var(--panel));
}
/* Per-page vibrant accents */
body[data-page="home"]{--brand:#2563eb;--brand-2:#06b6d4}
body[data-page="about"]{--brand:#f59e0b;--brand-2:#ec4899}
body[data-page="services"]{--brand:#a855f7;--brand-2:#22d3ee}
body[data-page="web-design"]{--brand:#ef4444;--brand-2:#22c55e}
body[data-page="process"]{--brand:#10b981;--brand-2:#06b6d4}
body[data-page="pricing"]{--brand:#3b82f6;--brand-2:#22d3ee}
body[data-page="contact"]{--brand:#22d3ee;--brand-2:#3b82f6}

*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;scroll-behavior:smooth}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{width:min(1180px,100%);margin-inline:auto;padding-inline:14px;position:relative;z-index:0}

/* NAV — sticky, with About next to Home */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.8); background:color-mix(in oklab, var(--bg) 92%, transparent);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:10px;padding:10px 0; padding-right:86px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;margin-right:6px}
.brand img{height:36px}
.nav-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nav a{padding:10px 12px;border-radius:10px}
.nav a.active,.nav a:hover{background:color-mix(in oklab, var(--brand) 12%, transparent);color:var(--ink)}

/* Theme toggle */
#theme-toggle{position:fixed;top:10px;right:12px;border:1px solid var(--border);padding:10px 12px;border-radius:999px;background:var(--panel);cursor:pointer;z-index:1100;box-shadow:0 6px 18px -8px rgba(2,8,23,.25)}
#theme-toggle:active{transform:scale(.98)}
@media (max-width:640px){
  #theme-toggle{top:12px;right:10px;padding:12px 14px}
}

/* Buttons & layout */
.cta{background:var(--grad);color:#fff;border:0;padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 6px 18px -6px rgba(37,99,235,.35);cursor:pointer;position:relative;overflow:hidden}
.cta:hover{transform:translateY(-1px)}
.hero{display:grid;gap:24px;align-items:center;padding:28px 0}
.hero-visual{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 60px -28px rgba(2,8,23,.18);background:var(--panel)}
.hero-visual svg{width:100%;height:auto;display:block}
.section{padding:34px 0;animation:section-enter .6s ease both}
@keyframes section-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section h1,.section h2{line-height:1.15;margin:0 0 12px}
.section h1{font-size:clamp(28px,4.6vw,46px)}
.section h2{font-size:clamp(22px,3.6vw,34px)}
.section .sub{color:var(--muted);margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;gap:10px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(2,8,23,.35);border-color:color-mix(in oklab, var(--brand) 24%, var(--border))}
.card h3{margin:0 0 6px}
.card img{width:100%;height:170px;object-fit:cover;border-radius:12px}
@media(min-width:760px){.card{grid-column:span 4}}

/* Accent blocks */
.block{background:var(--accent);border:1px solid var(--border);border-radius:16px;padding:14px}

/* Pricing UI (without Scale tier) */
.pricing-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
.price-card{position:relative;border-radius:18px;padding:18px;background:var(--panel);border:1px solid var(--border);overflow:hidden}
.price-card::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:conic-gradient(from 180deg, var(--brand), var(--brand-2), transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;opacity:.35}
.price-card.popular{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, var(--panel)), var(--panel));border-color:color-mix(in oklab, var(--brand) 30%, var(--border))}
.price-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.badge{display:inline-block;background:color-mix(in oklab, var(--brand) 18%, var(--bg));color:var(--ink);padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid var(--border)}
.range{font-weight:900;font-size:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-features{display:grid;gap:6px;margin:10px 0 14px 0}
.price-cta{display:flex;gap:10px;align-items:center}
.price-cta .ghost{background:transparent;border:1px solid var(--border);color:var(--ink);padding:10px 14px;border-radius:12px}

/* Contact layout — pro UI */
.contact-layout{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:980px){.contact-layout{grid-template-columns:1.1fr .9fr}}
.contact-info{border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, var(--panel)), var(--panel))}
.contact-info .row{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.contact-info .icon{width:36px;height:36px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 24px -14px rgba(37,99,235,.6)}
.form{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:820px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.input{position:relative;display:flex;flex-direction:column;gap:6px}
.input label{font-weight:700;font-size:13px;color:var(--muted)}
.input input,.input select,.input textarea{padding:14px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--ink)}
.input input:focus,.input select:focus,.input textarea:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}
.helper{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--border);margin:10px 0}

/* Light/dark canvases */

:root.dark #particles{opacity:.9}
:root:not(.dark) #lightfx{opacity:.85}

/* click splash */
.splashable{position:relative;overflow:hidden}
.splash{position:absolute;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:.55;background:radial-gradient(ellipse at center, rgba(37,99,235,.35) 0%, rgba(37,99,235,.18) 40%, rgba(37,99,235,0) 70%);animation:splash .7s ease-out forwards}
@keyframes splash{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

main, header.nav, footer{position:relative;z-index:1}

/* Simpler single-canvas particles (web linking) */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.95;transition:opacity .3s ease;}
:root.dark #particles{opacity:1;}

/* Readability controls */
:root{ --fs:1; --lh:1.6; --container:1180px; }
:root.read-wide{ --container:1280px; }
:root.read-loose{ --lh:1.78; }
html, body{ line-height: var(--lh); }
.container{ width: min(var(--container), 100%); }
html{ font-size: calc(16px * var(--fs)); }

.read-panel{ position:fixed; top:10px; right:64px; z-index:1100;
  background:rgba(255,255,255,.8); background:color-mix(in oklab, var(--bg) 92%, transparent);
  border:1px solid var(--border); border-radius:14px; padding:10px 12px; display:none;
  box-shadow:0 18px 60px -24px rgba(2,8,23,.4); backdrop-filter:saturate(140%) blur(8px);
  width: 280px; color: var(--ink);
}
.read-panel.open{ display:block; }
.read-panel h4{ margin:0 0 8px 0; font-size:14px }
.read-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 }
.read-row input[type="range"]{ width: 150px }
.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none }
.switch input{ accent-color: var(--brand); }

/* High contrast theme */
:root.contrast {
  --bg: #06080d;
  --panel: #0c1220;
  --border: #1d2635;
  --ink: #eef2f7;
  --muted: #c3cad4;
  --ring: rgba(96,165,250,.45);
}
:root.contrast .card{ border-color: color-mix(in oklab, var(--brand) 30%, var(--border)); }

/* === THEME VARIABLES (robust) === */
:root{
  --bg:#f7fafc;
  --panel:#ffffff;
  --border:#e5e7eb;
  --ink:#0b1220;
  --muted:#475569;
  --brand:#3b82f6;
  --brand-2:#22d3ee;
  --ring:rgba(2,132,199,.25);
}
:root.dark{
  --bg:#0b1220;
  --panel:#0b1220;
  --border:#1f2937;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --brand-2:#22d3ee;
  --ring:rgba(96,165,250,.45);
}
body{ background:var(--bg); color:var(--ink); }
.nav, .card, .price-card, .form, .read-panel{ background-color:var(--panel); }

/* === Geeky hero (simple, design‑vibes) === */
.hero-geek{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px, 3vw, 28px); align-items:center }
@media (max-width: 960px){ .hero-geek{ grid-template-columns: 1fr; } }

.hero-copy .accent{ color: var(--brand); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }

.hero-code{ display:grid; gap:12px }
.editor{ border-radius: var(--radius,14px); border:1px solid var(--border); background: var(--panel);
         box-shadow: var(--shadow, 0 30px 80px -40px rgba(2,8,23,.45)); overflow:hidden }
.editor .editor-bar{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border);
                     background: color-mix(in oklab, var(--panel) 85%, transparent) }
.editor .dot{ width:10px; height:10px; border-radius:999px; display:inline-block }
.editor .dot.red{ background:#ff5f56 } .editor .dot.yellow{ background:#ffbd2e } .editor .dot.green{ background:#27c93f }
.editor .file{ margin-left:8px; font-size:12px; color: var(--muted) }

.editor .code{ margin:0; padding:14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; overflow:auto }
.editor .code .t{ color:#22d3ee }        /* keywords */
.editor .code .fn{ color:#7dd3fc }       /* functions */
.editor .code .el{ color:#60a5fa }       /* elements */
.editor .code .s{ color:#fbbf24 }        /* strings */
.editor .code .a{ color:#f472b6 }        /* arrays */
.editor .code .v{ color:#a7f3d0 }        /* values */

.editor.chrome{ position:relative }
.editor.chrome::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, transparent 70%, color-mix(in oklab, var(--brand) 14%, transparent) 100%);
  mix-blend-mode:soft-light; opacity:.8;
}

.tokens .code{ background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 96%, transparent), color-mix(in oklab, var(--panel) 92%, transparent)); }

/* subtle grid backdrop vibes */
.hero-geek::before{
  content:""; position:absolute; inset:auto 0 0 0; height:40%; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--brand) 25%, transparent) 1px, transparent 1px);
  background-size: 20px 20px; opacity: .12;
}
.hero-geek{ position:relative; z-index:1 }

/* STICKY FOOTER */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.footer { margin-top: auto; }

/* Keep hero container in normal flow; lifting only the text block */

.hero-copy .lead{ margin-top: 4px; }
.hero-cta{ margin-top: 12px; }

/* Lift only the hero copy (text) a little higher */
.hero-geek .hero-copy{ margin-top: -12px; }
@media (min-width: 1024px){ .hero-geek .hero-copy{ margin-top: -12px; } }
@media (max-width: 640px){ .hero-geek .hero-copy{ margin-top: 0 !important; } }

/* WhatsApp floating tab */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:1100;width:56px;height:56px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 44px -16px rgba(2,8,23,.35);
  transition:transform .15s ease, box-shadow .15s ease; text-decoration:none}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 26px 64px -18px rgba(2,8,23,.45)}
.wa-fab svg{width:28px;height:28px;fill:#fff;display:block}
@media (max-width:640px){ .wa-fab{width:52px;height:52px; right:14px; bottom:14px} .wa-fab svg{width:26px;height:26px} }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){ .wa-fab{transition:none} .wa-fab:hover{transform:none} }
/* Screen-reader only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Mobile polish & bug fixes ===== */

/* Keep header above everything, especially the particles canvas */
.nav{ position: sticky; top: 0; z-index: 100; }

/* Ensure particles sit behind UI */
#particles{ z-index: 0; }

/* Prevent hero copy from colliding on small screens */
@media (max-width: 640px){
  .hero-geek{ grid-template-columns: 1fr; }
  .hero-geek .hero-copy{ margin-top: -12px; }
  .hero-cta{ margin-top: 10px; }
  .hero-code{ order: 2; }
  .hero-copy{ order: 1; }
}

/* Editor title/caption (file name) never overlaps */
.editor .editor-bar{ display:flex; align-items:center; gap:8px; min-height:36px; }
.editor .file{ flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Keep code readable & contained on small widths */
@media (max-width: 640px){
  .editor .code{ font-size: 12px; }
}

/* Avoid any unexpected overlaps */
.hero-geek{ align-items: start; }
.hero-geek .hero-copy .kicker{ display:block; margin-bottom: 6px; }

/* Align hero vertically and drop the left copy to match code panels */
@media (min-width: 960px){
  .hero-geek{ align-items: center; }
  .hero-geek .hero-copy{ margin-top: 28px; } /* was -12px */
}
@media (min-width: 1200px){
  .hero-geek .hero-copy{ margin-top: 34px; }
}

/* ===== Mobile header/menu fixes ===== */
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand img{ height:24px; width:auto; }
.brand span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 48vw; }
.menu-toggle{ display:none; border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:8px 10px; cursor:pointer }
.menu-overlay{ position:fixed; inset:0; background:rgba(2,8,23,.35); backdrop-filter:saturate(120%) blur(3px); z-index:90; }

@media (max-width: 900px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .nav-links{ position:fixed; z-index:100; left:12px; right:12px; top:64px;
    display:none; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--border);
    background:var(--panel); border-radius:14px; box-shadow:0 30px 80px -40px rgba(2,8,23,.5); }
  .nav-links a{ display:block; padding:10px 12px; border-radius:10px }
  .nav-links a.cta{ text-align:center }
  body.menu-open .nav-links{ display:flex }
  body.menu-open .menu-overlay{ display:block }
  .brand span{ max-width: 36vw; }
}

@media (max-width: 420px){
  .brand span{ display:none; }
}

/* add a bit of top padding so sticky header never overlaps the first section on small screens */
@media (max-width: 900px){
  main{ padding-top: 6px; }
}

/* ===== v29 Mobile menu polish ===== */
/* Safer header stacking */
.nav{ position:sticky; top:0; z-index:140; padding-top: env(safe-area-inset-top, 0); }
/* Menu panel above overlay/content; overlay over page */
.menu-overlay{ z-index:120; }
.nav-links{ z-index:130; top: var(--navTop, 64px); max-height: calc(100vh - var(--navTop, 64px) - 24px); overflow:auto; }
/* Lock background scroll when menu is open */
body.menu-open{ overflow:hidden; }
/* Hide readability controls while menu open so they don't overlap */
body.menu-open #readability-toggle, body.menu-open .read-panel{ display:none !important; }
/* Improve tap spacing for nav items in drawer */
@media (max-width:900px){
  .nav-links a{ padding:14px 14px; }
}

/* ===== v30 Mobile menu stacking fix ===== */
.nav{ position:sticky; top:0; z-index:10002; }
.menu-overlay{ position:fixed; inset:0; background:rgba(2,8,23,.45); backdrop-filter:saturate(120%) blur(4px); z-index:9998; display:none; }
body.menu-open .menu-overlay{ display:block; }
@media (max-width: 900px){
  .nav-links{ position:fixed; left:12px; right:12px; top:var(--navTop, 64px);
    display:none; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--border);
    background:var(--panel); border-radius:14px; box-shadow:0 30px 80px -40px rgba(2,8,23,.5);
    z-index:10001; max-height: calc(100vh - var(--navTop,64px) - 24px); overflow:auto; -webkit-overflow-scrolling: touch; }
  body.menu-open .nav-links{ display:flex; }
}
/* Lock body scroll beneath drawer */
body.menu-open{ overflow:hidden; touch-action:none; overscroll-behavior:contain; }
/* Ensure particles are always behind content */
#particles{ z-index:0; pointer-events:none; }

/* ===== v31 Readability panel refinements ===== */
#readability-toggle{ position:fixed !important; top:10px !important; right:88px !important; z-index:10003; }
.read-panel{ position:fixed; right:12px; top:calc(var(--navTop,64px) + 8px); z-index:10003;
  max-height: calc(100vh - var(--navTop,64px) - 24px); overflow:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:900px){
  #readability-toggle{ right:72px !important; }
  .read-panel{ right:12px; }
}
/* When the mobile drawer is open, hide the Aa controls entirely */
body.menu-open #readability-toggle, body.menu-open .read-panel{ display:none !important; }

/* ===== v32: dropdown & readability overlap fixes ===== */
/* Particles always behind everything */
#particles{ z-index:-1 !important; }
/* Elevate native selects so their menus render above neighbors */
.input select, .form select{ position:relative; z-index:2; }
/* Hide Aa controls on smaller screens to avoid overlap with UI */
@media (max-width: 900px){
  #readability-toggle, .read-panel{ display:none !important; }
}
/* When user is interacting with form fields, hide Aa controls */
body.hide-read #readability-toggle, body.hide-read .read-panel{ display:none !important; }
/* Make sure no panel overlaps selects unintentionally */
.read-panel{ pointer-events:auto; }

/* v33: remove readability UI entirely */
#readability-toggle, .read-panel{ display:none !important; }

/* v33: particles visible behind content */
#particles{ position:fixed; inset:0; z-index:0 !important; pointer-events:none; }
body{ background: var(--bg); }

/* v33: minor mobile polish */
@media (max-width: 900px){
  .hero-geek{ grid-template-columns:1fr; align-items:start; }
  .hero-geek .hero-copy{ margin-top: 6px !important; }
  .nav-links{ top: var(--navTop, 64px); }
}


/* === AetherWave v10 core === */
:root{ --brand:#22D3EE; --brand-2:#3B82F6; }
html.dark, :root[data-theme="dark"]{
  --bg:#0b0f14; --ink:#e6ebf3; --panel:#0f141b; --border:rgba(255,255,255,.08);
}
:root:not([data-theme="dark"]):not(.dark){
  --bg:#ffffff; --ink:#0c1523; --panel:#ffffff; --border:rgba(0,0,0,.08);
}
/* Particles layer */
#particles{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; opacity:.55; }
@media (max-width:1024px){ #particles{ display:none !important; } }
body > *:not(#particles){ position:relative; z-index:1; }

/* Mobile drawer */
.menu-overlay{ position:fixed; inset:0; background:rgba(2,8,23,.6); backdrop-filter:blur(2px); z-index:999; display:none; }
.menu-open .menu-overlay{ display:block; }
.mobile-menu{ position:fixed; inset:0; z-index:1000; display:none; }
.mobile-menu[aria-hidden="false"]{ display:block; }
.menu-panel{ position:fixed; right:0; top:0; height:100%; width:min(360px, 92%); background:var(--panel); border-left:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:16px; padding:16px; }
.menu-head{ display:flex; align-items:center; justify-content:space-between; font-weight:800; }
.menu-links{ display:flex; flex-direction:column; gap:10px; }
.menu-links a{ padding:12px 10px; border:1px solid var(--border); border-radius:12px; color:var(--ink); text-decoration:none; }
.menu-links a:hover{ background:color-mix(in oklab, var(--panel), var(--brand) 6%); border-color:color-mix(in oklab, var(--border), var(--brand) 40%); }
.btn-icon{ display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); background:var(--panel); color:var(--ink); border-radius:12px; }

/* Brand logo sizing */
.brand img{ height:28px; display:block; }