:root{--bg:#0d1115;--bg-elev:#13181d;--card:#161d23;--text:#e8edf1;--muted:#9aa6b3;--brand:#d68c46;--brand-2:#f2c28b;--ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;--line:rgba(255,255,255,.10);--shadow:0 10px 32px rgba(0,0,0,.38);--radius:16px;--radius-sm:12px;--radius-lg:22px;--container:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:radial-gradient(1200px 800px at 60% -10%,rgba(214,140,70,.10),transparent 55%),linear-gradient(180deg,#0d1115 0%,#0c1014 40%,#0b0f13 100%);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-2)}button{font:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}.section{padding:64px 0;border-top:1px solid var(--line)}.section:first-of-type{border-top:0}
h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:10px 0 10px;font-weight:800}.h2{font-size:clamp(24px,3.4vw,34px);line-height:1.2;font-weight:800;margin:8px 0 12px}.kicker{letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#d9b089;font-size:13px}.lead{color:var(--muted);font-size:18px}.muted{color:var(--muted)}.linklike{background:none;border:0;padding:0;margin:0;color:inherit;text-decoration:underline;cursor:pointer}
.btn{--bg:linear-gradient(180deg,#d68c46,#b87437);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--bg);color:#0f1215;font-weight:800;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 18px rgba(214,140,70,.28);cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .2s ease;white-space:nowrap}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(1px)}.btn.secondary{--bg:rgba(255,255,255,.04);background:var(--bg);color:#e9eef3;border:1px solid var(--line);box-shadow:none}.actions,.cta{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:520px){.actions .btn,.cta .btn{flex:1 1 calc(50% - 10px)}}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(13,17,21,.70);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}.site-header.hide{transform:translateY(-100%)}.site-header.scrolled{box-shadow:0 6px 30px rgba(0,0,0,.35)}.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff}.logo span{background:linear-gradient(90deg,#fff,#ffe1c7);-webkit-background-clip:text;background-clip:text;color:transparent}
.desktop-links{display:none;gap:22px}.desktop-links a{color:var(--text);opacity:.9}.desktop-links a:hover{opacity:1}
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;width:28px;height:24px;cursor:pointer;position:relative}.hamburger span,.hamburger::before,.hamburger::after{content:"";display:block;height:2px;width:22px;background:#fff;border-radius:2px;transition:.25s ease}.hamburger::before{transform:translateY(-6px)}.hamburger::after{transform:translateY(6px)}.hamburger.active span{opacity:0}.hamburger.active::before{transform:translateY(0) rotate(45deg)}.hamburger.active::after{transform:translateY(0) rotate(-45deg)}
@media (min-width:992px){.desktop-links{display:flex}.hamburger{display:none}}
.mobile-menu{position:fixed;inset:64px 0 auto 0;background:rgba(12,17,23,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:14px 20px;gap:6px;transform:translateY(-20px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}.mobile-menu a{color:var(--text);padding:12px 6px;border-radius:10px}.mobile-menu a:hover{background:rgba(255,255,255,.06)}.mobile-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.hero{padding:48px 0 20px}.hero-grid{display:grid;gap:28px;align-items:center}@media (min-width:860px){.hero-grid{grid-template-columns:1fr 1.2fr}}.portrait-wrap{max-width:330px;margin:auto}.portrait-card{border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:var(--shadow)}.portrait{aspect-ratio:4/5;object-fit:cover;width:100%}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(214,140,70,.18);color:#fde7d0;font-weight:700}.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(34,197,94,.12)}
.cards{display:grid;gap:16px}.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card .title{font-weight:800;margin:4px 0 6px}.card .desc{color:var(--muted);margin:6px 0}.card .actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}@media (min-width:1040px){.cards{grid-template-columns:repeat(3,1fr)}}
.list{list-style:none;margin:0;padding:0}.list .li{display:flex;gap:10px;align-items:center;margin:8px 0}.list .check{width:18px;height:18px;border-radius:6px;display:inline-block;flex:0 0 18px;background:linear-gradient(180deg,#16a34a,#13803a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.container.two{display:grid;gap:24px}@media (min-width:920px){.container.two{grid-template-columns:1.1fr .9fr;align-items:start}}
.label{display:block;font-weight:700;margin:10px 0 6px}.input,.textarea{width:100%;background:#0a1219;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);outline:none;transition:border-color .15s ease,box-shadow .15s ease;font-size:16px}.input:focus,.textarea:focus{border-color:rgba(214,140,70,.7);box-shadow:0 0 0 4px rgba(214,140,70,.18)}.textarea{min-height:130px;resize:vertical}
.pro-footer{margin-top:20px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}.footer-grid{display:grid;gap:20px;padding:26px 0}.fcol .title{font-weight:800;margin-bottom:8px}.fcol .desc{color:#c3cdda}.f-links{list-style:none;margin:0;padding:0}.f-links li{margin:6px 0}.f-links a,.linklike{color:var(--text);opacity:.9}.f-links a:hover,.linklike:hover{opacity:1}.company{font-style:normal;color:var(--muted);font-size:14px}.footer-bottom{padding:12px 0;border-top:1px solid var(--line);color:#a9bed2;font-size:13px}.copy{font-size:13px}
.to-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(11,17,23,.86);color:#e9f4ff;display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}.to-top svg{width:22px;height:22px}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,12,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1100}.modal.open{opacity:1;pointer-events:auto}.modal-card{width:min(680px,92vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.modal-card.small{width:min(560px,92vw)}.modal-card .title{font-weight:800;font-size:20px;margin:0 0 6px}.modal-card .desc{color:var(--muted);margin:6px 0 12px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.modal-card .list .li{align-items:flex-start}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;background:#0f1620;color:#e5edf5;padding:16px;border-radius:var(--radius);box-shadow:var(--shadow);display:none}.cookie-banner .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}.cookie-btn{border:0;padding:10px 14px;border-radius:12px;cursor:pointer}.cookie-accept{background:var(--brand);color:#0f1215;font-weight:800}.cookie-settings{background:#17202b;color:#e5edf5;border:1px solid var(--line)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.ad-slot{width:100%;min-height:120px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#0f1620,#0f1620 10px,#0c1219 10px,#0c1219 20px);border:1px dashed var(--line);border-radius:var(--radius);font-weight:600;color:var(--muted);box-shadow:var(--shadow)}
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.cards{grid-template-columns:1fr}.hero{padding:40px 0 16px}}


/* --- Production Tweaks Added --- */

/* --- Production tweaks / overrides --- */

/* 1) Global scroll lock */
html.no-scroll, body.no-scroll { overflow: hidden; }

/* 2) Mobile menu: respect [hidden] */
#mobileMenu[hidden] { display: none !important; }

/* 3) Skip link */
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 2000;
  padding: 10px 12px; border-radius: 10px;
  background: #0f1620; color: #e9f4ff; border:1px solid var(--line);
  transform: translateY(-120%); transition: transform .18s ease, opacity .18s ease;
  opacity: 0; text-decoration: none; font-weight: 700; box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); opacity: 1; }

/* 4) Focus styles (visible but subtle) */
:where(a, button, input, textarea, select, .card, .modal-card):focus-visible {
  outline: 2px solid var(--brand-2); outline-offset: 2px;
}

/* 5) Modal transitions */
.modal { opacity: 0; transition: opacity .18s ease; }
.modal .modal-card { transform: translateY(8px); transition: transform .22s ease, box-shadow .22s ease; }
.modal.open .modal-card { transform: translateY(0); }

/* 6) Form status note */
#formNote { margin-top: 10px; font-weight: 600; }
#formNote.error { color: var(--danger); }

/* 7) Footer socials (minimal icons) */
.socials { display: flex; gap: 10px; margin-top: 10px; }
.socials a { width: 36px; height: 36px; border-radius: 999px; display:inline-grid; place-items:center;
  border:1px solid var(--line); color:var(--text); opacity:.85; text-decoration:none; font-weight:800; font-size:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  box-shadow: var(--shadow);
}
.socials a:hover { opacity: 1; transform: translateY(-1px); }
.socials a:active { transform: translateY(0); }

/* 8) Footer rhythm */
.footer-grid { align-items: start; }

/* 9) Buttons micro-interactions */
.btn { will-change: transform, filter, box-shadow; }
.btn.secondary:hover { filter: brightness(1.05); }

/* 10) To-top visibility already handled by .show; ensure pointer-events */
.to-top { pointer-events:none; }

/* 11) Cards list semantics: ensure gap on small screens */
.cards[role="list"] { gap: 18px; }

/* 12) Cookie banner polish */
.cookie-banner .actions { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-banner .btn.linklike { background: none; border: 0; box-shadow:none; text-decoration: underline; color: var(--text); }

/* 13) Inputs: consistent height */
.input, .textarea { line-height: 1.25; }

/* 14) Small utility for visually hidden (if needed) */
.visually-hidden { position:absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; }


/* --- Final polish additions --- */

/* === Final polish === */

/* Footer alignment: center columns better and add balanced padding */
.pro-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 36px;
  align-items: start;
}
.pro-footer .fcol { padding-left: 8px; padding-right: 8px; }
.pro-footer .footer-bottom { justify-content: center; text-align: center; }

/* Remove any unintended section gradients; keep clean background */
.section, .hero, .pro-footer { background-image: none !important; }
.section:nth-child(odd), .section:nth-child(even) { background: var(--bg, #0b0f14); }

/* Hamburger: no oval light bg */
.hamburger {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
}
.hamburger span,
.hamburger::before,
.hamburger::after { background: currentColor; }

/* Mobile menu panel: ensure solid backdrop without extra 'plate' */
.mobile-menu {
  backdrop-filter: blur(0px);
  background: rgba(10,14,18,.98);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* Modal subtle backdrop uniform */
.modal { background: rgba(6,10,14,.72); }

/* Cookie link style unification */
.footer-grid .f-links .linklike { padding-left: 0; }

/* Remove socials spacing leftovers */
.pro-footer .socials { display: none !important; }

/* Ensure hero and sections have consistent color stops */
.hero .lead { color: var(--text, #d6e2ef); }



/* --- Feedback fixes --- */

/* === Fixes based on latest feedback === */

/* Ensure [hidden] collapses mobile menu */
#mobileMenu[hidden]{display:none !important;}

/* Hamburger look: no blue bg, crisp lines, unclipped X */
.hamburger{background:transparent !important; color:var(--text,#d6e2ef); border:0; width:44px; height:44px; display:inline-grid; place-items:center; border-radius:10px;}
.hamburger span{position:relative; display:block; width:22px; height:2px; background:currentColor; border-radius:2px;}
.hamburger span::before,.hamburger span::after{content:''; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px; transform-origin:center;}
.hamburger span::before{top:-7px;}
.hamburger span::after{top:7px;}
.hamburger.active span::before{transform:rotate(45deg); top:0;}
.hamburger.active span::after{transform:rotate(-45deg); top:0;}

/* Body class while menu open (for possible page push/blur effects) */
body.menu-open{overflow:hidden;}

/* CTA spacing: give breathing room under paragraphs and around buttons */
.section .cta{margin-top:16px; gap:12px; display:flex; flex-wrap:wrap;}
.section p + .cta{margin-top:18px;}
.card .cta{margin-top:12px;}
.list + .cta{margin-top:16px;}

/* Deeper vertical rhythm after hero */
.section .h2{margin-bottom:8px;}
.section .muted{margin-top:4px;}

/* Modal content readability */
.modal .desc{line-height:1.7;}
.modal .list .li{margin:6px 0;}

/* Cookie banner always visible when not accepted */
#cookieBanner{position:fixed; left:14px; right:14px; bottom:14px; z-index:2000; border-radius:14px; background:#0f1620; border:1px solid var(--line); box-shadow:var(--shadow);}
#cookieBanner .cookie-banner__inner{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:12px 14px;}
#cookieBanner .actions{display:flex; gap:8px;}

/* Remove left-pull feeling in footer */
.pro-footer .fcol{padding-left:12px; padding-right:12px;}

.input.invalid,.textarea.invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}

/* Hamburger smooth X transform */
.hamburger{background:transparent;border:0;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:10px;color:inherit}
.hamburger .bars{position:relative;display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease, background-color .2s ease, opacity .2s ease}
.hamburger .bars::before,.hamburger .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transform-origin:center;transition:transform .25s ease, top .25s ease}
.hamburger .bars::before{top:-7px}.hamburger .bars::after{top:7px}
.hamburger.active .bars{background:transparent}
.hamburger.active .bars::before{transform:rotate(45deg);top:0}
.hamburger.active .bars::after{transform:rotate(-45deg);top:0}


/* === Accessibility: skip-link & invalid fields === */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}

/* invalid inputs */
input.invalid, textarea.invalid{border-color:#f87171;outline-color:#f87171}

/* Unified nav responsive behavior (optional, safe defaults) */
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav .menu-toggle{display:none}
@media(max-width:768px){
  .site-nav .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav ul{display:none}
  .site-nav.open ul{display:block}
}

/* Reduced motion safeguard */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}


/* === Hero dark blend overlay to match index.html === */
.hero{
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75)), url('/img/hero-mobile.webp') center/cover no-repeat;
}
@media (min-width:640px){
  .hero{ background-image: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75)), url('/img/hero.webp'); }
}


/* --- HERO WEBP-ONLY (robust) --- */
#hero,
.hero,
section.hero,
header.hero{
  background:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
    image-set(url("/img/hero.webp") type("image/webp") 1x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px){
  #hero,
  .hero,
  section.hero,
  header.hero{
    background:
      linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
      image-set(url("/img/hero-mobile.webp") type("image/webp") 1x);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
/* --- /HERO WEBP-ONLY --- */