/* 68VIP3 — Cyan Glow Design System */
/* Part 1: Variables + Reset + Base */

/* Fonts loaded via <link> in head.php for better performance */

:root {
  --bg-deep: #020617;
  --bg-surface: #0F172A;
  --bg-card: #1E293B;
  --bg-glass: rgba(15,23,42,.7);
  --cyan: #22D3EE;
  --cyan-deep: #06B6D4;
  --sky: #38BDF8;
  --emerald: #34D399;
  --gold: #FBBF24;
  --text-1: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #8E9DB3;
  --border: rgba(255,255,255,.08);
  --border-cyan: rgba(34,211,238,.2);
  --glow-cyan: 0 0 30px rgba(34,211,238,.25);
  --glow-sky: 0 0 20px rgba(56,189,248,.2);
  --radius: 16px;
  --radius-sm: 8px;
  --transition: .3s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden; width:100% }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg-deep);
  color:var(--text-1);
  line-height:1.7;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  position:relative;
}
/* Media never exceeds its container */
img,svg,video,canvas,iframe { max-width:100%; height:auto }
a { text-decoration:none; color:inherit; transition:color var(--transition) }
a:hover { color:var(--cyan) }
ul,ol { list-style:none }
img { max-width:100%; height:auto; display:block }
button { cursor:pointer; border:none; font-family:inherit; background:none }

/* ===== ACCESSIBILITY ===== */
.skip-link {
  position:absolute; top:-100%; left:50%; transform:translateX(-50%);
  background:var(--cyan); color:var(--bg-deep); padding:12px 24px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:700; font-size:14px; z-index:10000;
  transition:top .2s;
}
.skip-link:focus { top:0; color:var(--bg-deep) }
*:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 20px }
.section { padding:80px 0 }
.section-header { text-align:center; margin-bottom:60px }
.section-header h2 {
  font-family:'Space Grotesk',sans-serif;
  font-size:36px; font-weight:700;
  margin-bottom:16px;
}
.section-header p { font-size:18px; color:var(--text-2); max-width:700px; margin:0 auto }

/* Headings */
h1,h2,h3,h4,h5,h6 { font-family:'Space Grotesk',sans-serif; line-height:1.3 }

/* Buttons */
.btn { display:inline-block; padding:12px 28px; border-radius:var(--radius-sm); font-weight:600; font-size:15px; transition:all var(--transition); text-align:center; cursor:pointer }
.btn-primary { background:linear-gradient(135deg,var(--cyan),var(--sky)); color:var(--bg-deep) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--glow-cyan); color:var(--bg-deep) }
.btn-cta { background:linear-gradient(135deg,var(--emerald),#059669); color:#fff }
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 0 25px rgba(52,211,153,.3); color:#fff }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text-1) }
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan) }
.btn-gold { background:linear-gradient(135deg,var(--gold),#D97706); color:var(--bg-deep) }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 20px rgba(251,191,36,.3); color:var(--bg-deep) }
.btn-sm { padding:8px 18px; font-size:13px }
.btn-lg { padding:16px 36px; font-size:17px }

/* Cards */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:all var(--transition) }
.card:hover { transform:translateY(-4px); border-color:var(--cyan-deep); box-shadow:var(--glow-cyan) }
.card h3 { font-size:20px; font-weight:600; margin-bottom:10px }
.card p { color:var(--text-2); font-size:15px; line-height:1.6 }
.card-img { width:100%; border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px }
.card-img img { width:100%; height:200px; object-fit:cover; transition:transform var(--transition) }
.card:hover .card-img img { transform:scale(1.05) }

.glass-card { background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--border-cyan); border-radius:var(--radius) }

/* Grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px }

/* App download bar (mobile only) — hidden on desktop, shown via @media below */
.app-bar { display:none }

