@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
  /* Core tokens */
  --bg: #111111;
  --shell: #111111;
  --surface: #181818;
  --surface-soft: #1e1e1e;
  --ink: #f6f3ea;
  --muted: rgba(246,243,234,.72);
  --accent: #f2d58b;
  --accent-soft: rgba(242,213,139,.16);
  --line: rgba(242,213,139,.16);
  --danger: #f87171;
  /* widened container */
  --max: 1340px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --fast: .14s ease-out;
}

/* optional extra breathing room on very large screens */
@media (min-width: 1600px){
  :root{
    --max: 1420px;
  }
}

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

html,
body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--accent);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:0.02em;
}

strong{
  color:var(--accent);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  font-weight:600;
}

a{
  color:var(--accent);
}

/* Container */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 20px; /* a little wider than before */
}

/* Main layout */

main{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:16px 16px 48px;
}

/* Kill global gradient */
main::before{
  content:none;
}

/* Header */

header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--shell);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(242,213,139,.16);
  box-shadow:0 2px 18px rgba(0,0,0,.55);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
}

.brand:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:14px;
}

.logo{
  width:80px;
  height:80px;
  border-radius:10%;
  background-image:url("/images/kiki-logo-cropped.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.brand h1{
  margin:0;
  font-size:20px;
  letter-spacing:.3px;
  color:var(--accent);
}

.brand small{
  display:block;
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  margin-top:2px;
}

/* Buttons */

.btn{
  appearance:none;
  border:1px solid rgba(246,243,234,.10);
  background:#181818;
  color:var(--ink);
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  font-size:0.9rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:
    transform var(--fast),
    box-shadow var(--fast),
    background var(--fast),
    border var(--fast),
    color var(--fast);
}

.btn:hover{
  transform:translateY(-1px);
  background:#1f1f1f;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}

.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Accent buttons */

.btn.accent{
  background:var(--accent-soft);
  border:1px solid rgba(242,213,139,.85);
  color:var(--ink);
  box-shadow:0 14px 40px rgba(0,0,0,.70);
  text-shadow:0 0 1px rgba(0,0,0,.45);
}

.btn.accent:hover{
  background:rgba(242,213,139,.24);
  box-shadow:0 18px 46px rgba(0,0,0,.80);
  transform:translateY(-1px);
}

.btn.accent:active{
  transform:translateY(0);
  box-shadow:0 8px 24px rgba(0,0,0,.75);
}

/* Special accent for Founder launch offer */

.btn.accent.special{
  position:relative;
  top:-1px;
  box-shadow:
    0 0 0 1px rgba(242,213,139,0.45),
    0 12px 34px rgba(0,0,0,0.8),
    0 0 18px rgba(242,213,139,0.14);
}

.btn.accent.special:hover{
  box-shadow:
    0 0 0 1px rgba(242,213,139,0.85),
    0 16px 40px rgba(0,0,0,0.85),
    0 0 22px rgba(242,213,139,0.20);
}

/* Small badge inside buttons */

.badge{
  background:rgba(242,213,139,0.16);
  border:1px solid rgba(242,213,139,0.55);
  color:var(--accent);
  padding:1px 6px 0;
  border-radius:8px;
  font-size:0.66rem;
  font-weight:600;
  line-height:1.2;
  margin-left:6px;
}

/* Ghost buttons */

.btn.ghost{
  background:transparent;
  border-color:transparent;
  color:rgba(246,243,234,.82);
  font-weight:500;
}

.btn.ghost:hover,
.btn.ghost:focus-visible{
  color:var(--accent);
  border-color:rgba(242,213,139,.40);
  background:rgba(242,213,139,.08);
}

/* Active nav item */

.nav .btn.ghost.active{
  color:var(--accent);
  background:rgba(242,213,139,.16);
  border-color:rgba(242,213,139,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.7);
}

/* Full-width CTA button */

.btn.block{
  justify-content:center;
  width:100%;
  padding:14px 18px;
  font-size:0.98rem;
}

/* Sections and panels */

section{
  margin:34px 0;
}

.panel{
  background:var(--surface);
  border:1px solid rgba(242,213,139,.18);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.panel .pad{
  padding:26px;
}

h2.section{
  margin:0 0 16px 0;
  font-size:1.6rem;
  letter-spacing:.05rem;
  border-bottom:1px solid rgba(242,213,139,.18);
  padding-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

h2.section::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--accent);
  border-radius:999px;
}

p.lead{
  color:rgba(246,243,234,.78);
  font-size:1.06rem;
  margin:12px 0 4px 0;
}

p.muted{
  margin-top:6px;
}

.note{
  font-size:13px;
  color:var(--muted);
}

/* Hero */

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
  min-height:360px;
}

.hero-main{
  max-width:720px;
  width:100%;
  margin:0 auto 0.25rem;
}

.hero-cta{
  margin-top:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.chips{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  font-size:0.76rem;
  background:#101010;
  border:1px solid rgba(242,213,139,.24);
  color:var(--muted);
}

/* Centered hero heading */

.hero-centered h2.section{
  justify-content:center;
  text-align:center;
}

.hero-centered h2.section::before{
  display:none;
}

/* Hero heading sizing */

.hero h2.section{
  font-size:2.1rem;
  line-height:1.3;
}

@media(min-width:980px){
  .hero h2.section{
    font-size:2.4rem;
  }
}

/* Big crest */

.hero-logo{
  max-width:240px;
  height:auto;
  display:block;
  margin:6px auto 6px auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.9));
}

