:root{
  --paper:#F1F2EA;
  --paper-dim:#E7E8DD;
  --ink:#1E2A3A;
  --ink-soft:#4B5768;
  --ink-faint:#8B93A0;
  --gold:#C98A2C;
  --gold-deep:#8F5F16;
  --teal:#3E7A6E;
  --teal-deep:#2A5850;
  --rule:#D3D4C6;
  --red:#B4472F;
}
[data-theme="dark"]{
  --paper:#12161D;
  --paper-dim:#1A212B;
  --ink:#ECEDE6;
  --ink-soft:#B7BEC9;
  --ink-faint:#7C8494;
  --gold:#E3B563;
  --gold-deep:#E8C27E;
  --teal:#6BAE9C;
  --teal-deep:#5FA592;
  --rule:#2B3340;
  --red:#E08E77;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.display{font-family:'Space Grotesk', sans-serif;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* Nav */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 0;
  border-bottom:1px solid var(--rule);
}
.logo{font-size:20px; font-weight:700; letter-spacing:-0.01em; text-decoration:none;}
.logo span{color:var(--gold-deep);}
.nav-links{display:flex; gap:22px; font-size:14px; color:var(--ink-soft);}
.nav-links a{position:relative; text-decoration:none; transition:color .15s; padding-bottom:2px;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--gold); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.16,.8,.3,1);
}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-toggle{
  display:none;
  width:38px; height:38px; padding:0;
  align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:8px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.nav-toggle:hover{border-color:var(--ink); color:var(--ink);}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--rule); border-radius:50%;
  background:transparent; color:var(--ink-soft); cursor:pointer; padding:0;
  transition:border-color .15s, color .15s;
}
.theme-toggle:hover{border-color:var(--ink); color:var(--ink);}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:inline;}
.nav-cta{
  font-size:14px; font-weight:500; padding:10px 20px;
  border:1px solid var(--ink); border-radius:2px;
  text-decoration:none; transition:background .15s, color .15s;
}
.nav-cta{transition:background .15s ease, color .15s ease, transform .15s ease;}
.nav-cta:hover{background:var(--ink); color:var(--paper); transform:translateY(-1px);}

/* Hero */
.hero{
  padding:88px 0 96px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}
.eyebrow{
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--gold-deep); font-weight:500; margin-bottom:20px;
}
h1{font-size:52px; line-height:1.06; font-weight:600; letter-spacing:-0.01em; margin-bottom:24px;}
h1 em{
  font-style:normal; color:var(--gold-deep);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:3px; text-underline-offset:6px;
}
.lede{font-size:17px; color:var(--ink-soft); max-width:44ch; margin-bottom:32px;}
.lede a, .about-row p a, .section-sub a, .check-list a{
  color:var(--gold-deep); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:3px;
  transition:color .15s ease;
}
.lede a:hover, .about-row p a:hover, .section-sub a:hover, .check-list a:hover{color:var(--ink);}
.hero-actions{display:flex; align-items:center; gap:24px;}
.btn-primary{
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:500; padding:14px 26px;
  border-radius:2px; text-decoration:none; display:inline-block;
  transition:background .15s; border:none; cursor:pointer;
}
.btn-primary{transition:background .16s ease, transform .16s ease, box-shadow .16s ease;}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(30,42,58,.55);}
.btn-ghost{
  font-size:14px; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--ink-faint); padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink);}

