/* ===== v7 HOME — page-specific styles (loads after v7-shared.css) ===== */
@keyframes float { 0%,100%{transform:translate(0,0) rotate(0)} 33%{transform:translate(30px,-40px) rotate(5deg)} 66%{transform:translate(-20px,30px) rotate(-3deg)} }
@keyframes marquee-left { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marquee-right { from{transform:translateX(-50%)} to{transform:translateX(0)} }
@keyframes fade-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-down { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }

/* HERO */
.hero { padding: 88px 0 72px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(232,123,44,0.10) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 90% 100%, rgba(92,30,71,0.10) 0%, transparent 60%), radial-gradient(circle at 50% 50%, #fff 0%, rgba(252,244,234,0.4) 100%), var(--bg); }
.hero::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(92,30,71,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(92,30,71,0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, #000 30%, transparent 90%); mask-image: radial-gradient(ellipse 80% 80% at center, #000 30%, transparent 90%); pointer-events:none; z-index:0; }
.hero > .container, .hero > .hero-marquee-wrap { position: relative; z-index: 1; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.5; pointer-events:none; z-index:0; }
.hero .orb-1 { width:500px; height:500px; background:var(--saffron); top:-150px; right:-100px; animation:float 22s ease-in-out infinite; }
.hero .orb-2 { width:400px; height:400px; background:var(--pink); bottom:-100px; left:-150px; animation:float 28s ease-in-out infinite reverse; opacity:0.4; }
.hero .orb-3 { width:350px; height:350px; background:var(--lemon); top:30%; left:40%; opacity:0.3; animation:float 25s ease-in-out infinite; }
.hero-inner { position:relative; z-index:1; text-align:center; max-width:920px; margin:0 auto 72px; }
.hero-pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; background:#fff; border:1px solid var(--line); border-radius:var(--r-full); font-size:13px; font-weight:600; color:var(--ink); margin-bottom:26px; box-shadow:var(--shadow-sm); animation: fade-down 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.hero-pill-tag { background:var(--saffron); color:#fff; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { font-family:'Inter Tight',sans-serif; font-weight:800; font-size:84px; line-height:0.94; letter-spacing:-0.045em; margin-bottom:26px; color:var(--ink); animation: fade-up 0.9s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
.hero h1 .accent { background:var(--g-sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-style:italic; display:inline-block; padding:0.05em 0.12em 0.2em 0; margin:-0.05em -0.04em -0.2em 0; line-height:inherit; }
.hero h1 .scribble { position:relative; display:inline-block; }
.hero h1 .scribble::after { content:''; position:absolute; bottom:4px; left:-4px; right:-4px; height:14px; background:var(--lemon); z-index:-1; border-radius:4px; transform:rotate(-1deg); }
.hero p.lead { font-size:20px; color:var(--ink-2); line-height:1.5; margin:0 auto 34px; max-width:640px; font-weight:500; animation: fade-up 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both; }
.hero-cta { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; animation: fade-up 0.9s 0.45s cubic-bezier(0.22,1,0.36,1) both; }
.hero-cta .btn-primary { padding:16px 28px; font-size:16px; }
.hero-cta .btn-secondary { color:var(--ink); font-size:16px; font-weight:700; padding:15px 24px; background:#fff; border:1.5px solid var(--ink); border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.hero-cta .btn-secondary:hover { background:var(--ink); color:#fff; }
.hero-trust-line { font-size:14px; color:var(--muted); font-weight:500; animation: fade-up 0.9s 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.hero-trust-line strong { color:var(--ink); font-weight:700; }
.hero-trust-line .sep { color:var(--line-strong); margin:0 8px; }

/* HERO MARQUEE */
.hero-marquee-wrap { position:relative; z-index:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); animation: fade-up 1s 0.75s cubic-bezier(0.22,1,0.36,1) both; }
.hero-marquee-row { display:flex; gap:16px; width:max-content; margin-bottom:16px; padding:0 8px; }
.hero-marquee-row.row-1 { animation:marquee-left 60s linear infinite; }
.hero-marquee-row.row-2 { animation:marquee-right 70s linear infinite; }
.hero-marquee-wrap:hover .hero-marquee-row { animation-play-state:paused; }
.h-mini-card { flex-shrink:0; width:220px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow-md); transition:transform 0.2s; }
.h-mini-card:hover { transform:translateY(-3px) scale(1.02); }
.h-mini-card-photo { aspect-ratio:4/3; border-radius:10px; margin-bottom:10px; position:relative; overflow:hidden; background:var(--plum-soft); background-size:cover; background-position:center; }
.h-mini-card-tag { position:absolute; bottom:8px; left:8px; background:rgba(255,255,255,0.95); color:var(--ink); padding:3px 8px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase; }
.h-mini-card h5 { font-family:'Inter Tight',sans-serif; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; margin-bottom:2px; }
.h-mini-card-sub { font-size:11px; color:var(--muted); }

/* FEATURE / VERTICAL CARDS */
.verticals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feature-card { border-radius:var(--r-2xl); padding:30px 26px; min-height:340px; position:relative; overflow:hidden; cursor:pointer; transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; display:flex; flex-direction:column; color:#fff; }
.feature-card:hover { transform:translateY(-8px); box-shadow:0 28px 56px -16px rgba(31,14,24,0.35); }
.feature-content { flex:1; display:flex; flex-direction:column; }
.feature-num { font-family:'Inter Tight',sans-serif; font-size:26px; font-weight:800; opacity:0.55; letter-spacing:-0.02em; margin-bottom:8px; }
.feature-card h3 { font-family:'Inter Tight',sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; margin-bottom:12px; }
.feature-card p { font-size:13.5px; opacity:0.9; line-height:1.55; }
.feature-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:#fff; }
.feature-icon svg { width:22px; height:22px; }
.feature-cta { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.20); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:11px 16px; border-radius:var(--r-sm); font-size:13px; font-weight:800; color:#fff; width:fit-content; border:1px solid rgba(255,255,255,0.32); transition:all 0.2s ease; margin-top:24px; }
.feature-cta:hover { background:#fff; color:var(--ink); border-color:#fff; transform:translateX(4px); }
.feature-card.f1 { background: linear-gradient(155deg, rgba(255,184,0,0.82) 0%, rgba(255,107,44,0.88) 45%, rgba(232,92,74,0.94) 100%), url('https://images.unsplash.com/photo-1545389336-cf090694435e?w=800&q=80&auto=format&fit=crop') center/cover; }
.feature-card.f2 { background: linear-gradient(155deg, rgba(232,92,158,0.85) 0%, rgba(139,46,103,0.88) 50%, rgba(31,6,23,0.96) 100%), url('https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?w=800&q=80&auto=format&fit=crop') center/cover; }
.feature-card.f3 { background: linear-gradient(155deg, rgba(0,232,210,0.85) 0%, rgba(21,140,164,0.90) 50%, rgba(40,50,120,0.95) 100%), url('https://images.unsplash.com/photo-1588286840104-8957b019727f?w=800&q=80&auto=format&fit=crop') center/cover; }
.feature-card.f4 { background: linear-gradient(155deg, rgba(255,138,200,0.85) 0%, rgba(180,92,255,0.88) 45%, rgba(58,22,143,0.96) 100%), url('https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=800&q=80&auto=format&fit=crop') center/cover; }

/* WHY — simple info cards */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why-card { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px 26px; transition:all 0.25s; }
.why-card:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.why-ic { width:46px; height:46px; border-radius:12px; background:var(--plum-soft); color:var(--plum); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why-ic svg { width:24px; height:24px; }
.why-card h3 { font-family:'Inter Tight',sans-serif; font-size:18px; font-weight:800; letter-spacing:-0.015em; margin-bottom:8px; color:var(--ink); }
.why-card p { font-size:14px; color:var(--muted); line-height:1.55; }

/* RECOGNITION STRIP (accurate) */
.recog { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.recog-inner { display:flex; align-items:center; justify-content:center; gap:14px 40px; flex-wrap:wrap; text-align:center; }
.recog-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.recog-item b { font-family:'Inter Tight',sans-serif; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
.recog-item span { font-size:11.5px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:0.02em; }
.recog-sep { width:1px; height:34px; background:var(--line-strong); }

/* HORIZONTAL SCROLL ROWS (courses / classes) */
.hscroll-nav { display:flex; align-items:center; gap:10px; }
.hs-arrow { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.hs-arrow:hover { border-color:var(--ink); background:var(--ink); color:#fff; }
.hscroll { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 4px 18px; margin:0 -4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.hscroll::-webkit-scrollbar { height:8px; }
.hscroll::-webkit-scrollbar-track { background:transparent; }
.hscroll::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:999px; }
.hscroll > * { scroll-snap-align:start; flex:0 0 300px; width:300px; }

@media (max-width:1024px){ .hero h1{font-size:52px} .verticals-grid{grid-template-columns:repeat(2,1fr)} .why-grid{grid-template-columns:1fr} .recog-sep{display:none} .hscroll > *{flex-basis:280px;width:280px} .hs-arrow{display:none} }
@media (max-width:640px){ .hero h1{font-size:40px} .verticals-grid{grid-template-columns:1fr} .hero p.lead{font-size:17px} .hscroll > *{flex-basis:80vw;width:80vw} }