/* Hero aside */

.hero-aside{
  width:100%;
  max-width:780px;
  align-self:center;
  background:var(--surface-soft);
  border-radius:var(--radius-md);
  border:1px solid rgba(242,213,139,.18);
  text-align:left;
}

.aside-title{
  margin:0 0 6px 0;
  font-size:0.98rem;
}

.aside-list{
  list-style:disc;
  padding-left:18px;
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:0.92rem;
}

/* Stats */

.stats{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-top:18px;
}

.stat{
  background:var(--surface-soft);
  border:1px solid rgba(242,213,139,.18);
  border-radius:18px;
  padding:14px 16px 16px;
}

.stat .big{
  font-size:.96rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--accent);
}

.stat .small{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  margin-top:4px;
}

.ico{
  width:18px;
  height:18px;
  display:inline-block;
}

/* Grids and items */

ul.clean{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}

.grid{
  display:grid;
  gap:18px;
}

.grid-two{
  grid-template-columns:1fr;
}

/* Card items */

.item{
  background:var(--surface-soft);
  border:1px solid rgba(242,213,139,.18);
  border-radius:18px;
  padding:18px;
  transition:transform var(--fast), box-shadow var(--fast), border var(--fast), background var(--fast);
}

.item:hover{
  transform:translateY(-3px);
  border-color:rgba(242,213,139,.40);
  box-shadow:0 20px 46px rgba(0,0,0,.55);
}

/* Feature cards */

.feature-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}

