*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --kf-bg:      #1A1118;
  --kf-deep:    #0C0A0B;
  --kf-card:    #2A1E28;
  --kf-accent:  #C4924A;
  --kf-text:    #E8DFD0;
  --kf-muted:   rgba(232,223,208,0.56);
  --kf-dim:     rgba(232,223,208,0.28);
  --kf-border:  rgba(196,146,74,0.13);
  --co-bg:      #F5EDD8;
  --co-bg2:     #EDE4CC;
  --co-accent:  #8B6914;
  --co-text:    #2C1810;
  --co-muted:   rgba(44,24,16,0.60);
  --co-border:  rgba(139,105,20,0.18);
}

html { scroll-behavior: smooth; }

body {
  background: var(--kf-deep);
  color: var(--kf-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Eyebrow ─────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kf-accent);
  font-weight: 500;
  font-style: normal;
  margin-bottom: 22px;
}

/* ── Nav ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 26px 72px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(10,8,9,0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: var(--kf-border);
}
.nav-wordmark {
  font-size: 24px; font-weight: 500; font-style: normal;
  letter-spacing: -0.01em; color: var(--kf-text); text-decoration: none;
}
.nav-links {
  display: flex; gap: 40px; align-items: center; list-style: none;
}
.nav-links a {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kf-muted); text-decoration: none; font-style: normal;
  font-weight: 400; transition: color 0.2s;
}
.nav-links a:hover { color: var(--kf-text); }
.nav-links a:focus { outline: 2px solid var(--kf-accent); outline-offset: 4px; }
.nav-pill {
  height: 38px; padding: 0 22px; border-radius: 19px;
  background: var(--kf-accent); color: #1A0800 !important;
  font-size: 12px !important; letter-spacing: 0.1em !important;
  font-style: italic; font-weight: 500 !important;
  display: flex; align-items: center;
  transition: opacity 0.2s !important;
  text-decoration: none;
}
.nav-pill:hover { opacity: 0.84; color: #1A0800 !important; }
.nav-pill:focus { outline: 2px solid var(--kf-text); outline-offset: 4px; }

/* ── Buttons ─────────────────────────────────── */
.btn-gold {
  height: 54px; padding: 0 36px; border-radius: 27px;
  background: var(--kf-accent); color: #1A0800;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; font-style: italic; font-weight: 500;
  text-decoration: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  transition: opacity 0.2s; white-space: nowrap;
}
.btn-gold:hover { opacity: 0.85; }
.btn-gold:focus { outline: 2px solid #1A0800; outline-offset: 2px; }

.btn-outline {
  height: 54px; padding: 0 28px; border-radius: 27px;
  border: 1px solid var(--kf-border); color: var(--kf-muted);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px; font-style: normal; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: rgba(196,146,74,0.38); color: var(--kf-text); }
.btn-outline:focus { outline: 2px solid var(--kf-accent); outline-offset: 2px; }

.btn-co {
  height: 54px; padding: 0 36px; border-radius: 27px;
  background: var(--co-accent); color: var(--co-bg);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; font-style: italic; font-weight: 500;
  text-decoration: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  transition: opacity 0.2s;
}
.btn-co:hover { opacity: 0.85; }

/* ── Footer ──────────────────────────────────── */
footer {
  padding: 40px 96px; background: var(--kf-deep);
  border-top: 1px solid var(--kf-border);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.footer-brand {
  font-size: 20px; font-weight: 500; font-style: normal;
  letter-spacing: -0.01em; color: var(--kf-text);
}
.footer-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kf-dim); text-decoration: none; font-style: normal;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--kf-muted); }
.footer-copy { font-size: 12px; color: rgba(232,223,208,0.16); font-weight: 300; }