/* Header + Mega Menu */
.header { background:var(--bg-surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1000; backdrop-filter:blur(12px) }
.header-content { display:flex; justify-content:space-between; align-items:center; padding:14px 0; gap:clamp(8px,2vw,16px) }
.logo { flex-shrink:0; display:flex; align-items:center; transition:transform .3s }
.logo:hover { transform:scale(1.05); color:inherit }
.logo img { height:clamp(26px,6vw,38px); width:auto }
.nav { display:flex; gap:6px; align-items:center; flex-wrap:nowrap }
.nav > a, .nav-dropdown > .nav-trigger { font-weight:500; font-size:15px; color:var(--text-2); transition:color .3s; white-space:nowrap; padding:8px 12px; border-radius:var(--radius-sm); background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px }
.nav > a:hover, .nav-dropdown > .nav-trigger:hover { color:var(--cyan) }
.nav > a.active, .nav-dropdown.active > .nav-trigger { color:var(--cyan) }
.nav > a i, .nav-trigger i, .footer-col a i { margin-right:4px; font-size:13px }
.nav-trigger .fa-chevron-down { font-size:10px; transition:transform .3s; margin-left:2px }
.nav-dropdown { position:relative }
.nav-dropdown:hover > .nav-trigger .fa-chevron-down, .nav-dropdown.open > .nav-trigger .fa-chevron-down { transform:rotate(180deg) }
.mega-panel { position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:420px; background:var(--bg-card); border:1px solid var(--border-cyan); border-radius:var(--radius); padding:20px; opacity:0; visibility:hidden; transition:all .25s ease; pointer-events:none; box-shadow:var(--glow-cyan); z-index:1001 }
.nav-dropdown:hover > .mega-panel, .nav-dropdown.open > .mega-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) }
.mega-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:4px }
.mega-grid.cols-3 { grid-template-columns:repeat(3,1fr) }
.mega-link { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-2); font-size:14px; font-weight:500; transition:all .2s; text-decoration:none; min-height:44px }
.mega-link:hover { background:rgba(34,211,238,.08); color:var(--cyan) }
.mega-link i { font-size:16px; width:22px; text-align:center; color:var(--cyan); flex-shrink:0 }
.header-actions { display:flex; align-items:center; gap:clamp(6px,1.5vw,10px); flex-shrink:0 }
.app-btn { background:linear-gradient(135deg,var(--gold),#D97706); color:var(--bg-deep)!important; padding:8px clamp(10px,2.5vw,18px); border-radius:var(--radius-sm); font-weight:700; font-size:clamp(12px,2.5vw,14px); white-space:nowrap; transition:all .3s; display:inline-flex; align-items:center; gap:6px }
.app-btn:hover { transform:translateY(-1px); box-shadow:0 0 20px rgba(251,191,36,.35); color:var(--bg-deep)!important }
.cta-btn { background:linear-gradient(135deg,var(--cyan),var(--sky)); color:var(--bg-deep)!important; padding:8px clamp(10px,2.5vw,20px); border-radius:var(--radius-sm); font-weight:600; font-size:clamp(12px,2.5vw,14px); white-space:nowrap; transition:all .3s }
.cta-btn:hover { transform:translateY(-1px); box-shadow:var(--glow-cyan); color:var(--bg-deep)!important }
.btn-login { border:1px solid var(--border); color:var(--text-1); padding:8px clamp(10px,2.5vw,20px); border-radius:var(--radius-sm); font-weight:600; font-size:clamp(12px,2.5vw,14px); white-space:nowrap; transition:all .3s }
.btn-login:hover { border-color:var(--cyan); color:var(--cyan) }
.mobile-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; font-size:20px; line-height:1; color:var(--cyan); background:rgba(34,211,238,.08); border:1px solid var(--border-cyan); border-radius:12px; transition:all .25s ease }
.mobile-toggle:hover { background:rgba(34,211,238,.16); color:var(--cyan) }
.mobile-toggle:active { transform:scale(.92) }
.mobile-toggle.is-open { background:var(--cyan); color:var(--bg-deep); border-color:var(--cyan) }

/* Banner Slider */
.banner-slider { position:relative; width:100%; overflow:hidden; background:var(--bg-deep) }
.slider-track { position:relative; width:100%; aspect-ratio:2.8/1; min-height:220px }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity .8s ease; z-index:1 }
.slide.active { opacity:1; z-index:2 }
.slide img { width:100%; height:100%; object-fit:cover }
.slide-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(2,6,23,.88) 0%,rgba(2,6,23,.5) 50%,transparent 100%); display:flex; align-items:center }
.slide-content { max-width:600px; padding:0 60px }
.slide-content h1,.slide-content h2 { font-size:42px; font-weight:800; color:#fff; margin-bottom:16px; line-height:1.15 }
.slide-content .highlight { background:linear-gradient(135deg,var(--cyan),var(--sky)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.slide-content p { font-size:16px; color:rgba(255,255,255,.8); margin-bottom:24px; max-width:480px }
.slide-buttons { display:flex; gap:12px; flex-wrap:wrap }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .3s }
.slider-arrow:hover { background:var(--cyan); border-color:var(--cyan) }
.slider-prev { left:16px }
.slider-next { right:16px }
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:8px }
.slider-dots .dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:all .3s; border:none }
.slider-dots .dot.active { background:var(--cyan); width:32px; border-radius:5px; box-shadow:0 0 10px rgba(34,211,238,.4) }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1000px; margin:0 auto }
.stat-item { text-align:center; padding:28px; background:var(--bg-card); border-radius:12px; border:1px solid var(--border); min-width:0 }
.stat-number { font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,7vw,40px); font-weight:800; color:var(--cyan); margin-bottom:6px; line-height:1.1; word-break:break-word }
.stat-label { font-size:15px; color:var(--text-2) }

