/* ==========================================================
   Waymaker Softlinks — Advanced Template (Glass + Neon)
   - Dark/Light theme (root vars)
   - Canvas constellation background
   - Mega menu + mobile nav
   - 3D tilt cards, neon borders
   - Scroll reveals, slider, marquee, counters
   - Pro contact layout
   - ✅ High-contrast theme toggle (icon-only)
   ========================================================== */

/* ---------- Tokens: Dark (default) ---------- */
:root{
  --bg:#0b0f23; --bg-2:#0e1430; --card:#101634; --glass:rgba(255,255,255,.06);
  --text:#e8ecff; --muted:#b6bedc; --line:#1e2650;
  --brand:#7c8cff; --brand-2:#27d2c6; --accent:#b47cff;
  --radius:16px; --r-sm:12px; --r-lg:22px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --container:1200px;
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:32px; --s7:48px; --s8:80px;

  /* Contact */
  --border:#1e2650;
  --shade:rgba(255,255,255,.06);
}

/* ---------- Light overrides ---------- */
html[data-theme="light"]{
  --bg:#ffffff; --bg-2:#f7f9ff; --card:#ffffff; --glass:rgba(20,30,70,.06);
  --text:#0f142a; --muted:#586189; --line:#e7eaf4;
  --brand:#4f46e5; --brand-2:#06b6d4; --accent:#8b5cf6;
  --shadow:0 18px 50px rgba(24,34,66,.12);
  --border:#e7eaf4;
  --shade:#f2f4ff;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:radial-gradient(1200px 400px at 10% -10%, rgba(124,140,255,.12), transparent 60%),
             radial-gradient(1200px 400px at 90% -10%, rgba(39,210,198,.12), transparent 60%),
             var(--bg);
  color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 var(--s5); color:var(--muted)}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--s5)}

/* ---------- Canvas background ---------- */
#bg-canvas{
  position:fixed; inset:0; z-index:-2; width:100%; height:100%;
  background:transparent;
}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:1200; background:transparent}
.scroll-progress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-2))}

/* ---------- Header & Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,14,38,.55);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.65)}
.site-header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:32px}
.brand-name{font-weight:800; letter-spacing:.3px}

/* Desktop nav */
.site-nav{display:flex; align-items:center; gap:14px}
.nav-link{padding:10px 14px; border-radius:10px; color:var(--muted); background:transparent; border:0; cursor:pointer}
.nav-link:hover, .site-nav a:hover{background:var(--glass); color:var(--text)}
.site-nav .btn{margin-left:8px}

/* Mega menu */
.has-mega{position:relative}
.mega{
  position:absolute; top:100%; left:0; display:none; gap:26px; width:680px;
  padding:16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.mega .mega-col{min-width:200px}
.mega h4{margin:0 0 8px}
.mega-link{display:block; padding:8px 10px; border-radius:10px; color:var(--muted)}
.mega-link:hover{background:var(--glass); color:var(--text)}
.has-mega[aria-expanded="true"] .mega,
.has-mega .nav-link[aria-expanded="true"] + .mega{display:flex}

/* Right actions */
.header-actions{display:flex; align-items:center; gap:10px}

/* Generic icon button */
.icon-btn{
  display:inline-grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--text);
}
.icon-btn svg{width:22px; height:22px; fill:currentColor}

/* ✅ Theme toggle — icon-only with glow, always visible */
.theme-toggle{
  display:inline-grid; place-items:center; height:44px; width:48px;
  border-radius:999px; border:1px solid var(--line);
  background:var(--glass); color:var(--text); position:relative; isolation:isolate;
}
.theme-toggle::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(124,140,255,.35), rgba(39,210,198,.35));
  filter:blur(14px); opacity:.25;
}
.theme-toggle:hover{filter:brightness(1.06)}
.theme-toggle:focus-visible{outline:3px solid rgba(14,165,233,.35); outline-offset:2px}

/* 👇 Icon visibility mapping (sun in dark, moon in light) */
.icon-sun { display:block; }
.icon-moon { display:none; }
html[data-theme="light"] .icon-sun { display:none; }
html[data-theme="light"] .icon-moon { display:block; }

