/* ------- Basis & tokens ------- */
:root{
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#ffffff;
  --accent:#0284c7; --accent2:#0ea5e9; --tint:#eff8ff;
  --radius:16px; --shadow:0 10px 40px -12px rgba(15,23,42,.18);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.15; margin:0 0 .4em; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:750}
h3{font-size:1.15rem; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ------- Buttons ------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.5em; border-radius:999px; font-weight:650; font-size:1rem;
  cursor:pointer; border:1.5px solid transparent; transition:transform .12s ease, box-shadow .2s ease, background .2s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 22px -8px var(--accent)}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-block{display:flex; width:100%}

/* ------- Topbar ------- */
.topbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:14px; height:64px}
.brand{font-weight:800; letter-spacing:-.02em}
.forsale-pill{font-size:.8rem; font-weight:650; color:var(--accent); background:var(--tint); padding:.25em .7em; border-radius:999px}
.forsale-pill::first-letter{color:#16a34a}
.topbar-cta{margin-left:auto; font-weight:650; padding:.55em 1.1em; border-radius:999px; background:var(--accent); color:#fff}
.topbar-cta:hover{text-decoration:none; background:var(--accent2)}

/* ------- Hero ------- */
.hero{background:linear-gradient(180deg,var(--tint),#fff); padding:64px 0 40px; overflow:hidden}
.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:1rem}
.eyebrow svg{display:block}
.tagline{font-size:1.3rem; color:var(--ink); font-weight:550; max-width:32ch}
.buyer{color:var(--muted); max-width:44ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:1.4rem 0}
.price-tag{display:inline-flex; align-items:baseline; gap:.6em; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:.7em 1.1em; margin-top:.4rem}
.price-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650}
.price-value{font-size:1.5rem; font-weight:800; color:var(--ink)}
.verify-link{display:inline-flex; align-items:center; gap:.45em; margin-top:.9rem; font-size:.9rem; font-weight:600; color:var(--muted)}
.verify-link svg{color:var(--accent)}
.verify-link:hover{color:var(--accent); text-decoration:none}
.verify-line{margin:.4rem 0 0}
.hero-visual{display:flex; justify-content:center}
.hero-art{width:100%; max-width:420px; height:auto; filter:drop-shadow(0 24px 48px rgba(15,23,42,.12))}

/* ------- Trustbar ------- */
.trustbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.trust-in{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:22px 24px}
.trust-in div{display:flex; flex-direction:column}
.trust-in strong{font-size:.98rem}
.trust-in span{font-size:.85rem; color:var(--muted)}

/* ------- Stats ------- */
.stats{padding:52px 0}
.stats-in{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.stat{background:var(--tint); border-radius:var(--radius); padding:28px 24px; text-align:center}
.stat-num{display:block; font-size:2rem; font-weight:800; color:var(--accent); letter-spacing:-.02em}
.stat-cap{color:var(--muted); font-size:.92rem}
.stat sup{color:var(--muted)}

/* ------- Content ------- */
.content{padding:24px 0 60px}
.content-in{display:grid; grid-template-columns:1.6fr .9fr; gap:40px; align-items:start}
.content-main p{color:#334155}
.content-aside{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); position:sticky; top:88px}
.checks{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.7rem}
.checks li{position:relative; padding-left:1.9em; color:#334155}
.checks li::before{content:""; position:absolute; left:0; top:.35em; width:1.15em; height:1.15em; border-radius:999px; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ------- Offer ------- */
.offer{background:var(--tint); padding:60px 0}
.offer-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start}
.portfolio .offer-in,.offer-in:has(.offer-thanks){grid-template-columns:1fr; max-width:720px}
.offer-intro h2{margin-bottom:.5rem}
.offer-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:grid; gap:14px}
.offer-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.offer-form label{display:flex; flex-direction:column; gap:.35em; font-weight:600; font-size:.9rem}
.offer-form input,.offer-form textarea{font:inherit; padding:.7em .85em; border:1.5px solid var(--line); border-radius:10px; outline:none; transition:border .15s}
.offer-form input:focus,.offer-form textarea:focus{border-color:var(--accent)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.finenote{font-size:.82rem; color:var(--muted); margin:0}
.offer-thanks{background:#fff; border:1px solid var(--line); border-left:4px solid #16a34a; border-radius:var(--radius); padding:24px; display:grid; gap:.3rem}
.offer-thanks strong{font-size:1.1rem}
.offer-thanks span{color:var(--muted)}

/* ------- Related / portfolio grid ------- */
.related{padding:60px 0}
.related-sub{color:var(--muted); max-width:60ch; margin-top:-.4rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:20px}
.dcard{display:grid; gap:.35rem; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; color:var(--ink); transition:transform .12s, box-shadow .2s, border-color .2s}
.dcard:hover{text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent)}
.dcard-icon{width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--tint); border-radius:10px}
.dcard-name{font-weight:750; font-size:1.05rem; letter-spacing:-.01em}
.dcard-cat{color:var(--muted); font-size:.85rem; min-height:2.4em}
.dcard-price{font-weight:700; color:var(--accent)}

/* ------- Portfolio page ------- */
.hero-portfolio{padding:72px 0 48px}
.hero-portfolio .tagline{max-width:60ch; margin-top:.6rem}
.portfolio-list{padding:20px 0 40px}
.cat-block{margin-bottom:44px}
.cat-title{display:flex; align-items:center; gap:.5em; color:var(--accent); border-bottom:2px solid var(--line); padding-bottom:.4rem}

/* ------- Footer ------- */
.foot{border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:.9rem}
.foot-in{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between}
.disclaimer{font-size:.82rem}

/* ------- Demo-schakelbalk ------- */
body:has(.demobar){padding-bottom:72px}
.demobar{position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(15,23,42,.92); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12); box-shadow:0 -8px 30px -10px rgba(0,0,0,.5)}
.demobar-in{display:flex; align-items:center; gap:12px; max-width:var(--wrap); margin:0 auto; padding:10px 16px}
.demobar-label{display:inline-flex; align-items:center; gap:.4em; color:#cbd5e1;
  font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; flex:none}
.demo-select{flex:1 1 auto; min-width:0; max-width:460px; font:inherit; font-size:.92rem; font-weight:600;
  color:#0f172a; background:#fff; border:1px solid rgba(255,255,255,.25); border-radius:10px;
  padding:.55em 2.2em .55em .9em; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7em center; background-size:1.1em}
.demo-select:focus{outline:2px solid var(--accent2); outline-offset:2px}

/* ------- Responsive ------- */
@media (max-width:860px){
  .hero-in,.content-in,.offer-in,.stats-in,.trust-in{grid-template-columns:1fr}
  .hero-visual{order:-1; max-width:300px; margin:0 auto}
  .content-aside{position:static}
  .trust-in{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .offer-form .row{grid-template-columns:1fr}
  .trust-in{grid-template-columns:1fr}
}