/* Generic panel */
.panel{
  background:var(--paper-dim); border:1px solid var(--rule);
  border-radius:4px; padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 40px -24px rgba(0,0,0,.28);
}
.panel-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.panel-head .t{font-size:13px; font-weight:500; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
.panel-head .p{font-size:12px; color:var(--ink-faint);}
.card-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--rule); gap:12px;
}
.card-row:last-child{border-bottom:none;}
.cr-term{font-size:14px; font-weight:500;}
.cr-sub{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.cr-right{text-align:right;}
.cr-num{font-size:14px;}
.cr-delta{font-size:12px; font-weight:500;}
.delta-up{color:var(--teal-deep);}
.delta-down{color:var(--red);}
svg.spark{display:block; margin-left:auto; flex-shrink:0;}

.tag{
  font-size:11px; font-weight:500; padding:4px 9px; border-radius:100px;
  text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap;
}
.tag-draft{background:#E4DFC9; color:var(--gold-deep);}
.tag-scheduled{background:#DCE6E2; color:var(--teal-deep);}
.tag-live{background:#E6D9D2; color:var(--red);}

/* Sections */
section{padding:88px 0;}
.section-head{max-width:560px; margin-bottom:56px;}
.section-label{
  font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--gold-deep); font-weight:500; margin-bottom:14px;
}
h2{font-size:32px; font-weight:600; letter-spacing:-0.01em; margin-bottom:14px;}
.section-sub{color:var(--ink-soft); font-size:16px;}

/* Process steps */
.process{border-top:1px solid var(--rule);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.step{padding:32px 32px 0 0; border-right:1px solid var(--rule);}
.step:last-child{border-right:none;}
.step-num{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-faint); margin-bottom:16px;}
.step h3{font-size:18px; font-weight:600; margin-bottom:10px;}
.step p{font-size:14.5px; color:var(--ink-soft);}

/* Feature grid */
.features{background:var(--paper-dim); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);}
.feat{background:var(--paper-dim); padding:28px 24px; transition:background .18s;}
.feat:hover{background:var(--paper);}
.feat h3{font-size:16px; font-weight:600; margin-bottom:8px;}
.feat p{font-size:13.5px; color:var(--ink-soft);}
.feat .icon{width:28px; height:28px; margin-bottom:16px; color:var(--teal-deep); transition:transform .2s;}
.feat:hover .icon{transform:translateY(-2px);}

/* Service cards (homepage) */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.service-card{
  border:1px solid var(--rule); border-radius:6px; padding:32px;
  text-decoration:none; color:var(--ink); display:block;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  background:var(--paper-dim);
}
.service-card:hover{border-color:var(--teal-deep); transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(30,42,58,.35);}
.service-card .sc-eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-deep); font-weight:500; margin-bottom:14px;}
.service-card h3{font-size:22px; font-weight:600; margin-bottom:10px;}
.service-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:20px;}
.service-card .sc-link{font-size:13.5px; font-weight:500; color:var(--teal-deep);}
.service-card.soon{opacity:0.6; cursor:default;}
.service-card.soon:hover{border-color:var(--rule); transform:none;}

.capability-row{
  margin-top:40px; padding-top:32px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:12px;
}
.capability-pill{
  font-size:13px; color:var(--ink-soft); border:1px solid var(--rule);
  border-radius:100px; padding:8px 16px;
}

