/* ============================================================
   seeky — landningssida (tjänstelinsen)
   Ljust läge först (dagtid, avsikt, förtroende), petrol som enda accent.
   Familjeformen delas med ikring — färg och läge skiljer.

   Byt primärläge: vill man ha mörkt som förstahandsval, flytta
   det mörka blocket till :root och det ljusa till (light). En sak.
   ============================================================ */

:root{
  --bg:        #f3f1e9;   /* varm off-white (ej #F4F1EA-tell:en) */
  --bg-2:      #fcfbf7;   /* subtil upphöjd yta */
  --accent:    #0f6e56;   /* petrol — den enda accenten (preliminär) */
  --accent-lit:#0b5744;   /* hover/aktiv (mörkare på ljus botten) */
  --on-accent: #fbfaf6;   /* text på petrolyta */
  --ring:      #b4b2a9;   /* dämpad grå — ytterringen, aldrig korall/svart */
  --ink:       #1b1a16;   /* varm nära-svart — ordbild + rubrik */
  --muted:     #6d6a61;   /* sekundär text */
  --faint:     #8a867c;   /* fotnot, streckat */
  --line:      #e4e0d6;   /* avgränsningar */
}

/* Mörkt läge — fallback, inte hjälten. Det gamla mörka, omfärgat till petrol. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:        #16130f;
    --bg-2:      #1e1a15;
    --accent:    #38ac8c;   /* petrol ljusnad för kontrast mot mörkt */
    --accent-lit:#5ac2a4;
    --on-accent: #101c18;
    --ring:      #5e564e;
    --ink:       #f3ede5;
    --muted:     #9a9086;
    --faint:     #6c635a;
    --line:      #2a251f;
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}

/* generativ bakgrund — ligger bakom allt (background.js ritar innehållet) */
#bg{
  position:fixed;
  inset:0;
  z-index:-1;
  display:block;
  pointer-events:none;
}

a{ color:inherit; }

.wrap{
  flex:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:20px clamp(20px,5vw,32px) 0;
  display:flex;
  flex-direction:column;
}

/* ---- sidhuvud: märke + ordmärke till vänster, wip-etikett till höger ---- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .wordmark{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--ink);           /* ordmärket i bläck; märket äger accenten (§5.1) */
  line-height:1;
}
.brand svg{ display:block; }

.wip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.wip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.45; transform:scale(.82); }
  50%    { opacity:1;   transform:scale(1); }
}

/* ---- hjälten: många-till-en, appens tes ritad ---- */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 0 12px;
}
.hero{
  width:min(360px, 82vw);
  margin:0 auto 6px;
}
.hero svg{ width:100%; height:auto; overflow:visible; }
.hero-caption{
  font-size:13px;
  color:var(--faint);
  letter-spacing:.02em;
  margin:0 0 28px;
}

h1{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:clamp(34px, 8.5vw, 62px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 18px;
  max-width:16ch;
  text-wrap:balance;
}
.lead{
  font-size:clamp(16px, 2.4vw, 19px);
  line-height:1.5;
  color:var(--muted);
  max-width:50ch;
  margin:0 auto 34px;
}
.lead b{ color:var(--ink); font-weight:600; }

/* ---- tipsa om en sajt (matar crawlern, §7.1) ---- */
.tip{
  margin:0 auto;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}
.tip a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px dotted var(--faint);
  padding-bottom:1px;
  white-space:nowrap;
}
.tip a:hover{ border-bottom-color:var(--accent); }

/* ---- fot ---- */
footer{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:26px clamp(20px,5vw,32px);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
  color:var(--faint);
}
footer .site{ color:var(--muted); letter-spacing:.01em; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (max-width:440px){
  footer{ flex-direction:column; align-items:flex-start; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  .wip .dot{ animation:none; opacity:.9; }
}