/* Mobile nav */
.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:transparent}
.nav-toggle span{display:block; height:2px; background:currentColor; margin:7px 8px}
.mobile-nav{
  display:none; background:rgba(10,14,38,.88); backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
}
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,.92)}
.mobile-nav a, .mobile-nav summary{display:block; padding:12px 18px; border-bottom:1px solid var(--line)}
.mobile-nav details[open] > summary{background:var(--glass)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:999px; font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b0f1d;
  border:1px solid transparent; box-shadow:var(--shadow); transition:transform .08s ease, filter .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--text)}

/* ---------- Hero ---------- */
.hero{position:relative; padding:var(--s8) 0 var(--s7)}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7); align-items:center}
.display{font-size:clamp(30px,5.2vw,54px); line-height:1.08; margin:0 0 var(--s4)}
.lead{font-size:clamp(16px,2.2vw,18px)}
.grad{background:linear-gradient(135deg,var(--brand),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{margin-top:var(--s5); display:flex; gap:12px; flex-wrap:wrap}
.hero-points{margin:var(--s5) 0 0; padding:0; list-style:none; color:var(--muted)}
.hero-points li{margin:6px 0}

/* Tilt glass panel */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:var(--s5);
}
.glass-head{display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--muted)}
.dot{width:10px; height:10px; border-radius:50%}
.dot.r{background:#ff6b6b}.dot.y{background:#ffd166}.dot.g{background:#51d88a}
.code{color:#cfe3ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px}

/* Neon card */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s6); box-shadow:var(--shadow)}
.neon{position:relative}
.neon::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(124,140,255,.4), rgba(39,210,198,.4));
  filter:blur(18px); opacity:.25;
}

/* Tilt */
.tilt{transform-style:preserve-3d; transition:transform .2s ease}

/* ---------- Logos marquee ---------- */
.logos{padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.marquee{display:flex; gap:36px; white-space:nowrap; animation:marquee 28s linear infinite; font-weight:700; letter-spacing:.5px; opacity:.85}
.marquee span{display:inline-block; padding:8px 0}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:var(--s8) 0}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-contrast{background:linear-gradient(135deg, rgba(124,140,255,.18), rgba(39,210,198,.18))}
.section .section-head{text-align:center; margin-bottom:var(--s6)}
.section .section-head h2{margin:0 0 var(--s3)}
.center{text-align:center}

.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.list{margin:var(--s4) 0 0; padding-left:1.2em}
.list li{margin:6px 0}

/* Metrics */
.metrics .metric{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--s6); text-align:center; box-shadow:var(--shadow)}
.metrics strong{display:block; font-size:30px}

/* Cases */
.cases .case{display:grid; grid-template-rows:160px auto; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease}
.cases .case:hover{transform:translateY(-2px)}
.cases img{width:100%; height:160px; object-fit:cover}
.case-body{padding:16px}

/* Slider */
.slider{position:relative}
.slides{display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow:hidden; scroll-snap-type:x mandatory}
.slide{scroll-snap-align:center; padding:var(--s6); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); margin:0 10px}
.slide-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--glass)}
.slide-nav.prev{left:-4px} .slide-nav.next{right:-4px}
blockquote{margin:0 0 10px}

/* FAQ */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px var(--s5); margin:14px 0; box-shadow:var(--shadow)}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin-top:10px}

/* CTA */
.cta{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#081022; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* Page hero */
.page-hero{padding:var(--s7) 0 var(--s6); border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}

/* Utility */
.fit{width:100%; height:100%; object-fit:cover}
.code-box{padding:16px; background:rgba(0,0,0,.2); border:1px dashed var(--line); border-radius:12px; color:#d8e7ff}
.lock{width:100%; height:260px; border-radius:16px; background:repeating-linear-gradient(45deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 10px, transparent 10px, transparent 20px); border:1px solid var(--line)}
.arrow{display:inline-block; margin-top:10px; color:var(--text)}

/* Footer */
.site-footer{padding:var(--s7) 0; border-top:1px solid var(--line); background:rgba(255,255,255,.02)}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr 1.2fr; gap:var(--s6)}
.footer-logo{height:26px; margin-bottom:10px}
.newsletter label{display:block; margin-bottom:6px}
.nl-row{display:grid; grid-template-columns:1fr auto; gap:10px}
.newsletter input{padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text)}