/* Features */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px }
.feature { text-align:center; padding:32px 20px }
.feature-img { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--sky)); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; color:var(--bg-deep) }
.feature-img img { width:100%; height:100%; object-fit:cover }
.feature h3 { font-size:18px; font-weight:600; margin-bottom:10px }
.feature p { color:var(--text-2); font-size:14px }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px }
.step { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:32px; text-align:center }
.step-number { width:48px; height:48px; background:var(--cyan); color:var(--bg-deep); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; margin:0 auto 16px; font-family:'Space Grotesk',sans-serif }
.step h3 { font-size:18px; font-weight:600; margin-bottom:10px }
.step p { color:var(--text-2); font-size:14px }

/* FAQ */
.faq-list { max-width:800px; margin:0 auto }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:12px; overflow:hidden }
.faq-question { width:100%; background:none; color:var(--text-1); padding:18px 24px; text-align:left; font-size:16px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:color .3s }
.faq-question:hover { color:var(--cyan) }
.faq-icon { font-size:18px; transition:transform .3s; color:var(--text-3) }
.faq-item.active .faq-icon { transform:rotate(45deg); color:var(--cyan) }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease }
.faq-item.active .faq-answer { max-height:500px }
.faq-answer p { padding:0 24px 18px; color:var(--text-2); line-height:1.8; font-size:15px }

/* Breadcrumb */
.breadcrumb { padding:20px 0; font-size:14px; color:var(--text-3) }
.breadcrumb a { color:var(--text-2) }
.breadcrumb a:hover { color:var(--cyan) }

/* Footer */
.footer { background:var(--bg-surface); border-top:1px solid var(--border); padding:60px 0 30px }
.footer-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px; margin-bottom:36px }
.footer-col h3 { font-size:17px; font-weight:600; margin-bottom:16px; color:var(--cyan) }
.footer-col ul li { margin-bottom:4px }
.footer-col ul li a { color:var(--text-2); font-size:14px; transition:color .3s; display:inline-flex; align-items:center; min-height:40px; padding:6px 0 }
.footer-col ul li a:hover { color:var(--cyan) }
.footer-col p { color:var(--text-2); font-size:14px; line-height:1.7 }
.footer-bottom { text-align:center; padding-top:24px; border-top:1px solid var(--border); color:var(--text-3); font-size:13px }

