/* ====== Bas & Variabler ====== */
:root{
  --bg: #0c0f14;
  --bg-soft:#11151b;
  --card:#151a22cc;
  --text:#e9f0ff;
  --muted:#a8b2c3;
  --accent:#ffd166;
  --accent-2:#06d6a0;
  --accent-3:#118ab2;
  --glass: blur(8px) saturate(1.1);
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --grid-gap: clamp(14px, 2vw, 26px);
}
:root.dark{ /* samma variabler i dark är redan mörka; justera accenter vid behov */ }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #1b2130 0%, #0c0f14 50%, #0c0f14 100%);
  line-height:1.6;
  overflow-x:hidden;
}

/* ====== Dekorativa bakgrundsblobs ====== */
.bg-blobs{position:fixed; inset:-20vmax; pointer-events:none; z-index:-1; filter: blur(60px) saturate(1.2);}
.bg-blobs span{
  position:absolute; width:40vmax; height:40vmax; border-radius:50%;
  background: conic-gradient(from 0deg, #ffb703, #fb8500, #ffd166, #ffb703);
  animation: float 18s linear infinite;
  opacity:.35; mix-blend-mode:screen;
}
.bg-blobs span:nth-child(2){left:60%; top:-10%; background: conic-gradient(#06d6a0,#08b2a6,#74c69d,#06d6a0); animation-duration:22s}
.bg-blobs span:nth-child(3){left:-10%; top:60%; background: conic-gradient(#118ab2,#3a86ff,#90caf9,#118ab2); animation-duration:26s}
.bg-blobs span:nth-child(4){left:70%; top:70%; background: conic-gradient(#ef476f,#f78da7,#ffd6e0,#ef476f); animation-duration:30s}
@keyframes float{
  0%{transform: translate3d(0,0,0) rotate(0)}
  50%{transform: translate3d(10%, -8%, 0) rotate(180deg)}
  100%{transform: translate3d(0,0,0) rotate(360deg)}
}

/* ====== Header & Nav ====== */
.site-header{position:relative}
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px clamp(12px, 5vw, 40px);
  background: linear-gradient(180deg, rgba(12,15,20,.75), rgba(12,15,20,.35) 60%, rgba(12,15,20,0));
  backdrop-filter: blur(8px);
}
.logo{font-weight:800; letter-spacing:.5px; text-decoration:none; color:var(--text)}
.menu{display:flex; flex-wrap:wrap; gap:16px}
.menu a{
  color:var(--muted); text-decoration:none; font-weight:600; opacity:.9;
  padding:6px 10px; border-radius:12px; transition: .2s ease;
}
.menu a:hover{color:var(--text); background:#ffffff11}
.mode-toggle{
  appearance:none; border:0; background:#ffffff10; color:var(--text); border-radius:12px;
  padding:8px 12px; cursor:pointer; box-shadow: var(--shadow); transition: .2s;
}
.mode-toggle:hover{transform: translateY(-1px);}

/* ====== Hero ====== */
.hero{
  padding: clamp(60px, 12vw, 140px) clamp(16px, 6vw, 60px);
  text-align:center; position:relative;
}
.hero h1{
  font-family:"Space Grotesk", monospace;
  font-size: clamp(40px, 8vw, 120px);
  line-height:1.05; margin:0 0 16px;
  text-transform:uppercase; letter-spacing:.02em;
}
.hero .spark{
  background: linear-gradient(90deg, #ffd166, #ffb703, #fb8500);
  -webkit-background-clip: text; background-clip:text; color:transparent;
  filter: drop-shadow(0 8px 30px #ffb70344);
}
.hero .neon{
  color:#fff; text-shadow:
    0 0 10px #06d6a0aa, 0 0 24px #06d6a0aa, 0 0 48px #06d6a044;
}
.hero p{max-width:800px; margin-inline:auto; color:var(--muted); font-size:clamp(16px,2.2vw,20px)}
.cta{
  display:inline-block; margin-top:20px; padding:12px 18px; border-radius:14px;
  background: linear-gradient(135deg, #06d6a0, #118ab2);
  color:#05121b; font-weight:800; text-decoration:none; letter-spacing:.4px; box-shadow: var(--shadow);
  transform: translateZ(0); transition: transform .15s ease, filter .15s ease;
}
.cta:hover{transform: translateY(-2px); filter: brightness(1.05);}
.camel-silhouette{
  width:min(90vw, 700px); height:auto; margin-top:40px; opacity:.55;
  filter: drop-shadow(0 20px 40px #0008);
}
.camel-silhouette path{
  fill:url(#grad);
}
.camel-silhouette::before{content:"";}

/* ====== Panels ====== */
.panel{
  padding: clamp(40px, 8vw, 90px) clamp(16px, 6vw, 60px);
}
.intro{position:relative}
.fact-chips{
  display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:26px 0 0; list-style:none;
}
.fact-chips li{
  background:#ffffff12; border:1px solid #ffffff22; border-radius:999px; padding:8px 12px; backdrop-filter: var(--glass);
}

/* ====== Cards ====== */
.cards{
  display:grid; grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: var(--grid-gap);
}
.card{
  background: linear-gradient(180deg, #ffffff0e, #ffffff05);
  border: 1px solid #ffffff22; border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow); backdrop-filter: var(--glass);
  transform-style: preserve-3d; transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 20px 60px rgba(0,0,0,.45);}
.card h3{margin-top:0}
.card dl{display:grid; grid-template-columns: auto 1fr; gap:6px 14px; margin:14px 0 0}

/* ====== Superkrafter grid ====== */
.power-grid{
  display:grid; gap:var(--grid-gap);
  grid-template-columns: repeat(3, minmax(240px,1fr));
}
.power{
  background:#0e1420; border:1px solid #1e2433; border-radius: var(--radius);
  padding:18px; position:relative; overflow:hidden;
}
.power::after{
  content:""; position:absolute; inset:0; background: radial-gradient(600px 200px at 120% -10%, #06d6a022, transparent 60%);
}

/* ====== Anatomi interaktiv ====== */
.anatomy{
  background:
    radial-gradient(1400px 400px at 20% 10%, #0f1420 0%, transparent 60%),
    linear-gradient(180deg, #0b1018, #0c0f14);
  border-top:1px solid #ffffff10; border-bottom:1px solid #ffffff10;
}
.anatomy-diagram{
  position:relative; height:360px; border-radius: var(--radius);
  background: linear-gradient(180deg, #151a22, #0d1118);
  border:1px solid #ffffff14; box-shadow: var(--shadow);
  overflow:hidden;
}
.anatomy-diagram::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 40% 60%, #ffd16622, transparent 70%),
    radial-gradient(60% 80% at 60% 40%, #06d6a022, transparent 70%);
}
.dot{
  --size: 18px;
  width:var(--size); height:var(--size); border-radius:50%;
  position:absolute; border:2px solid #fff; background:#06d6a0; cursor:pointer;
  box-shadow:0 0 0 8px #06d6a022, 0 0 0 0 #06d6a000; transition: box-shadow .25s ease, transform .2s ease;
}
.dot:hover,.dot:focus{outline:none; box-shadow:0 0 0 8px #06d6a044, 0 10px 30px #0006; transform: scale(1.05);}
.dot-1{left:46%; top:22%}
.dot-2{left:58%; top:34%}
.dot-3{left:52%; top:30%}
.dot-4{left:40%; top:72%}

.tooltip{
  position:absolute; max-width:280px; background:#0d1118; border:1px solid #263041; color:var(--text);
  padding:10px 12px; border-radius:12px; font-size:14px; transform: translateY(-120%) scale(.95);
  opacity:0; pointer-events:none; transition:.2s ease;
}
.dot:focus + .tooltip, .dot:hover + .tooltip{
  opacity:1; transform: translateY(-130%) scale(1);
}
#t1{left:50%; top:22%}
#t2{left:62%; top:34%}
#t3{left:56%; top:30%}
#t4{left:44%; top:72%}
.anatomy-note{color:var(--muted); margin-top:12px}

/* ====== Myter vs fakta ====== */
.myth-grid{
  display:grid; gap:var(--grid-gap); grid-template-columns: repeat(2, minmax(260px,1fr));
}
.myth, .fact{
  padding:20px; border-radius: var(--radius);
  border:1px solid #ffffff1c; background:#121722dd; backdrop-filter: var(--glass);
}
.myth{border-left:4px solid #ef476f}
.fact{border-left:4px solid #06d6a0}

/* ====== Galleri ====== */
.gallery-rail{
  display:grid; grid-template-columns: repeat(4, minmax(160px,1fr)); gap: var(--grid-gap);
  perspective: 800px;
}
.tile{
  margin:0; height:160px; border-radius: 18px; overflow:hidden; position:relative;
  transform: rotateX(0) rotateY(0); transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
  background: linear-gradient(120deg, #1a2230, #0f1420);
  border:1px solid #1f2736;
  box-shadow: var(--shadow);
}
.tile:hover{transform: rotateX(6deg) rotateY(-6deg) translateY(-4px)}
.tile-face{
  position:absolute; inset:0; display:grid; place-items:center; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:#cfe8ff; font-size:20px;
}
/* Exempel på hur du ersätter med egna bilder:
.tile:nth-child(1){ background-image:url('dromedar.jpg'); background-size:cover; background-position:center;}
*/

/* ====== Källor ====== */
.sources ul{margin:0; padding-left:18px}
.sources li{color:var(--muted)}

/* ====== Footer ====== */
.site-footer{
  padding:40px 20px; text-align:center; color:#a5b0c0;
  border-top:1px solid #ffffff12; background: #0b0f15;
}

/* ====== Responsivitet ====== */
@media (max-width: 1000px){
  .power-grid{grid-template-columns: repeat(2, minmax(220px,1fr))}
  .cards{grid-template-columns: 1fr}
  .myth-grid{grid-template-columns: 1fr}
  .gallery-rail{grid-template-columns: repeat(2, minmax(140px,1fr))}
}
@media (max-width: 560px){
  .power-grid{grid-template-columns: 1fr}
  .hero .neon{display:block}
  .menu{display:none}
}

/* ====== Tillgänglighet ====== */
:focus-visible{outline: 2px dashed #06d6a0; outline-offset: 2px}