.feature{
  background:var(--surface-soft);
  border:1px solid rgba(242,213,139,.20);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.feature header{
  padding:18px 20px;
  border-bottom:1px solid rgba(242,213,139,.20);
  background:#1b1b1b;
}

.feature header h3{
  margin:0;
  font-size:1.12rem;
}

.feature .content{
  padding:18px 20px;
  color:var(--muted);
}

.feature .actions{
  padding:14px 20px 16px 20px;
  border-top:1px solid rgba(242,213,139,.16);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Steps */

.steps{
  display:grid;
  gap:14px;
}

.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.step-number{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#111118;
  font-weight:700;
  font-size:0.9rem;
  flex-shrink:0;
  margin-top:2px;
}

.step-body h3{
  margin:0 0 4px 0;
  font-size:0.98rem;
}

.step-body p{
  margin:0;
  color:var(--muted);
  font-size:0.93rem;
}

/* Form */

form{
  display:grid;
  gap:10px;
  margin-top:14px;
}

input,
textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(242,213,139,.18);
  border-radius:12px;
  background:#050505;
  color:var(--ink);
  outline:none;
  font-size:0.95rem;
  transition:border var(--fast), box-shadow var(--fast), background var(--fast);
}

input::placeholder,
textarea::placeholder{
  color:rgba(246,243,234,.50);
}

input:focus,
textarea:focus{
  border:1px solid rgba(242,213,139,.9);
  box-shadow:0 0 0 2px rgba(242,213,139,.35);
  background:#0d0d0d;
}

textarea{
  min-height:120px;
  resize:vertical;
}

/* Helpers */

.muted{
  color:var(--muted);
}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Screen reader only */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Footer */

footer.site{
  color:var(--muted);
  text-align:center;
  padding:28px 18px;
  border-top:1px solid rgba(242,213,139,.18);
  background:var(--shell);
}

footer.site a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed var(--accent);
}

footer.site a:hover{
  border-bottom-style:solid;
}

footer.site .pad{
  max-width:960px;
  margin:0 auto;
}

/* Hero offer cards */

.hero-offers{
  margin:1.6rem 0 1.8rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
  justify-content:center;
}

.hero-offer{
  padding:0.95rem 1.15rem;
  border-radius:18px;
  background:#131313;
  border:1px solid rgba(242,213,139,0.28);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
  box-shadow:0 14px 34px rgba(0,0,0,0.7);
}

.hero-offer strong{
  font-size:0.92rem;
  color:var(--accent);
  margin-bottom:0.18rem;
}

.hero-offer span{
  font-size:0.82rem;
  color:var(--muted);
}

.hero-offer:first-child{
  border-color:rgba(242,213,139,0.7);
  background:radial-gradient(circle at top left, rgba(242,213,139,0.14), #131313);
}

.hero-offer:hover{
  border-color:var(--accent);
  background:radial-gradient(circle at top left, rgba(242,213,139,0.2), #151515);
  box-shadow:0 18px 40px rgba(0,0,0,0.85);
}

/* Checklists */

.checks{
  display:grid;
  gap:12px;
}

.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:var(--surface-soft);
  border:1px solid rgba(242,213,139,.18);
  border-radius:18px;
  padding:12px 14px;
}

.tick{
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.check strong{
  font-size:0.96rem;
}

.check .muted{
  font-size:0.9rem;
}

/* Responsive tweaks */

@media(min-width:980px){
  .stats{
    grid-template-columns:repeat(3,1fr);
  }
  .grid-two{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:900px){
  .feature-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .topbar{
    flex-wrap:wrap;
  }

  .cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-cta{
    justify-content:flex-start;
  }

  .chips{
    justify-content:flex-start;
  }
}

/* ======================================
   Navigation – desktop and mobile
   ====================================== */

/* Desktop nav layout */
header.site .nav{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-wrap:wrap;
}

/* Dropdown groups on desktop */
.nav-group{
  position:relative;
  display:inline-block;
}

.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:190px;
  padding:0.5rem 0;
  background:#050607;
  border:1px solid rgba(231,199,127,0.24);
  border-radius:0.75rem;
  box-shadow:0 18px 40px rgba(0,0,0,0.6);
  display:none;
  z-index:20;
}

.nav-dropdown a{
  display:block;
  padding:0.4rem 0.85rem;
  font-size:0.9rem;
  text-decoration:none;
  color:#f4f2ea;
  white-space:nowrap;
}

.nav-dropdown a:hover{
  background:rgba(231,199,127,0.08);
}

.nav-group:hover .nav-dropdown{
  display:block;
}

/* Slightly smaller nav buttons in header */
header.site .btn{
  padding:4px 12px;
  font-size:0.8rem;
}

header.site .btn.accent{
  padding:4px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.65);
}