/* MTÜ Muhu Tagala — muhutagala.ee · DARK TACTICAL
   öö #0E100F · süsi #161917 · luu #D3CEC2 · Muhu oranž #E35414 · veri #A8383C · kivi #6E6A60 */

:root{
  --oo:#0E100F; --sysi:#161917; --paneel:#1B1F1C; --luu:#D3CEC2; --tuhm:#9A968B;
  --oranz:#E35414; --veri:#A8383C; --piir:#2A2E2A; --kivi:#6E6A60;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  background:var(--oo); color:var(--luu);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px; line-height:1.7;
}
h1,h2,h3,.disp{ font-family:'Archivo','Arial Black',sans-serif; letter-spacing:.02em; color:#E8E4D8; }
h1{font-weight:900; font-size:clamp(2rem,5vw,3.4rem); line-height:1.05; text-transform:uppercase}
h2{font-weight:800; font-size:clamp(1.35rem,3vw,1.9rem); text-transform:uppercase; margin-bottom:.6em}
h3{font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em}
a{color:var(--oranz)}
a:focus-visible,button:focus-visible{outline:3px solid var(--oranz); outline-offset:2px}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px}

/* vöökiri — subdued ember band */
.voo{
  height:10px; width:100%;
  background:repeating-linear-gradient(135deg, var(--oranz) 0 7px, #090A09 7px 10px, var(--veri) 10px 17px, #090A09 17px 20px);
  opacity:.85;
}

/* header */
header{background:var(--oo); border-bottom:1px solid var(--piir)}
.hbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--luu)}
.brand img{height:52px; width:auto; filter:drop-shadow(0 0 6px rgba(227,84,20,.25))}
.brand b{font-family:'Archivo'; font-weight:900; font-size:1.02rem; letter-spacing:.12em}
nav{display:flex; gap:2px; flex-wrap:wrap}
nav a{
  font-family:'Archivo'; font-weight:700; font-size:.84rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tuhm); text-decoration:none; padding:8px 12px; border-radius:2px;
}
nav a:hover{color:#E8E4D8; background:var(--paneel)}
nav a.on{color:var(--oranz); background:var(--paneel); box-shadow:inset 0 -2px 0 var(--oranz)}

/* hero */
.hero{padding:70px 0 60px; background:
  radial-gradient(ellipse 900px 420px at 30% 20%, rgba(227,84,20,.07), transparent 60%),
  radial-gradient(ellipse 700px 500px at 85% 90%, rgba(168,56,60,.05), transparent 60%);}
.hero .wrap{display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:52px; align-items:center}
.hero img{width:100%; height:auto; filter:drop-shadow(0 0 26px rgba(227,84,20,.18))}
.eyebrow{font-family:'Archivo'; font-weight:700; font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oranz); margin-bottom:12px}
.hero p.lead{font-size:1.1rem; margin:18px 0 28px; max-width:56ch; color:var(--luu)}
.btn{
  display:inline-block; font-family:'Archivo'; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--oranz); color:#0B0C0B; text-decoration:none; padding:14px 26px; border:1px solid var(--oranz);
  transition:background .15s, color .15s;
}
.btn:hover{background:#F06A2A}
.btn.ghost{background:transparent; color:var(--luu); border:1px solid var(--kivi)}
.btn.ghost:hover{border-color:var(--oranz); color:var(--oranz)}

/* sections */
section{padding:58px 0}
section.alt{background:var(--sysi)}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:26px}
.card{background:var(--paneel); border:1px solid var(--piir); border-top:3px solid var(--oranz); padding:26px 24px}
.card h3{margin-bottom:10px}
.card p{color:var(--tuhm)}
.card .prio{font-family:'Archivo'; font-weight:900; color:var(--oranz); font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-bottom:10px}

/* tiers */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:26px}
.tier{border:1px solid var(--piir); background:var(--paneel); padding:24px 20px; text-align:center}
.tier .nimi{font-family:'Archivo'; font-weight:900; text-transform:uppercase; letter-spacing:.14em; font-size:1rem; color:#E8E4D8}
.tier .hind{font-family:'Archivo'; font-weight:800; font-size:1.7rem; color:var(--oranz); margin:8px 0 4px}
.tier .selg{font-size:.92rem; color:var(--tuhm)}
.tier.top{border-color:var(--oranz); background:linear-gradient(180deg, rgba(227,84,20,.10), var(--paneel) 55%)}

/* photo placeholder */
.ph{
  border:1px dashed var(--kivi);
  background:
    repeating-linear-gradient(45deg, #141715 0 14px, #101311 14px 28px);
  min-height:220px; display:flex; align-items:center; justify-content:center;
  color:var(--kivi); font-family:'Archivo'; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem;
}

/* misc */
.fakt{display:flex; gap:10px; margin:8px 0}
.fakt b{min-width:150px; font-family:'Archivo'; font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; color:#E8E4D8}
.note{border-left:3px solid var(--oranz); background:var(--paneel); padding:16px 18px; margin:22px 0; font-size:.98rem; color:var(--luu)}
ol.steps{counter-reset:s; list-style:none; margin-top:20px}
ol.steps li{margin:14px 0; padding-left:56px; position:relative; color:var(--tuhm)}
ol.steps li b{color:var(--luu)}
ol.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:0; width:38px; height:38px;
  background:transparent; color:var(--oranz); border:1px solid var(--oranz);
  font-family:'Archivo'; font-weight:900; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
footer{background:#0A0C0B; color:var(--tuhm); padding:40px 0; border-top:1px solid var(--piir)}
footer b{color:var(--luu)}
footer a{color:var(--oranz)}
footer .small{font-size:.86rem; opacity:.8; margin-top:12px}

@media(max-width:760px){
  .hero .wrap{grid-template-columns:1fr; text-align:center}
  .hero img{max-width:230px; margin:0 auto}
  .hero p.lead{margin-inline:auto}
}