/* Back to top */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--text); box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; z-index:999;
}
.back-to-top.show{opacity:1; transform:translateY(0)}

/* Reveal animations */
.reveal-up, .reveal-zoom{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal-zoom{transform:scale(.97)}
.reveal-up.show{opacity:1; transform:none}
.reveal-zoom.show{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal-up, .reveal-zoom{opacity:1; transform:none} }

/* Responsive */
@media (max-width: 1060px){ .hero-grid, .grid-3, .grid-2, .footer-grid{grid-template-columns:1fr} }
@media (max-width: 980px){
  .nav-toggle{display:inline-grid; place-items:center}
  .site-nav{display:none}
  .mobile-nav{display:block}
}

/* ===== Pro Contact page refinements ===== */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:start}
.card-pro{
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:var(--s6);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
html[data-theme="dark"] .card-pro{background:#111631}
.contact-card h2, .form-card h2{margin:0 0 var(--s4)}
.divider{height:1px; background:var(--border); margin:var(--s5) 0}
.info-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.info-item{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center}
.info-item .icon{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--shade); font-size:18px}
.tick-list{margin:var(--s4) 0 0; padding-left:1.2em}
.tick-list li{margin:6px 0}
.socials{margin-top:var(--s5); display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-grid; place-items:center; height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow)}
html[data-theme="dark"] .chip{background:#0f142a}

/* Floating labels */
.field{position:relative}
.field--float input,
.field--float textarea,
.field--float select{
  width:100%; padding:16px 14px 12px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
html[data-theme="dark"] .field--float input,
html[data-theme="dark"] .field--float textarea,
html[data-theme="dark"] .field--float select{background:#0f142a; border-color:#20264a}
.field--float label{
  position:absolute; left:12px; top:12px; padding:0 6px; background:var(--bg);
  color:var(--muted); font-size:13px; transform-origin:left top; transition:transform .15s ease, color .15s ease, top .15s ease;
}
.field--float input::placeholder,
.field--float textarea::placeholder{color:transparent}
.field--float:focus-within label,
.field--float.is-filled label{
  top:-8px; transform:scale(.9); color:var(--brand);
}
.field--float input:focus,
.field--float textarea:focus,
.field--float select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,165,233,.15)
}

/* Inline errors */
.error{display:none; color:#d0342c; font-size:12px; margin-top:6px}
.field.invalid .error{display:block}
.field.invalid input,
.field.invalid textarea,
.field.invalid select{border-color:#d0342c; box-shadow:0 0 0 3px rgba(208,52,44,.12)}

/* Agree checkbox */
.agree{display:flex; align-items:center; gap:10px; margin-top:var(--s3); color:var(--muted)}
.agree input{width:18px; height:18px}

/* Button loading */
.btn-spinner{display:none; width:16px; height:16px; border-radius:50%; border:2px solid transparent; border-top-color:#fff; animation:spin .8s linear infinite}
.btn--loading .btn-label{opacity:0}
.btn--loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Contact page FAQ (optional blocks) */
.faq{display:grid; gap:12px}
.faq-item{border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow)}
html[data-theme="dark"] .faq-item{background:#101632; border-color:#20264a}
.faq-item summary{cursor:pointer; padding:14px 16px; font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item > div{padding:0 16px 14px 16px; color:var(--muted)}

/* Toast */
.toast{
  position:fixed; right:18px; bottom:18px; z-index:1200; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:#fff; color:var(--text);
  box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s ease;
}
html[data-theme="dark"] .toast{background:#101632; border-color:#20264a}
.toast.show{opacity:1; transform:translateY(0); pointer-events:auto}
.toast-icon{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:700}
.toast-body small{display:block; color:var(--muted)}
.toast-close{background:transparent; border:none; font-size:18px; line-height:1; color:inherit; cursor:pointer}

/* Utilities */
.grid-2.gap{gap:var(--s4)}
@media (max-width: 980px){
  .contact-grid{grid-template-columns:1fr}
}