/* HOME PAGE styles + welcome animation + hero video */
/* hero: the video covers the whole first screen, text sits on top */
.hero{position:relative;min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);display:flex;align-items:center;overflow:hidden;color:#fff;background:#0b2e1a}
.hero-video{position:absolute;inset:0;z-index:0}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video::after{content:"";position:absolute;inset:0;background:rgba(3,30,15,.38)}
.hero .container{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}
.hero-text{max-width:720px}
.welcome-eyebrow{display:block;font-size:.85rem;font-weight:600;text-transform:uppercase;color:#f3d27a;margin-bottom:14px;opacity:0;animation:eyebrowIn 1.3s ease .2s forwards;text-shadow:0 2px 8px rgba(0,0,0,.45)}
@keyframes eyebrowIn{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.34em}}
.welcome-name{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.08;margin-bottom:18px;color:#fff;perspective:600px;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.welcome-name .word{display:inline-block;white-space:nowrap;margin-right:.28em}
.welcome-name .char{display:inline-block;opacity:0;transform:translateY(70%) rotateX(-80deg);transform-origin:50% 100%;animation:charIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.9s + var(--i) * .06s)}
.welcome-name .char.lime{color:#b9e87a}
@keyframes charIn{to{opacity:1;transform:none}}
.welcome-rule{display:block;height:3px;width:0;background:var(--gold);margin:6px 0 20px;animation:ruleIn 1s ease 2.6s forwards}
@keyframes ruleIn{to{width:130px}}
.welcome-tagline{font-family:var(--font-head);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:#f3d27a;margin-bottom:14px;opacity:0;animation:fadeUp .9s ease 3s forwards;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero-lead{max-width:600px;font-size:1.08rem;color:rgba(255,255,255,.94);margin-bottom:30px;opacity:0;animation:fadeUp .9s ease 3.4s forwards;text-shadow:0 2px 10px rgba(0,0,0,.5)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.hero .btn-outline{color:#fff;border-color:#fff}
.hero .btn-outline:hover{background:#fff;color:var(--green);border-color:#fff}

/* intro + stats */
.intro .container{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.stats{display:grid;gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--radius);padding:20px 24px}
.stat b{display:block;font-family:var(--font-head);font-size:2rem;color:var(--accent);line-height:1.2}
.stat span{font-size:.9rem;color:var(--muted)}

/* applications preview tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:840px;margin:0 auto}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0}
.tile img{aspect-ratio:4/3;object-fit:cover}
.tile figcaption{padding:11px 14px;font-weight:500;font-size:.88rem;line-height:1.4;color:var(--green)}
.tile figcaption span{color:var(--gold-text);margin-right:8px;font-weight:600}
.tiles-more{text-align:center;margin-top:34px}

/* explore cards */
.explore{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.explore a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px}
.explore a:hover{border-color:var(--gold)}
.explore b{display:block;font-family:var(--font-head);font-size:1.15rem;color:var(--green);margin-bottom:6px}
.explore span{font-size:.85rem;color:var(--muted);display:block;margin-bottom:12px}
.explore em{font-style:normal;font-size:.85rem;color:var(--gold-text);font-weight:600}

@media(max-width:1000px){
  .intro .container{grid-template-columns:1fr}
  .hero{min-height:calc(100vh - 82px);min-height:calc(100svh - 82px)}
  .explore{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .hero .container{padding-top:48px;padding-bottom:48px}
  .explore{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr;max-width:300px}
  .hero-buttons .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .welcome-eyebrow,.welcome-name .char,.welcome-tagline,.hero-lead{animation:none!important;opacity:1;transform:none}
  .welcome-rule{animation:none;width:130px}
  .welcome-eyebrow{letter-spacing:.34em}
}