:root{
  --bg:#FFFFFF; --card:#F5F5F7; --ink:#1D1D1F; --dim:#6E6E73; --rule:#E3E3E5;
  --koral:#FF5A36; --koraltext:#DE4F1C; --amber:#FFC23D; --teal:#12A594; --natt:#0F0F12;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--koraltext)} :focus-visible{outline:2px solid var(--koraltext); outline-offset:3px}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.narrow{max-width:680px}

/* topp */
.top{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.top .back{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-decoration:none}
.top .lang{font-size:14px; color:var(--dim); text-decoration:none; border:1px solid var(--rule); border-radius:999px; padding:6px 12px}
.top .lang:hover{color:var(--ink)}

/* hjälte */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:40px 0 20px}
.hero h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:clamp(44px,7vw,84px); font-weight:800; letter-spacing:-.035em; line-height:.98; margin:0; text-wrap:balance}
.hero h1 .bite{color:var(--koraltext)}
.hero .tag{font-size:clamp(20px,2.6vw,26px); color:var(--dim); margin:18px 0 0; max-width:30ch; line-height:1.35; text-wrap:pretty}
.hero .cta{display:flex; gap:14px; align-items:center; margin-top:30px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); text-decoration:none; border-radius:999px; padding:14px 22px; font-weight:600; font-size:16px}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.status{font-size:14px; color:var(--dim)}
.phone{position:relative; justify-self:center; width:min(340px,80vw)}
.phone img{border-radius:44px; box-shadow:0 30px 60px -30px rgba(0,0,0,.35), 0 0 0 1px var(--rule)}
.mark{width:72px; height:72px; margin-bottom:26px; border-radius:16px; box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}

/* kort-rad */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 0}
.pillar{background:var(--card); border:0; border-radius:24px; padding:24px}
.pillar h3{margin:14px 0 6px; font-size:19px; letter-spacing:-.01em}
.pillar p{margin:0; color:var(--dim); font-size:15.5px}
.pillar svg{width:40px; height:40px}

/* sektioner */
section.feat{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:72px 0; border-top:1px solid var(--rule)}
section.feat.flip .text{order:2}
.text h2{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:clamp(30px,4.2vw,44px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0 0 16px; text-wrap:balance}
.text .kicker{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--koraltext); font-weight:600; margin:0 0 14px}
.text p{margin:12px 0; font-size:17.5px; color:var(--ink)}
.text p.dim{color:var(--dim); font-size:15.5px}
.text ul{padding-left:0; list-style:none; margin:18px 0 0}
.text li{margin:10px 0; padding-left:28px; position:relative}
.text li::before{content:""; position:absolute; left:0; top:.55em; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--koral),var(--amber))}
.shot{justify-self:center; width:min(320px,78vw)}
.shot img{border-radius:40px; box-shadow:0 30px 60px -32px rgba(0,0,0,.35), 0 0 0 1px var(--rule)}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; width:min(560px,100%)}
.pair img{border-radius:28px; box-shadow:0 24px 48px -28px rgba(0,0,0,.35), 0 0 0 1px var(--rule)}

/* illustrationer */
.illu{width:100%; max-width:520px; justify-self:center}
.sex{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.sex div{background:var(--card); border:0; border-radius:18px; padding:16px 14px; font-size:14.5px; line-height:1.35}
.sex svg{width:28px; height:28px; display:block; margin-bottom:10px}
.sex b{display:block; font-size:15px; margin-bottom:2px}

/* inte-listan */
.not{background:var(--natt); color:#F2F2F7; border-radius:28px; padding:48px 40px; margin:72px 0 0}
.not h2{font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; margin:0 0 10px; line-height:1.05}
.not p{color:#A3A29E; margin:0 0 22px; max-width:56ch}
.not ul{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 24px; padding:0; margin:0; list-style:none}
.not li{padding-left:30px; position:relative; font-size:17px}
.not li::before{content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%; border:2px solid var(--koral)}
.not li::after{content:""; position:absolute; left:4px; top:calc(.35em + 8px); width:14px; height:2px; background:var(--koral); transform:rotate(-45deg)}

/* fotnot och sidfot */
.ack{margin-top:40px; color:var(--dim); font-size:14.5px; max-width:70ch}
footer{border-top:1px solid var(--rule); margin-top:72px; padding:28px 0 64px; color:var(--dim); font-size:14.5px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer a{color:var(--dim)}

/* textsidor */
.page h1{font-size:clamp(34px,7vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:0}
.page .sub{color:var(--dim); margin-top:10px; font-size:19px}
.short{background:var(--card); border:0; border-radius:20px; padding:22px 20px; margin-top:30px}
.short p{margin:0; font-weight:600; font-size:clamp(19px,4.4vw,23px); line-height:1.3; letter-spacing:-.01em}
.short .s{display:block; font-weight:400; font-size:16px; color:var(--dim); margin-top:10px; letter-spacing:0}
.page h2{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--koraltext); font-weight:600; margin:42px 0 12px}
.page h3{font-size:18px; font-weight:600; margin:26px 0 6px}
.page p{margin:12px 0} .page ul{padding-left:20px; margin:12px 0} .page li{margin:8px 0}
.page footer{display:block}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:28px; padding-top:20px}
  .phone{justify-self:start}
  .pillars{grid-template-columns:1fr}
  section.feat{grid-template-columns:1fr; gap:28px; padding:48px 0}
  section.feat.flip .text{order:0}
  .sex{grid-template-columns:1fr 1fr}
  .not{padding:32px 24px}
}
@media (prefers-reduced-motion: no-preference){
  .hero h1, .hero .tag, .hero .cta, .phone{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero .tag{animation-delay:.08s} .hero .cta{animation-delay:.16s} .phone{animation-delay:.12s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}