@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --bg:       #fdf8f2;
  --surface:  #ffffff;
  --panel:    #f5ede0;
  --teal:     #1a7a6e;
  --teal-lt:  #2a9d8f;
  --coral:    #e76f51;
  --sand:     #e9c46a;
  --navy:     #264653;
  --text:     #2d3436;
  --muted:    #7a8086;
  --border:   rgba(26,122,110,.15);
  --shadow:   rgba(38,70,83,.1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}

/* ─── BG TEXTURE ─── */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(circle at 15% 85%, rgba(231,111,81,.06) 0%,transparent 50%),
                    radial-gradient(circle at 85% 15%, rgba(42,157,143,.07) 0%,transparent 50%);
}

/* ─── PROGRESS ─── */
#progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--teal),var(--coral));
  z-index:9999;
}

/* ─── BACK TOP ─── */
#back-top {
  position:fixed; bottom:28px; right:28px; width:46px; height:46px;
  border-radius:50%; background:var(--teal); color:#fff;
  border:none; cursor:pointer; font-size:1.2em;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(15px);
  transition:opacity .3s,transform .3s,background .2s;
  box-shadow:0 4px 14px var(--shadow);
}
#back-top.visible { opacity:1; transform:translateY(0); }
#back-top:hover { background:var(--coral); }

/* ─── LAYOUT ─── */
.container { max-width:1140px; margin:0 auto; padding:0 28px 60px; }

/* ─── HEADER ─── */
header {
  padding:70px 40px 56px;
  text-align:center;
  position:relative;
  animation:riseIn .8s ease both;
}
.header-eyebrow {
  font-size:.8em; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-lt); margin-bottom:16px; font-weight:600;
}
h1 {
  font-family:'Lora',serif; font-weight:700;
  font-size:clamp(2.2em,5vw,4em);
  color:var(--navy); line-height:1.2; margin-bottom:18px;
}
h1 em { font-style:italic; color:var(--teal-lt); }
.header-lead {
  font-size:1.05em; color:var(--muted); max-width:580px; margin:0 auto 28px;
}
.header-divider {
  display:flex; align-items:center; gap:16px; margin:0 auto 0; max-width:400px;
}
.header-divider::before, .header-divider::after {
  content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.header-divider span { font-size:1.4em; }

/* ─── NAV ─── */
.nav-tabs {
  display:flex; flex-wrap:wrap; gap:8px; padding:16px 0;
  border-bottom:1px solid var(--border); margin-bottom:0;
  position:sticky; top:0; z-index:100; background:var(--bg);
}
.nav-tab {
  font-size:.82em; font-weight:500;
  padding:6px 16px; border-radius:20px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:all .2s;
}
.nav-tab:hover, .nav-tab.active {
  background:var(--teal); color:#fff; border-color:var(--teal);
}

/* ─── SECTIONS ─── */
.section {
  margin:50px 0;
  opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.section.visible { opacity:1; transform:translateY(0); }

h2 {
  font-family:'Lora',serif; font-weight:700;
  font-size:1.9em; color:var(--navy);
  margin-bottom:26px; padding-bottom:14px;
  border-bottom:2px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
h3 {
  font-family:'Lora',serif; font-weight:600;
  font-size:1.25em; color:var(--teal); margin:26px 0 12px;
}
h4 { font-weight:600; font-size:1em; color:var(--navy); margin:14px 0 6px; }
p  { margin-bottom:13px; font-size:1em; color:var(--text); }
ul, ol { margin-left:22px; margin-bottom:13px; }
li { margin-bottom:7px; font-size:.97em; }

/* ─── CARD GRID ─── */
.grid   { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:18px 0; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin:18px 0; }

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px;
  box-shadow:0 2px 12px var(--shadow);
  transition:transform .25s, box-shadow .25s;
}
.card:hover { transform:translateY(-5px); box-shadow:0 8px 28px rgba(26,122,110,.12); }
.card-accent { border-top:3px solid var(--teal-lt); }
.card-coral  { border-top:3px solid var(--coral); }
.card-sand   { border-top:3px solid var(--sand); }
.card-icon { font-size:2em; margin-bottom:10px; }
.card h4 { color:var(--teal); margin-bottom:8px; font-size:1em; }

/* ─── PANEL ─── */
.panel {
  background:var(--panel); border-left:4px solid var(--teal);
  border-radius:0 10px 10px 0; padding:20px 24px; margin:16px 0;
}
.panel-coral  { border-left-color:var(--coral); }
.panel-sand   { border-left-color:var(--sand); }
.panel-navy   { background:var(--navy); color:#fff; border-radius:12px; border:none; padding:24px; }
.panel-navy h4, .panel-navy h3 { color:var(--sand); }
.panel-navy p, .panel-navy li { color:rgba(255,255,255,.85); }

/* ─── TABLE ─── */
table { width:100%; border-collapse:collapse; margin:16px 0; background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:0 2px 10px var(--shadow); }
th    { background:var(--teal); color:#fff; padding:12px 16px; text-align:left; font-weight:600; font-size:.9em; }
td    { padding:11px 16px; border-bottom:1px solid var(--border); font-size:.95em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(42,157,143,.05); }

/* ─── STATS ─── */
.stats-row { display:flex; flex-wrap:wrap; gap:14px; margin:22px 0; }
.stat {
  flex:1; min-width:120px; text-align:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:18px 10px;
  box-shadow:0 2px 10px var(--shadow);
}
.stat-num { font-family:'Lora',serif; font-size:2em; color:var(--teal); font-weight:700; }
.stat-lbl { font-size:.78em; color:var(--muted); margin-top:4px; }

/* ─── COMPARISON TABLE (Procaryotes vs Eucaryotes) ─── */
.compare {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  margin:18px 0; box-shadow:0 2px 10px var(--shadow);
}
.compare-cell { padding:12px 16px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); font-size:.9em; }
.compare-cell:last-child { border-right:none; }
.compare-head { background:var(--teal); color:#fff; font-weight:600; }
.compare-head-coral { background:var(--coral); color:#fff; font-weight:600; }
.compare-label { background:var(--panel); font-weight:500; }

/* ─── ORGANELLE DIAGRAM LEGEND ─── */
.organelle-list { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.org-item {
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:8px 14px; font-size:.88em;
}
.org-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }

/* ─── TIMELINE ─── */
.timeline { padding-left:22px; border-left:2px solid var(--border); margin:18px 0; }
.tl-item { position:relative; margin-bottom:22px; }
.tl-item::before {
  content:''; position:absolute; left:-28px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--teal-lt); border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--teal-lt);
}
.tl-year { font-weight:700; color:var(--teal); font-size:.88em; margin-bottom:2px; }

/* ─── QUOTE ─── */
blockquote {
  border-left:4px solid var(--coral);
  padding:16px 24px; margin:18px 0;
  background:rgba(231,111,81,.05);
  border-radius:0 10px 10px 0;
  font-family:'Lora',serif; font-style:italic;
  color:var(--navy);
}
blockquote cite { display:block; margin-top:8px; font-style:normal; font-weight:600; font-size:.85em; color:var(--coral); }

/* ─── ANIMATIONS ─── */
@keyframes riseIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:700px) {
  h1 { font-size:2em; }
  .grid, .grid-2 { grid-template-columns:1fr; }
  .stats-row { flex-direction:column; }
  .compare { grid-template-columns:1fr; }
  .nav-tabs { position:relative; }
}