/* Back to top */
.back-to-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:var(--cyan); color:var(--bg-deep); font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-cyan); z-index:998; opacity:0; visibility:hidden; transition:all .3s }
.back-to-top.show { opacity:1; visibility:visible }
.back-to-top:hover { transform:translateY(-3px) }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease }
.reveal.visible { opacity:1; transform:translateY(0) }

/* Responsive */
@media(max-width:768px) {
  .mobile-toggle { display:inline-flex }
  /* Show app download bar on mobile */
  .app-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; background:linear-gradient(90deg,#1E293B,#0F172A); border-bottom:1px solid var(--border-cyan) }
  .app-bar__info { display:flex; align-items:center; gap:10px; min-width:0 }
  .app-bar__logo { height:24px; width:auto; flex-shrink:0 }
  .app-bar__text { display:flex; flex-direction:column; line-height:1.2; min-width:0 }
  .app-bar__text strong { font-size:14px; color:var(--text-1); font-weight:700 }
  .app-bar__stars { font-size:12px; color:var(--gold); letter-spacing:2px }
  .app-bar__btn { flex-shrink:0; background:linear-gradient(135deg,var(--gold),#D97706); color:var(--bg-deep); font-weight:700; font-size:13px; padding:8px 18px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:all .3s }
  .app-bar__btn:hover { transform:translateY(-1px); box-shadow:0 0 18px rgba(251,191,36,.4); color:var(--bg-deep) }
  /* Two-row header: row1 = hamburger (left) + logo (right), row2 = full-width auth buttons */
  .header-content { flex-wrap:wrap; row-gap:10px; padding:10px 0 }
  .mobile-toggle { margin-right:auto }
  .header-actions { order:3; width:100%; gap:10px }
  .cta-btn,.btn-login { flex:1; justify-content:center; text-align:center; padding:12px 8px; font-size:15px; display:inline-flex; align-items:center; gap:8px }
  .cta-btn .btn-label,.btn-login .btn-label { display:inline }
  .nav { position:fixed; top:0; left:-100%; width:100%; height:100vh; background:var(--bg-surface); flex-direction:column; padding:150px 20px 24px; transition:left .3s; border-top:1px solid var(--border); overflow-y:auto; gap:0; z-index:999; flex-wrap:wrap }
  .nav.open { left:0 }
  .nav > a, .nav-dropdown > .nav-trigger { padding:14px 0; border-bottom:1px solid var(--border); width:100%; font-size:16px; border-radius:0 }
  .mega-panel { position:static; transform:none; min-width:auto; opacity:1; visibility:visible; pointer-events:auto; box-shadow:none; border:none; padding:0 0 0 20px; display:none; background:transparent }
  .nav-dropdown.open > .mega-panel { display:block }
  .mega-grid { grid-template-columns:1fr }
  .mega-link { padding:14px 0; min-height:48px }
  .slider-track { aspect-ratio:2/1 }
  .slide-content h1,.slide-content h2 { font-size:24px }
  .slide-content p { font-size:14px }
  .slide-content { padding:0 20px }
  .slider-arrow { display:none }
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .grid-4,.grid-3 { grid-template-columns:repeat(2,1fr) }
  .section { padding:50px 0 }
  .section-header h2 { font-size:26px }
}
@media(max-width:480px) {
  .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr }
  .stats-grid { grid-template-columns:1fr 1fr; gap:12px }
  .stat-item { padding:20px 12px }
  .slider-track { aspect-ratio:1.6/1 }
  .slide-content h1,.slide-content h2 { font-size:20px }
  .slide-content p { display:none }
  /* Keep auth button labels visible in the two-row mobile header */
  .header .container { padding:0 14px }
  .cta-btn,.btn-login { font-size:14px; padding:11px 8px }
}

/* ===== HOMEPAGE TPL STYLE ===== */
.hp-hero{position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;background:var(--bg-deep)}
.hp-hero__bg{position:absolute;top:50%;left:50%;width:700px;height:700px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.15) 0%,rgba(56,189,248,.08) 40%,transparent 70%);animation:heroGlow 6s ease-in-out infinite;pointer-events:none}
.hp-hero__bg::before{content:'';position:absolute;top:5%;left:5%;width:90%;height:90%;border-radius:50%;border:1px solid rgba(34,211,238,.12);animation:heroSpin 20s linear infinite}
.hp-hero__bg::after{content:'';position:absolute;top:15%;left:15%;width:70%;height:70%;border-radius:50%;border:1px solid rgba(56,189,248,.08);animation:heroSpin 30s linear infinite reverse}
@keyframes heroGlow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes heroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hp-hero__content{position:relative;z-index:2;padding:40px 20px}
.hp-hero__content h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,6vw,72px);font-weight:800;line-height:1.1;margin-bottom:20px;color:#fff}
.hp-hero__accent{background:linear-gradient(135deg,var(--cyan),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic}
.hp-hero__sub{font-size:clamp(16px,2.5vw,22px);color:var(--text-2);margin-bottom:36px;letter-spacing:1px}
.hp-hero__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.hp-actions{background:var(--bg-deep);padding:0 0 60px;margin-top:-60px;position:relative;z-index:3}
.hp-actions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:800px;margin:0 auto;padding:0 20px}
.hp-action-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all .4s;text-decoration:none;color:inherit}
.hp-action-card:hover{border-color:var(--cyan);transform:translateY(-6px);box-shadow:var(--glow-cyan);color:inherit}
.hp-action-card__icon{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(56,189,248,.1));display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--cyan);position:relative}
.hp-action-card__icon::after{content:'';position:absolute;inset:-6px;border-radius:22px;border:1px solid rgba(34,211,238,.15);animation:iconPulse 3s ease-in-out infinite}
@keyframes iconPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
.hp-action-card span{font-size:17px;font-weight:600;color:var(--text-1)}

