/* ============================================================
   CRO DAKAR TEAM — midnight editorial, animated
   ============================================================ */

:root{
  --bg:#111111;
  --bg-raise:#171717;
  --text:#ffffff;
  --muted:#9a9a9a;
  --muted-dim:#6f6f6f;
  --hair: rgba(255,255,255,0.12);
  --accent:#e8393a; /* Croatian-flag red, used sparingly */
  --maxw:1240px;
  --ease: cubic-bezier(.16,.84,.44,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-0.05px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.muted{color:var(--muted);}

::selection{background:var(--accent);color:#fff;}

/* scrollbar (webkit) */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#333;border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:#444;}

/* type scale */
.display{font-size:clamp(40px,7vw,84px);line-height:0.98;letter-spacing:-1.5px;font-weight:700;text-transform:uppercase;}
.h-lg{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-0.5px;font-weight:700;text-transform:uppercase;}
.h{font-size:28px;line-height:1.2;letter-spacing:-0.2px;font-weight:400;}
.h-sm{font-size:22px;line-height:1.4;letter-spacing:-0.1px;font-weight:600;}
.kicker{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block;}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.10s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.18s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.34s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.42s;}

/* text link */
.link{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;letter-spacing:.02em;
  padding-bottom:4px;
}
.link::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--text);transition:right .35s var(--ease);
}
.link:hover::after{right:0;}
.link .arrow{transition:transform .35s var(--ease);}
.link:hover .arrow{transform:translateX(4px);}

/* progress bar */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;background:var(--accent);
  width:0%;z-index:200;transition:width .1s linear;
}

/* NAV */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(17,17,17,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
header.nav.scrolled{
  background:rgba(17,17,17,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:22px;width:auto;}
nav.links{display:flex;gap:36px;}
nav.links a{
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  position:relative;padding-bottom:6px;
  transition:color .25s;
}
nav.links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--text);transition:width .3s var(--ease);
}
nav.links a:hover{color:var(--text);}
nav.links a:hover::after{width:100%;}
nav.links a.active{color:var(--text);}
nav.links a.active::after{width:100%;background:var(--accent);}
.burger{display:none;background:none;border:0;color:var(--text);font-size:0;cursor:pointer;width:32px;height:24px;position:relative;z-index:110;}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--text);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:11px;}
.burger span:nth-child(3){top:22px;}
.burger.open span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:0;background:var(--bg);z-index:99;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 40px;
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-size:34px;text-transform:uppercase;font-weight:700;padding:14px 0;color:var(--muted);border-bottom:1px solid var(--hair);}
.mobile-menu a:hover{color:var(--text);}

/* HERO */
#hero{position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1.12) translate(0,0);}
  100%{transform:scale(1.0) translate(-1.5%,-1%);}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 30%, rgba(10,10,10,.65) 78%, rgba(10,10,10,.96) 100%),
    linear-gradient(270deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 45%);
}
.hero-content{position:relative;z-index:2;padding:0 0 32px;width:100%;text-align:right;}
.hero-eyebrow{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;
  opacity:0;transform:translateY(16px);animation:fadeUp .9s var(--ease) .15s forwards;
}
.hero-title{
  max-width:900px;margin-left:auto;opacity:0;transform:translateY(24px);animation:fadeUp 1s var(--ease) .3s forwards;
  font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  line-height:0.92;
}
.hero-title span{display:block;}
.hero-title span:last-child{color:var(--muted);-webkit-text-stroke:1px var(--text);}
.hero-lead{max-width:540px;margin-left:auto;margin-top:26px;font-size:18px;color:var(--muted);font-weight:300;
  opacity:0;transform:translateY(16px);animation:fadeUp .9s var(--ease) .5s forwards;}