/* Contact */
.contact{padding:96px 0;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.contact h2{font-size:34px; margin-bottom:16px;}
.contact-lede{color:var(--ink-soft); font-size:16px; max-width:40ch;}
.contact-meta{margin-top:32px; display:flex; gap:32px; font-size:13px; color:var(--ink-faint);}
.contact-meta div{display:flex; flex-direction:column; gap:4px;}
.contact-meta .k{text-transform:uppercase; letter-spacing:0.05em; font-size:11px;}
.contact-meta .v{color:var(--ink-soft); font-family:'IBM Plex Mono', monospace;}

.form-card{background:var(--paper-dim); border:1px solid var(--rule); border-radius:4px; padding:28px;}
.field{margin-bottom:18px;}
.field:last-of-type{margin-bottom:0;}
.field label{display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-bottom:7px; text-transform:uppercase; letter-spacing:0.04em;}
.field input, .field textarea{
  width:100%; background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:11px 12px; font-family:'Inter', sans-serif; font-size:14.5px; color:var(--ink);
  outline:none; transition:border-color .15s;
}
.field input:focus, .field textarea:focus{border-color:var(--teal-deep);}
.field textarea{resize:vertical; min-height:80px;}
.form-submit{
  width:100%; margin-top:6px; background:var(--ink); color:var(--paper);
  border:none; font-size:15px; font-weight:500; padding:13px 20px;
  border-radius:2px; cursor:pointer; transition:background .15s;
}
.form-submit:hover{background:var(--teal-deep);}
.form-note{font-size:12px; color:var(--ink-faint); margin-top:12px;}
.form-success{
  display:none; background:var(--paper-dim); border:1px solid var(--teal-deep);
  border-radius:4px; padding:28px; font-size:14.5px; color:var(--ink-soft);
}
.form-success strong{color:var(--ink); display:block; font-size:16px; margin-bottom:6px;}

footer{
  border-top:1px solid var(--rule); padding:32px 0;
  display:flex; justify-content:space-between; font-size:13px; color:var(--ink-faint);
}
footer a{text-decoration:none; color:var(--ink-faint);}
footer a:hover{color:var(--ink-soft);}
.footer-links{display:flex; gap:20px;}

/* ---------- Two-column content row (used on Hemsidor & Snabbmall) ---------- */
.about-row{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.about-row h2{font-size:28px; margin-bottom:14px;}
.about-row p{color:var(--ink-soft); font-size:15.5px; margin-bottom:16px;}
.about-row p:last-child{margin-bottom:0;}
.check-list{list-style:none; display:flex; flex-direction:column; gap:15px;}
.check-list li{display:flex; gap:12px; font-size:14.5px; color:var(--ink-soft); line-height:1.5;}
.check-list li::before{content:"→"; color:var(--gold-deep); font-weight:700; flex-shrink:0;}

@media (max-width:1080px) and (min-width:861px){
  .service-grid{grid-template-columns:repeat(2,1fr); gap:24px;}
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding:56px 0;}
  h1{font-size:38px;}
  .steps{grid-template-columns:1fr; gap:32px;}
  .step{border-right:none; padding-right:0; border-bottom:1px solid var(--rule); padding-bottom:32px;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .service-grid{grid-template-columns:1fr;}
  .about-row{grid-template-columns:1fr; gap:32px;}

  /* Collapsible mobile menu */
  nav{flex-wrap:wrap;}
  .nav-toggle{display:inline-flex;}
  .nav-cta{display:none;}
  .nav-links{
    display:none;
    order:3; flex-basis:100%;
    flex-direction:column; gap:0;
    margin-top:14px; padding-top:6px;
    border-top:1px solid var(--rule);
  }
  nav.nav-open .nav-links{display:flex;}
  .nav-links a{padding:14px 2px; border-bottom:1px solid var(--rule);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a::after{display:none;}
  .nav-links a.active{color:var(--gold-deep);}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes fp-rise{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hero .eyebrow   {animation:fp-rise .6s cubic-bezier(.16,.8,.3,1) both;}
  .hero h1         {animation:fp-rise .6s cubic-bezier(.16,.8,.3,1) .07s both;}
  .hero .lede      {animation:fp-rise .6s cubic-bezier(.16,.8,.3,1) .14s both;}
  .hero .hero-actions{animation:fp-rise .6s cubic-bezier(.16,.8,.3,1) .21s both;}
  .hero .panel     {animation:fp-rise .7s cubic-bezier(.16,.8,.3,1) .18s both;}

  /* Scroll reveal — only applied by main.js to off-screen elements,
     so content stays visible if JavaScript fails or is disabled. */
  .reveal-init{opacity:0; transform:translateY(24px);}
  .reveal-in{
    opacity:1; transform:none;
    transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  }
  .steps .step.reveal-in:nth-child(2){transition-delay:.09s;}
  .steps .step.reveal-in:nth-child(3){transition-delay:.18s;}
  .feat-grid .feat.reveal-in:nth-child(2){transition-delay:.06s;}
  .feat-grid .feat.reveal-in:nth-child(3){transition-delay:.12s;}
  .feat-grid .feat.reveal-in:nth-child(4){transition-delay:.18s;}
  .service-grid .service-card.reveal-in:nth-child(2){transition-delay:.08s;}
  .service-grid .service-card.reveal-in:nth-child(3){transition-delay:.16s;}
}