/* Partners — infinite marquee slider (dark theme) */
.hp-partners{background:var(--bg-surface);padding:80px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hp-marquee{overflow:hidden;padding:0 0 10px;max-width:100%}
.hp-marquee__track{display:flex;gap:24px;width:max-content;animation:marqueeScroll 25s linear infinite}
.hp-marquee__track:hover{animation-play-state:paused}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hp-partner-logo{flex-shrink:0;width:160px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 16px;text-align:center;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Space Grotesk',sans-serif}
.hp-partner-logo span{font-size:20px;line-height:1.2;font-weight:800;color:var(--text-1)}
.hp-partner-logo small{font-size:11px;color:var(--text-2);font-weight:500}
.hp-partner-logo:hover{border-color:var(--cyan-deep);box-shadow:0 8px 30px rgba(6,182,212,.15);transform:translateY(-4px)}

/* Carousel 3D — TPL game slider style */
.hp-carousel{position:relative;padding:0 0 40px;overflow:hidden;max-width:100%}
.hp-carousel__track{display:flex;gap:20px;padding:20px 10vw;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hp-carousel__track::-webkit-scrollbar{display:none}
.hp-carousel__card{flex:0 0 26vw;min-width:240px;border-radius:20px;overflow:hidden;background:var(--bg-card);border:2px solid var(--border);transition:border-color .5s, box-shadow .5s;text-decoration:none;color:inherit}
.hp-carousel__card:hover{color:inherit}
.hp-carousel__img{width:100%;height:28vw;min-height:240px;max-height:420px;overflow:hidden}
.hp-carousel__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hp-carousel__card.active .hp-carousel__img img{transform:scale(1.03)}
.hp-carousel__info{padding:16px 14px;text-align:center}
.hp-carousel__info h3{font-size:18px;color:var(--text-1);font-weight:700;margin-bottom:6px}
.hp-carousel__info span{font-size:12px;color:var(--text-2);line-height:1.5;display:block}
.hp-carousel__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.hp-carousel__btn{width:44px;height:44px;border-radius:50%;background:var(--cyan);color:var(--bg-deep);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .3s;border:none;cursor:pointer;font-weight:700}
.hp-carousel__btn:hover{transform:scale(1.1);box-shadow:var(--glow-cyan)}
.hp-carousel__dots{display:flex;gap:8px}
.hp-carousel__dots .dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);cursor:pointer;transition:all .3s;border:none}
.hp-carousel__dots .dot.active{background:var(--cyan);width:28px;border-radius:5px}

/* News — dark theme asymmetric layout */
.hp-news{background:var(--bg-surface);padding:80px 0;border-top:1px solid var(--border)}
.hp-news__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.hp-news__header h2{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:800;color:var(--text-1)}
.hp-news__viewall{font-size:16px;font-weight:600;color:var(--cyan);transition:color .3s}
.hp-news__viewall:hover{color:var(--sky)}
.hp-news__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.hp-news__featured{display:block;text-decoration:none;background:var(--bg-card);border-radius:16px;overflow:hidden;transition:all .3s;border:1px solid var(--border);color:inherit}
.hp-news__featured:hover{transform:translateY(-4px);box-shadow:var(--glow-cyan);border-color:var(--cyan-deep);color:inherit}
.hp-news__featured img{width:100%;height:260px;object-fit:cover}
.hp-news__featured h3{padding:20px 24px 8px;font-size:22px;color:var(--text-1);font-weight:700;line-height:1.3}
.hp-news__featured p{padding:0 24px;color:var(--text-2);font-size:15px;line-height:1.6}
.hp-news__featured time{display:block;padding:12px 24px 20px;font-size:13px;color:var(--text-3)}
.hp-news__side{display:flex;flex-direction:column;gap:16px}
.hp-news__item{display:flex;gap:16px;background:var(--bg-card);border-radius:12px;overflow:hidden;text-decoration:none;transition:all .3s;border:1px solid var(--border);align-items:stretch;color:inherit}
.hp-news__item:hover{transform:translateX(4px);box-shadow:var(--glow-cyan);border-color:var(--cyan-deep);color:inherit}
.hp-news__item img{width:160px;min-height:100%;object-fit:cover;flex-shrink:0}
.hp-news__item div{padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
.hp-news__item h4{font-size:15px;color:var(--text-1);font-weight:700;line-height:1.4;margin-bottom:6px}
.hp-news__item time{font-size:12px;color:var(--text-3)}

@media(max-width:600px){
  .hp-hero{min-height:70vh}
  .hp-hero__bg{width:400px;height:400px}
  .hp-actions__grid{grid-template-columns:1fr;max-width:300px}
  .hp-actions{margin-top:-30px}
  .hp-carousel__card{flex:0 0 75vw}
  .hp-carousel__img{height:220px}
  .hp-carousel__track{padding:20px 20px}
  .hp-news__grid{grid-template-columns:1fr}
  .hp-news__item img{width:120px}
  .hp-news__header{flex-direction:column;gap:12px;align-items:flex-start}
}

/* ===== ARTICLE CONTENT UTILITIES ===== */
.article-wrap { max-width:900px; margin:0 auto; line-height:1.9; color:var(--text-2); font-size:16px }
.article-wrap h2 { color:var(--text-1); font-size:28px; margin:48px 0 20px }
.article-wrap h3 { color:var(--text-1); font-size:20px; margin:28px 0 12px }
.article-wrap p { margin-bottom:16px }
.article-wrap ul,.article-wrap ol { padding-left:20px; margin-bottom:16px }
.article-wrap ul { list-style:disc }
.article-wrap ol { list-style:decimal }
.article-wrap figure { margin:32px 0; text-align:center }
.article-wrap figure img { border-radius:var(--radius); width:100%; height:auto }
.article-wrap figcaption { color:var(--text-3); font-size:14px; margin-top:12px }
.article-wrap a { color:var(--cyan) }

/* Data tables */
.data-table { width:100%; border-collapse:collapse; margin:20px 0 }
.data-table th { padding:14px; text-align:left; background:var(--bg-card); color:var(--cyan); border:1px solid var(--border) }
.data-table td { padding:12px; border:1px solid var(--border) }
.data-table td:not(:first-child) { text-align:center }
.table-scroll { overflow-x:auto; margin:16px 0 }

/* CTA block */
.cta-block { text-align:center; padding:40px; background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border) }
.cta-block h2 { font-size:28px; margin-bottom:12px }
.cta-block p { color:var(--text-2); margin-bottom:24px }

/* Highlight text gradient */
.highlight { background:linear-gradient(135deg,var(--cyan),var(--sky)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* ===== MOBILE MENU OVERLAY ===== */
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998 }
.nav-overlay.show { display:block }
body.menu-open { overflow:hidden }

/* ===== TESTIMONIALS SLIDER ===== */
.hp-testimonials { padding:0 20px; overflow:hidden }
.hp-testimonials__track {
  display:flex; gap:24px;
  animation:testiScroll 30s linear infinite;
  width:max-content;
}
.hp-testimonials__track:hover { animation-play-state:paused }
@keyframes testiScroll {
  0% { transform:translateX(0) }
  100% { transform:translateX(-50%) }
}
.hp-testi-card {
  flex-shrink:0; width:380px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px;
  transition:all .4s; position:relative;
}
.hp-testi-card::before {
  content:'\201C'; position:absolute; top:12px; right:20px;
  font-size:64px; color:rgba(34,211,238,.1); font-family:serif; line-height:1;
}
.hp-testi-card:hover { border-color:var(--cyan); transform:translateY(-4px); box-shadow:var(--glow-cyan) }
.hp-testi-card__header { display:flex; align-items:center; gap:14px; margin-bottom:16px }
.hp-testi-avatar {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px; flex-shrink:0;
}
.hp-testi-card__header strong { font-size:15px; color:var(--text-1); display:block }
.hp-testi-badge {
  display:inline-block; font-size:11px; padding:2px 8px;
  border-radius:20px; background:rgba(34,211,238,.12);
  color:var(--cyan); font-weight:600; margin-left:6px; vertical-align:middle;
}
.hp-testi-badge--vip { background:rgba(251,191,36,.15); color:var(--gold) }
.hp-testi-stars { color:var(--gold); font-size:14px; letter-spacing:1px; margin-top:2px }
.hp-testi-card__quote {
  color:var(--text-2); font-size:14px; line-height:1.8;
  font-style:italic; margin-bottom:16px; position:relative; z-index:1;
}
.hp-testi-card__footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--border);
}
.hp-testi-tag {
  font-size:12px; color:var(--cyan); display:flex; align-items:center; gap:6px;
  background:rgba(34,211,238,.08); padding:4px 10px; border-radius:20px;
}
.hp-testi-card__footer time { font-size:12px; color:var(--text-3) }
@media(max-width:768px) {
  .hp-testi-card { width:300px; padding:22px }
  .hp-testimonials__track { gap:16px }
}

/* ===== REDUCED MOTION (accessibility) ===== */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hp-marquee__track,
  .hp-testimonials__track { animation:none !important }
  .reveal { opacity:1 !important; transform:none !important }
}

/* FAQ keyboard accessibility — question is a real button via role/tabindex */
.faq-question { border:none; width:100% }
.faq-question:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px }