:root{--logo-h-desktop:80px;--logo-h-mobile:28px;}

:root{
  --bg:#0a0a0a;
  --panel:#111213;
  --panel-soft:rgba(17,18,19,.6);
  --text:#f5f5f5;
  --muted:#b3b3b3;
  --line:#242424;
  --accent:#14B478; /* swap to your HEX */
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:12px;padding:12px 0}
.logo{width:40px;height:40px;border:1px solid #343434;border-radius:12px;display:grid;place-items:center}
.brand{line-height:1}
.brand-title{font-weight:800}
.brand-sub{font-size:12px;color:#9a9a9a}
.nav{margin-left:auto;display:none;gap:6px}
.nav a{padding:8px 12px;border-radius:12px;color:#d0d0d0;text-decoration:none}

.auth{margin-left:auto}
.btn{padding:10px 14px;border-radius:14px;border:1px solid #2b2b2b;background:#151515;color:#fff;cursor:pointer}
.btn.outline{background:transparent}
.section{padding:48px 0}
.panel{background:var(--panel-soft);border:1px solid var(--line);border-radius:20px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero{position:relative;border-bottom-left-radius:24px;border-bottom-right-radius:24px;overflow:hidden}
.hero video{width:100%;height:52vh;object-fit:cover;opacity:.5;display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.6), #000)}
.hero .content{position:absolute;inset:0;display:flex;align-items:center}
.hero h1{font-size:40px;font-weight:800;max-width:820px}
.hero p{color:#d0d0d0;max-width:800px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{padding:10px 14px;border-radius:14px;background:#fff;color:#000;display:inline-flex;align-items:center;gap:8px}
.tag.sec{background:#1a1a1a;color:#e5e5e5}
.tag.out{border:1px solid #2b2b2b;background:transparent;color:#fff}
.card{border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.card .media img{display:block;width:100%;height:192px;object-fit:cover}
.card .body{padding:14px}
.h3{font-size:20px;font-weight:700;margin:0 0 6px 0}
.muted{color:#b3b3b3}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left}
.footer{border-top:1px solid var(--line);margin-top:40px}
.footer .inner{padding:24px 0}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eaeaea;color:#000;font-size:12px}
.progress{height:8px;background:#1f1f1f;border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--accent)}
.input, textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2b2b2b;background:#0d0d0d;color:#fff}
label{font-size:14px;color:#d0d0d0}
.dashed{border:1px dashed #2b2b2b;border-radius:16px;padding:16px}
.small{font-size:12px;color:#9a9a9a}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
/* responsive */
@media (min-width: 900px){ .nav{display:flex} }


/* === Header & Nav layout hardening === */
header{display:flex;align-items:center;gap:16px;padding:8px 16px;}
header .brand{display:flex;align-items:center;gap:10px;}
header .brand img{width:auto;display:block}
/* Support UL/OL or DIV based navs the same way */
.nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.nav ul,.nav ol{list-style:none;margin:0;padding:0}
.nav li{list-style:none;margin:0;padding:0}
/* Generic reset for lists inside header */
header ul, header ol{list-style:none;margin:0;padding:0}
/* Buttons/links sizing */
.nav a{display:inline-flex;align-items:center;gap:6px;padding:.5rem .8rem;border-radius:10px;text-decoration:none}


/* --- Logo sizing (responsive) --- */
.brand-link{display:inline-flex;align-items:center}
.brand img{height:var(--logo-h-mobile);width:auto;display:block}
@media (min-width: 640px){
  .brand img{height:var(--logo-h-desktop)}
}

/* --- Nav hover & active look --- */
:root{--nav-hover:#ff8a1f}
.nav a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;color:#d0d0d0;text-decoration:none}
/* --- Underline via background gradient (no layout shift) --- */
.nav a{
  position:relative;
  background-image: linear-gradient(#fff,#fff);
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0% 2px;
  transition: background-size .18s ease-in-out, color .15s ease-in-out;
  will-change: background-size;
}
.nav a:hover,
.nav a:focus-visible,
.nav a.active{
  color: var(--nav-hover);
  background-size: 100% 2px;
}


/* === Header spacing refinement === */
.header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:120px}
/* Push nav away from the brand; keep nav and auth separated */
.nav{margin-left:auto;display:flex;gap:10px;align-items:center}
.auth{margin-left:120px}
/* On very narrow screens let nav wrap below brand to avoid collisions */
@media (max-width: 520px){
  .nav{flex-basis:100%;justify-content:center;margin-left:0}
  .auth{margin-left:0}
}

/* --- Social handle display font --- */
.social-handle{font-family:'Alfa Slab One', serif; letter-spacing:.5px}

/* --- Footer VKD display font --- */
.vkd-mark{font-family:'Alfa Slab One', serif; letter-spacing:3px}

/* --- Inline VKD slab variant --- */
.vkd-slab{font-family:'Alfa Slab One', serif; letter-spacing:1px}

/* Instagram @VALEKULD – sama animatsioon nagu navil */
.social-handle a{
  position: relative;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0% 2px;
  transition: background-size .18s ease-in-out, color .15s ease-in-out;
  will-change: background-size;
}

.social-handle a:hover,
.social-handle a:focus-visible,
.social-handle a:active{
  color: var(--nav-hover, #ff8a1f);
  background-size: 100% 2px;
}


/* @MCD_TeamEstonia – custom underline sweep: blue → black → white */
.social-handle.mcd a{
  position: relative;
  color: inherit;
  text-decoration: none;

  /* gradient underline */
  background-image: linear-gradient(90deg, #1da1f2 0%, #000 60%, #fff 100%);
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0% 2px;

  transition: background-size .22s ease-in-out, color .15s ease-in-out;
  will-change: background-size;
}

.social-handle.mcd a:hover,
.social-handle.mcd a:focus-visible,
.social-handle.mcd a:active{
  /* soovi korral võid siia lisada ka tekstivärvi muutuse (nt siniseks) */
  /* color: #1da1f2; */
  background-size: 100% 2px; /* joon “rullub” vasakult paremale */
}


/* @MCD_TeamEstonia — sinimustvalge sweep tekstis + alljoon, lõpp seis jääb SMBW */
.social-handle.mcd a{
  position: relative;
  text-decoration: none;

  /* 3 kihti: 1) underline sweep, 2) text sweep, 3) base white text */
  background-image:
    linear-gradient(90deg, #1da1f2 0%, #000 50%, #fff 100%), /* underline */
    linear-gradient(90deg, #1da1f2 0%, #000 50%, #fff 100%), /* text sweep */
    linear-gradient(#fff, #fff);                              /* base white */
  background-position:
    left calc(100% - 2px), /* underline allservas */
    0 0,                   /* text sweep */
    0 0;                   /* base white */
  background-size:
    0% 2px,    /* underline start */
    0% 100%,   /* text sweep start */
    100% 100%; /* base white alguses */
  background-repeat: no-repeat;

  /* et taust värviks teksti */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;

  transition: background-size .32s ease-in-out;
  will-change: background-size;
}

/* hover/focus: pühime täislaiuses, tekst jääb SMBW (ei muutu oranžiks) */
.social-handle.mcd a:hover,
.social-handle.mcd a:focus-visible{
  background-size:
    100% 2px,  /* underline täislaius */
    100% 100%, /* text sweep täislaius */
    0% 100%;   /* base white taandub */
}

/* kui tahad, et klõpsul (active) jääks samuti SMBW */
.social-handle.mcd a:active{
  background-size: 100% 2px, 100% 100%, 0% 100%;
}

/* reduced motion: näita kohe lõpp-olekut */
@media (prefers-reduced-motion: reduce){
  .social-handle.mcd a{
    background-size: 100% 2px, 100% 100%, 0% 100%;
    transition: none;
  }
}

/* @MCD_TeamEstonia — default sama kui @VALEKULD, hoveril SMBW sweep */
.social-handle.mcd a{
  color: inherit;                 /* ← sama värv nagu @VALEKULD */
  font-weight: inherit;           /* hoia sama paksus */
  text-decoration: none;

  /* underline valmis (0%), tekst on tavaline */
  background-image:
    linear-gradient(90deg, #1da1f2 0%, #000 50%, #fff 100%), /* underline */
    linear-gradient(#fff, #fff);                              /* base text */
  background-position:
    left calc(100% - 2px),
    0 0;
  background-size:
    0% 2px,
    100% 100%;
  background-repeat: no-repeat;

  /* oluline: ÄRA tee teksti läbipaistvaks vaikimisi */
  -webkit-text-fill-color: currentColor;
  transition: background-size .28s ease-in-out;
}

.social-handle.mcd a:hover,
.social-handle.mcd a:focus-visible{
  /* lülita tekst “gradient-tekstiks” ainult hoveril */
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;

  /* sweep: underline täis + tekst täitub sinimustvalgega */
  background-image:
    linear-gradient(90deg, #1da1f2 0%, #000 50%, #fff 100%), /* underline */
    linear-gradient(90deg, #1da1f2 0%, #000 50%, #fff 100%); /* text sweep */
  background-size:
    100% 2px,
    100% 100%;
}