/* ================================================
   KUBIVENT.CSS — Bold Creative Youth Platform
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; }

/* ===== VARIABLES ===== */
:root {
    --black: #0D0D0D;
    --white: #FAFAF8;
    --cream: #F5F0E8;
    --purple: #7C3AED;
    --purple-light: #EDE9FE;
    --pink: #EC4899;
    --pink-light: #FCE7F3;
    --orange: #F97316;
    --orange-light: #FFEDD5;
    --teal: #0D9488;
    --teal-light: #CCFBF1;
    --yellow: #EAB308;
    --yellow-light: #FEF9C3;
    --gray-100: #F4F4F5;
    --gray-200: #E4E4E7;
    --gray-400: #A1A1AA;
    --gray-600: #52525B;
    --gray-800: #27272A;
    --font-display: 'Syne', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-xl: 48px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);
    --transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== BASE ===== */
body { font-family: var(--font-body); background: var(--white); color: var(--black); line-height: 1.6; overflow-x: hidden; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.15; }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.d1{transition-delay:.1s!important} .d2{transition-delay:.2s!important} .d3{transition-delay:.3s!important} .d4{transition-delay:.4s!important} .d5{transition-delay:.5s!important}

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; transition:all .4s ease; }
.navbar.scrolled { background:rgba(250,250,248,.94); backdrop-filter:blur(20px); box-shadow:0 2px 24px rgba(0,0,0,.08); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1200px; margin:0 auto; }
.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--black); }
.nav-logo img { width:36px; height:36px; object-fit:contain; border-radius:8px; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { font-size:.87rem; font-weight:600; padding:8px 13px; border-radius:100px; color:var(--gray-600); transition:var(--transition); }
.nav-links a:hover,.nav-links a.active { background:var(--black); color:var(--white); }
.nav-back { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; padding:8px 16px; border-radius:100px; background:var(--purple-light); color:var(--purple); transition:var(--transition); margin-left:8px; }
.nav-back:hover { background:var(--purple); color:white; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; padding:4px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--black); border-radius:2px; transition:var(--transition); }
.mobile-nav { display:none; position:fixed; inset:0; background:var(--white); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--black); padding:10px 28px; border-radius:var(--radius-md); transition:var(--transition); }
.mobile-nav a:hover { background:var(--purple-light); color:var(--purple); }
.mobile-nav-close { position:absolute; top:24px; right:24px; background:none; font-size:1.5rem; color:var(--black); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.9rem; padding:13px 26px; border-radius:100px; transition:var(--transition); cursor:pointer; border:none; white-space:nowrap; }
.btn-black { background:var(--black); color:var(--white); }
.btn-black:hover { background:var(--gray-800); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.btn-purple { background:var(--purple); color:white; }
.btn-purple:hover { background:#6D28D9; transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,.35); }
.btn-pink { background:var(--pink); color:white; }
.btn-pink:hover { background:#DB2777; transform:translateY(-2px); box-shadow:0 8px 24px rgba(236,72,153,.35); }
.btn-orange { background:var(--orange); color:white; }
.btn-orange:hover { background:#EA6C0A; transform:translateY(-2px); box-shadow:0 8px 24px rgba(249,115,22,.35); }
.btn-teal { background:var(--teal); color:white; }
.btn-teal:hover { background:#0F766E; transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,148,136,.35); }
.btn-outline-black { background:transparent; color:var(--black); border:2px solid var(--black); }
.btn-outline-black:hover { background:var(--black); color:white; transform:translateY(-2px); }
.btn-outline-purple { background:transparent; color:var(--purple); border:2px solid var(--purple); }
.btn-outline-purple:hover { background:var(--purple); color:white; transform:translateY(-2px); }
.btn-white { background:white; color:var(--black); }
.btn-white:hover { background:var(--cream); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.btn-sm { padding:9px 18px; font-size:.82rem; }
.btn-lg { padding:17px 34px; font-size:1rem; }

/* ===== SECTION LABEL ===== */
.section-label { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 13px; border-radius:100px; margin-bottom:14px; }
.section-label.purple { background:var(--purple-light); color:var(--purple); }
.section-label.pink { background:var(--pink-light); color:var(--pink); }
.section-label.orange { background:var(--orange-light); color:var(--orange); }
.section-label.teal { background:var(--teal-light); color:var(--teal); }
.section-label.yellow { background:var(--yellow-light); color:var(--yellow); }
.section-title-text { font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--black); line-height:1.1; margin-bottom:14px; }
.section-subtitle { font-size:.97rem; color:var(--gray-600); line-height:1.7; max-width:540px; }

/* ===== BADGE ===== */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:.73rem; font-weight:700; padding:4px 11px; border-radius:100px; }
.badge-purple { background:var(--purple-light); color:var(--purple); }
.badge-pink { background:var(--pink-light); color:var(--pink); }
.badge-orange { background:var(--orange-light); color:var(--orange); }
.badge-teal { background:var(--teal-light); color:var(--teal); }
.badge-yellow { background:var(--yellow-light); color:var(--yellow); }
.badge-black { background:var(--black); color:white; }
.badge-green { background:#DCFCE7; color:#15803D; }
.badge-gray { background:var(--gray-100); color:var(--gray-600); }
.badge-red { background:#FEE2E2; color:#DC2626; }

/* ===== CARD BASE ===== */
.card-base { background:white; border-radius:var(--radius-lg); border:1.5px solid var(--gray-200); transition:transform var(--transition),box-shadow var(--transition); overflow:hidden; }
.card-base:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* ===== FOOTER ===== */
.footer { background:var(--black); color:white; padding:64px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.footer-brand .logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .logo-wrap img { width:34px; height:34px; border-radius:8px; }
.footer-brand .logo-wrap span { font-family:var(--font-display); font-weight:800; font-size:1.2rem; }
.footer-brand p { color:rgba(255,255,255,.55); font-size:.88rem; line-height:1.7; margin-bottom:20px; }
.footer-socials { display:flex; gap:8px; }
.footer-socials a { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.9rem; transition:var(--transition); }
.footer-socials a:hover { background:var(--purple); color:white; }
.footer-col h4 { font-family:var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:9px; }
.footer-col ul li a { color:rgba(255,255,255,.65); font-size:.88rem; transition:color .2s; }
.footer-col ul li a:hover { color:white; }
.footer-col ul li { display:flex; align-items:flex-start; gap:8px; color:rgba(255,255,255,.6); font-size:.87rem; line-height:1.5; }
.footer-col ul li i { margin-top:3px; opacity:.5; flex-shrink:0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; display:flex; align-items:center; justify-content:space-between; }
.footer-bottom p { color:rgba(255,255,255,.35); font-size:.82rem; }
.footer-bottom a { color:rgba(255,255,255,.5); font-size:.82rem; }
.footer-bottom a:hover { color:white; }

/* ===== HERO MINI (inner pages) ===== */
.hero-mini { padding: 140px 0 60px; position:relative; overflow:hidden; }
.hero-mini-inner { position:relative; z-index:1; }
.hero-mini h1 { font-size:3.2rem; font-weight:800; margin-bottom:14px; }
.hero-mini p { font-size:1.05rem; color:var(--gray-600); max-width:520px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap:32px; }
    .section-title-text { font-size:2.1rem; }
}
@media (max-width: 768px) {
    .nav-links, .nav-back { display:none; }
    .nav-hamburger { display:flex; }
    .footer-grid { grid-template-columns:1fr; gap:28px; }
    .section-title-text { font-size:1.8rem; }
    .hero-mini h1 { font-size:2.2rem; }
    .btn-lg { padding:14px 26px; font-size:.92rem; }
}