.hero-cta{margin-top:36px;opacity:0;transform:translateY(16px);animation:fadeUp .9s var(--ease) .65s forwards;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

.hero-stats{
  position:relative;z-index:2;
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hero-stats .stat{padding:22px 0 0;border-left:1px solid var(--hair);padding-left:24px;}
.hero-stats .stat:first-child{border-left:0;}
.stat-num{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;}
.stat-label{font-size:13px;color:var(--muted);margin-top:6px;max-width:220px;}

.scroll-cue{
  position:absolute;left:40px;bottom:28px;z-index:2;
  display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;animation:fadeUp .9s var(--ease) .9s forwards;
}
.scroll-cue .line{width:1px;height:34px;background:var(--muted);position:relative;overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute;top:-100%;left:0;right:0;height:100%;background:var(--text);animation:cueDrop 1.8s ease-in-out infinite;}
@keyframes cueDrop{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

/* SECTIONS */
section{padding:140px 0;border-bottom:1px solid var(--hair);position:relative;}
section:last-of-type{border-bottom:0;}
.section-head{max-width:640px;}
.section-head p{margin-top:20px;color:var(--muted);font-weight:300;font-size:17px;}

/* photo frame with hover zoom */
.frame{overflow:hidden;position:relative;background:#1b1b1b;}
.frame img{transition:transform .8s var(--ease);width:100%;height:100%;object-fit:cover;}
.frame:hover img{transform:scale(1.06);}
.frame .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 20px;
  font-size:12px;color:rgba(255,255,255,.7);
  background:linear-gradient(0deg, rgba(0,0,0,.6), transparent);
}

/* ABOUT */
.about-lead{font-size:18px;font-weight:300;color:var(--text);max-width:720px;margin-top:20px;}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start;margin-top:20px;}
.about-photo{aspect-ratio:4/5;}
.about-banner{margin-top:64px;aspect-ratio:21/9;}
.list-2col{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-top:56px;}
.list-3col{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;margin-top:56px;}
.mission-item{padding:28px 0;border-top:1px solid var(--hair);}
.mission-item .idx{font-size:13px;color:var(--accent);margin-bottom:10px;letter-spacing:.05em;}
.mission-item h3{font-size:19px;font-weight:600;letter-spacing:-0.1px;margin-bottom:8px;}
.mission-item p{color:var(--muted);font-size:14px;font-weight:300;max-width:340px;}

/* DAKAR */
.dakar-wide{margin-top:64px;aspect-ratio:21/9;}
.dakar-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.dakar-gallery .frame{aspect-ratio:4/5;}
.row-list{margin-top:72px;}
.row-list .row{
  display:grid;grid-template-columns:150px 1fr;gap:40px;
  padding:30px 0;border-top:1px solid var(--hair);
}
.row-list .row:first-child{border-top:1px solid var(--hair);}
.row-list .row .yr{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px;}
.row-list .row h3{font-size:19px;font-weight:600;letter-spacing:-0.1px;margin-bottom:8px;}
.row-list .row p{color:var(--muted);font-size:14px;font-weight:300;max-width:600px;}

/* RALLY */
.rally-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:64px;align-items:start;}
.rally-photo{aspect-ratio:4/3;margin-bottom:48px;}
.fact-row{padding:18px 0;border-top:1px solid var(--hair);}
.fact-row:first-child{border-top:1px solid var(--hair);}
.fact-row .yr{font-size:13px;color:var(--muted);margin-bottom:6px;font-variant-numeric:tabular-nums;}
.fact-row p{font-size:14px;font-weight:300;}
.next-event{background:var(--bg-raise);padding:36px;position:relative;}
.next-event::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);}
.next-event .label{font-size:13px;color:var(--muted);margin-bottom:16px;letter-spacing:.08em;text-transform:uppercase;}
.next-event .h-lg{margin-bottom:8px;}
.next-event .date{font-size:19px;font-weight:300;color:var(--muted);margin-bottom:32px;}
.meta-row{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--hair);font-size:14px;}
.meta-row:last-of-type{border-bottom:1px solid var(--hair);}
.meta-row .k{color:var(--muted);width:120px;flex-shrink:0;}
.organizers{margin-top:22px;font-size:13px;color:var(--muted);font-weight:300;}

/* financial reports */
.report-list{margin-top:56px;}
.report{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding:30px 0;border-top:1px solid var(--hair);
  transition:padding-left .3s var(--ease);
}
.report:first-child{border-top:1px solid var(--hair);}
.report:hover{padding-left:12px;}
.report h3{font-size:19px;font-weight:600;letter-spacing:-0.1px;}
.report p{color:var(--muted);font-size:13px;font-weight:300;margin-top:6px;}
.report .link{white-space:nowrap;}