/* ── Phone Mockup (extracted inline styles) ──── */
.ph-status-dark { color: rgba(44,24,16,0.5); }
.ph-status-light { color: rgba(232,223,208,0.6); }
.ph-status-icons { display: flex; gap: 3px; align-items: center; opacity: 0.6; }
.ph-envelope-wrap { display: flex; justify-content: center; margin: 10px 0 8px; }
.ph-text-label { text-align: center; font-size: 8.5px; font-weight: 500; letter-spacing: -0.02em; color: rgba(44,24,16,0.45); margin-bottom: 5px; font-style: normal; }
.ph-text-title { font-size: 12.5px; font-weight: 300; font-style: italic; color: #2C1810; text-align: center; line-height: 1.2; margin-bottom: 5px; }
.ph-text-subtitle { font-size: 7.5px; font-weight: 300; color: rgba(44,24,16,0.5); text-align: center; margin-bottom: 12px; line-height: 1.5; }
.ph-input-field { height: 26px; border-radius: 8px; background: rgba(255,255,255,0.55); border: 1px solid rgba(139,105,20,0.22); display: flex; align-items: center; padding: 0 9px; gap: 5px; margin-bottom: 9px; }
.ph-input-text { font-size: 8px; font-weight: 300; font-style: italic; color: rgba(139,105,20,0.5); }
.ph-trust-block { margin-top: 10px; background: #EDE4CC; border-radius: 8px; overflow: hidden; border: 1px solid rgba(139,105,20,0.15); }
.ph-trust-item { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-bottom: 1px solid rgba(139,105,20,0.1); }
.ph-trust-item:last-child { border-bottom: none; }
.ph-trust-label { font-size: 7px; font-weight: 300; color: #2C1810; }
.ph-divider { height: 1px; background: rgba(139,105,20,0.22); margin-bottom: 10px; }
.ph-divider-light { height: 1px; background: rgba(139,105,20,0.18); margin-bottom: 8px; }
.ph-letter-heading { font-size: 17px; font-weight: 300; font-style: italic; color: #2C1810; line-height: 1.08; margin-bottom: 7px; }
.ph-letter-body { font-size: 7.5px; font-weight: 300; color: #3A2418; line-height: 1.76; flex: 1; overflow: hidden; }
.ph-letter-date { font-size: 7px; font-style: italic; color: rgba(44,24,16,0.44); margin-top: 8px; margin-bottom: 5px; }
.ph-nav-back { display: flex; align-items: center; gap: 3px; padding: 4px 2px 6px; border-bottom: 1px solid rgba(139,105,20,0.15); margin-bottom: 10px; }
.ph-nav-back-text { color: #8B6914; font-size: 8.5px; font-weight: 300; }
.ph-pill-kf { background: #C4924A; color: #1A0800; margin-top: 10px; }
.ph-pill-co { background: #8B6914; color: #F5EDD8; }
.ph-pill-co-lg { background: #8B6914; color: #F5EDD8; font-size: 8.5px; }
.ph-home-bar-dark { background: rgba(232,223,208,0.2); }
.ph-home-bar-light { background: rgba(44,24,16,0.18); }
.ph-row-flex { flex: 1; }
.ph-row-accent { color: #E8DFD0; }
.ph-row-muted { color: rgba(232,223,208,0.44); }
.ph-row-sep { color: rgba(196,146,74,0.5); font-size: 11px; }

/* ── Responsive Breakpoints ──────────────────── */
@media (max-width: 1400px) {
  .preview-header { padding: 0 clamp(20px, 5vw, 96px); }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding: 100px 0 60px; }
  .hero-left { padding: 0 clamp(20px, 5vw, 96px); }
  .hero-right { padding: 0 clamp(20px, 5vw, 96px); flex-direction: column; margin-top: 40px; }
  .hero-glow { width: 300px; height: 300px; }

  .personas { grid-template-columns: 1fr; }
  .persona-dark::after { display: none; }

  .inside { padding: clamp(60px, 8vw, 108px) clamp(20px, 5vw, 96px); }
  .inside-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(10px, 2vw, 14px); }

  .preview { padding: 80px 0 60px; }
  .phones-row { gap: clamp(12px, 3vw, 24px); }

  .security { padding: clamp(60px, 8vw, 108px) clamp(20px, 5vw, 96px); }
  .pillars { max-width: 100%; grid-template-columns: 1fr; border-radius: 12px; }
  .pillar { border-right: none; border-bottom: 1px solid var(--kf-border); }
  .pillar:last-child { border-bottom: none; }

  .cta { padding: clamp(80px, 10vw, 112px) clamp(20px, 5vw, 96px); }
}

@media (max-width: 768px) {
  nav { padding: 16px clamp(16px, 4vw, 72px); }
  .nav-links { gap: clamp(20px, 4vw, 40px); }

  .hero-headline { font-size: clamp(36px, 8vw, 52px); }
  .hero-tags { flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); }

  .section-headline { font-size: clamp(28px, 6vw, 36px); }

  .inside-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 2vw, 14px); }

  .phones-row { flex-direction: column; align-items: center; gap: clamp(20px, 5vw, 36px); }
  .phone-card:nth-child(2) { transform: none !important; margin: 0; }
  .phone-shell { width: clamp(140px, 40vw, 200px); }

  .contact-block { flex-direction: column; gap: clamp(24px, 5vw, 48px); padding: clamp(32px, 6vw, 52px); }
  .contact-right { width: 100%; justify-content: center; }

  footer { flex-direction: column; gap: clamp(12px, 3vw, 24px); text-align: center; padding: clamp(24px, 5vw, 40px); }
  .footer-links { justify-content: center; }
}

@media (max-width: 480px) {
  nav { padding: 12px clamp(12px, 3vw, 72px); }
  .nav-links { gap: clamp(12px, 3vw, 40px); flex-wrap: wrap; }
  .nav-wordmark { font-size: 20px; }

  .hero { padding: 80px 0 40px; }
  .hero-left { padding: 0 clamp(16px, 4vw, 96px); }
  .hero-right { padding: 0 clamp(16px, 4vw, 96px); }
  .hero-glow { width: 200px; height: 200px; }
  .hero-env-wrap { transform: scale(0.7); }

  .eyebrow { font-size: 10px; margin-bottom: 16px; }
  .hero-headline { font-size: clamp(28px, 7vw, 42px); margin-bottom: 16px; }
  .hero-sub { font-size: 16px; max-width: 100%; margin-bottom: 30px; }
  .hero-actions { gap: 12px; }

  .inside-grid { grid-template-columns: 1fr; gap: 10px; }
  .inside-card { padding: clamp(20px, 4vw, 34px) clamp(16px, 3vw, 26px); }

  .phone-shell { width: clamp(120px, 50vw, 180px); }

  .cta-headline { font-size: clamp(32px, 6vw, 42px); }
  .btn-gold, .btn-outline, .btn-co { height: 48px; font-size: 14px; padding: 0 clamp(16px, 3vw, 36px); }
}

/* ── Image Optimization (placeholder for future images) ─ */
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
source { display: none; }