/* ============================================
   Layout — Header / Footer / Sections
   ============================================ */

/* ── Header ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  z-index: var(--z-header);
  transition: background var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: 0 1px 0 var(--color-glass-border);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-logo img {
  height: 50px;
  width: auto;
}

.header-logo-text {
  font-family: var(--font-accent);
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  color: var(--color-gold);
  letter-spacing: var(--ls-wide);
}

/* Desktop nav */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.nav-link::after {
  content: '◆';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  font-size: 6px;
  color: var(--color-gold);
  transition: transform var(--duration-normal) var(--ease-out);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text-primary);
}

.nav-link.active::after {
  transform: translateX(-50%) scale(1);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  z-index: var(--z-overlay);
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 23, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav .nav-link {
  font-size: var(--fs-4);
  font-family: var(--font-display);
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ── Footer ── */
.site-footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-gold-dim);
  padding: var(--space-8) 0 var(--space-5);
  position: relative;
  overflow: hidden;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-7);
}

.footer-brand .header-logo {
  margin-bottom: var(--space-3);
}

.footer-brand p {
  color: var(--color-text-secondary);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  max-width: 320px;
}

.footer-col h4 {
  font-family: var(--font-accent);
  font-size: var(--fs-2);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls-wide);
}

.footer-col p,
.footer-col a {
  color: var(--color-text-secondary);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  display: block;
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-gold);
}

.footer-copy {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-1);
  margin-top: var(--space-5);
  padding: 0 var(--space-5);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ── Shared Hero ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:var(--header-height);overflow:hidden}
.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center;position:relative;z-index:2}
.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-text{position:relative}
.hero-title{font-family:var(--font-display);font-size:var(--fs-7);font-weight:var(--fw-black);line-height:var(--lh-heading);color:var(--color-text-primary);margin-bottom:var(--space-5)}
.hero-line{display:block}
.hero-line-accent{color:var(--color-gold);font-style:italic}
.hero-desc{font-size:var(--fs-3);color:var(--color-text-secondary);line-height:var(--lh-body);max-width:520px;margin-bottom:var(--space-6)}
.hero-visual{position:relative;height:500px;display:flex;align-items:center;justify-content:center}
.hero-card{position:absolute;width:280px;height:380px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-card img{width:100%;height:100%;object-fit:cover}

/* About page: wider card for landscape screenshots */
.hero-about .hero-card{width:320px;height:280px}
.hero-about .hero-card-2{width:300px;height:260px}
.hero-about .hero-card-3{width:280px;height:240px}

/* ── Hero Device Showcase (phone mockup style) ── */
.hero-visual-showcase{display:flex;align-items:center;justify-content:center;height:auto;min-height:420px;perspective:1200px}
.hero-device{position:relative;z-index:3;width:100%;max-width:420px;transform:rotateY(-8deg) rotateX(4deg);transform-style:preserve-3d;transition:transform var(--duration-slow) var(--ease-out)}
.hero-device:hover{transform:rotateY(-2deg) rotateX(1deg)}
.hero-device-frame{position:relative;background:linear-gradient(145deg,rgba(30,40,60,0.9),rgba(15,20,35,0.95));border-radius:24px;padding:12px;box-shadow:0 25px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.08),inset 0 1px 0 rgba(255,255,255,0.1)}
.hero-device-frame::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:60px;height:6px;border-radius:3px;background:rgba(255,255,255,0.08);z-index:2}
.hero-device-screen{overflow:hidden;border-radius:16px;position:relative}
.hero-device-screen img{width:100%;display:block}
.hero-device-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 40%,transparent 60%,rgba(255,255,255,0.03) 100%);pointer-events:none}
.hero-device-reflection{position:absolute;bottom:-60%;left:5%;right:5%;height:50%;background:inherit;border-radius:24px;overflow:hidden;transform:scaleY(-1);opacity:0.08;filter:blur(8px);pointer-events:none;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent)}
.hero-device-glow{position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(212,168,67,0.12) 0%,transparent 70%);pointer-events:none;z-index:-1}
.hero-card-1{z-index:4;transform:rotate(-3deg)}
.hero-card-2{z-index:3;transform:rotate(5deg) translate(40px,-20px);opacity:.7;width:260px;height:360px}
.hero-card-3{z-index:2;transform:rotate(12deg) translate(80px,10px);opacity:.4;width:240px;height:340px}
.hero-suit{position:absolute;font-size:4rem;color:var(--color-gold);opacity:.15;pointer-events:none;z-index:1}
.hero-suit.red{color:var(--color-red)}
.hero-suit-1{top:5%;left:-10%}
.hero-suit-2{top:15%;right:5%}
.hero-suit-3{bottom:20%;left:5%}
.hero-suit-4{bottom:10%;right:-5%}
.hero-scroll-hint{position:absolute;bottom:var(--space-6);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--fs-1);letter-spacing:var(--ls-wider);text-transform:uppercase}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--color-gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;height:40px}50%{opacity:1;height:60px}}

/* ── Shared Section Header ── */
.section-header{text-align:center;margin-bottom:var(--space-8)}
.section-header.center{text-align:center}
.section-title{font-family:var(--font-display);font-size:var(--fs-5);font-weight:var(--fw-bold);color:var(--color-text-primary);margin-bottom:var(--space-4);line-height:var(--lh-heading)}
.section-subtitle{font-size:var(--fs-3);color:var(--color-text-secondary);max-width:600px;margin:0 auto;line-height:var(--lh-body)}

/* ── Shared CTA ── */
.cta-section{padding:var(--space-8) 0 var(--space-9)}
.cta-card{text-align:center;padding:var(--space-8) var(--space-6);position:relative;overflow:hidden}
.cta-suits{font-size:var(--fs-3);color:var(--color-gold);opacity:.3;letter-spacing:var(--ls-mega);margin-bottom:var(--space-4)}
.cta-title{font-family:var(--font-display);font-size:var(--fs-5);font-weight:var(--fw-black);color:var(--color-text-primary);margin-bottom:var(--space-4)}
.cta-desc{font-size:var(--fs-3);color:var(--color-text-secondary);max-width:500px;margin:0 auto var(--space-6)}

/* ── Shared Hero Responsive ── */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;text-align:center}
  .hero-desc{margin:0 auto var(--space-6)}
  .hero-actions{justify-content:center}
  .hero-visual{height:350px}
  .hero-card{width:200px;height:280px}
  .hero-card-2{width:180px;height:260px}
  .hero-card-3{width:160px;height:240px}
  .hero-about .hero-card{width:230px;height:200px}
  .hero-about .hero-card-2{width:210px;height:185px}
  .hero-about .hero-card-3{width:190px;height:170px}
}
@media(max-width:768px){
  .hero-title{font-size:var(--fs-5)}
  .hero-visual{height:280px}
  .hero-card{width:160px;height:220px}
  .hero-card-2{width:140px;height:200px}
  .hero-card-3{width:120px;height:180px}
  .hero-about .hero-card{width:180px;height:155px}
  .hero-about .hero-card-2{width:160px;height:140px}
  .hero-about .hero-card-3{width:140px;height:125px}
  .hero-scroll-hint{display:none}
}