/* partners */
.partner-list{margin-top:56px;display:flex;flex-direction:column;gap:14px;}
.partner{
  padding:32px 0;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  transition:padding-left .3s var(--ease);
}
.partner:hover{padding-left:12px;}
.partner:first-child{border-top:1px solid var(--hair);}
.partner h3{font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:-.3px;}
.partner p{color:var(--muted);font-size:14px;max-width:380px;}
.partner img.logo{height:34px;width:auto;filter:grayscale(1) brightness(2);opacity:.85;}

.partner-banner{
  border-top:none;
  border-radius:14px;
  background:var(--bg-raise);
  border:1px solid var(--hair);
  padding:34px 40px;
  margin-bottom:0;
}
.partner-banner:first-child{border-top:none;}
.partner-banner:hover{padding-left:40px;}
.partner-banner h3{color:var(--text);}
.partner-banner p{max-width:none;}

.partner-featured{
  border:none;
  background:linear-gradient(135deg, #d92a2a 0%, var(--accent) 50%, #a81515 100%);
}
.partner-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:8px;}
.partner-featured h3{font-size:28px;color:#fff;}
.logo-featured{height:46px;width:auto;filter:none;opacity:1;}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:64px;}
.info-row{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--hair);font-size:15px;}
.info-row:first-child{border-top:1px solid var(--hair);}
.info-row:last-of-type{border-bottom:1px solid var(--hair);}
.info-row .k{color:var(--muted);width:110px;flex-shrink:0;font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px;}
.social-line{margin-top:24px;font-size:14px;display:flex;gap:22px;}
.cta-box{background:var(--bg-raise);padding:36px;position:relative;}
.cta-box::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);}
.cta-box p{color:var(--muted);font-size:15px;font-weight:300;max-width:420px;margin:14px 0 26px;}

footer{padding:56px 0;border-top:1px solid var(--hair);}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}
footer p{font-size:12px;color:var(--muted-dim);}
footer .badge{height:60px;width:auto;opacity:.85;}
.back-to-top{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.back-to-top:hover{color:var(--text);}

/* dakar "saznaj vise" link */
.dakar-more{margin-top:48px;}

/* povijest (full history) page */
.povijest-hero{padding:180px 0 64px;border-bottom:1px solid var(--hair);}
.back-link{font-size:13px;}
.povijest-lead{margin-top:24px;font-size:18px;font-weight:300;color:var(--text);max-width:760px;}
.povijest-lead ~ .povijest-lead{color:var(--muted);font-size:16px;}
.chapter-list{margin-top:8px;}
.chapter{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:48px 0;border-top:1px solid var(--hair);}
.chapter:first-child{border-top:1px solid var(--hair);}
.chapter-year{font-size:15px;color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums;}
.chapter-body h3{font-size:22px;font-weight:600;letter-spacing:-0.1px;margin-bottom:12px;}
.chapter-body p{color:var(--muted);font-size:15px;font-weight:300;max-width:680px;margin-bottom:14px;}
.chapter-body p:last-of-type{margin-bottom:0;}
.chapter-photo{margin-top:22px;aspect-ratio:16/9;max-width:680px;}

@media (max-width:1024px){
  .about-grid,.rally-grid,.contact-grid{grid-template-columns:1fr;gap:48px;}
  .list-3col{grid-template-columns:1fr 1fr;row-gap:32px;}
  .dakar-gallery{grid-template-columns:1fr 1fr;}
  .hero-stats{grid-template-columns:1fr;}
  .hero-stats .stat{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:20px;}
  .hero-stats .stat:first-child{border-top:0;}
}
@media (max-width:860px){
  .wrap{padding:0 24px;}
  nav.links{display:none;}
  .burger{display:block;}
  .list-2col{grid-template-columns:1fr;}
  .list-3col{grid-template-columns:1fr;}
  .row-list .row{grid-template-columns:1fr;gap:8px;}
  .chapter{grid-template-columns:1fr;gap:10px;}
  section{padding:88px 0;}
  #hero{height:auto;min-height:100vh;padding-top:120px;}
  .hero-content{padding-bottom:56px;}
  .hero-stats .stat{padding-top:18px;}
}