:root{
  --bg: #f6f7f9;          /* soft light grey */
  --panel: #ffffff;      /* white cards */
  --text: #1f2937;       /* charcoal text */
  --muted: #6b7280;      /* muted grey text */
  --line: #e5e7eb;       /* soft borders */
  --gold: #c9a44c;       /* restrained gold */
  --gold2: #d6b25e;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}


*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 80% -20%, rgba(201,164,76,.12), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
}


a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
img{ max-width:100%; display:block; }
.container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}


.nav{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  padding:14px 0;
}

.actions{
  margin-left:auto;
}


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

@media (min-width: 769px){
  .brand{
    min-width:180px;
  }
}

.mark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(199,162,74,.95), rgba(225,193,111,.65));
  box-shadow: 0 10px 24px rgba(199,162,74,.20);
}
.brand b{
  letter-spacing: .2px;
  font-size: 15px;
}
.brand small{
  display:block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}

.navlinks{
  display:flex;
  gap: 16px;
  align-items:center;
}
.navlinks a{
  color: var(--muted);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
}
.navlinks a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.btn:active{ transform: translateY(1px); }

.btn-gold{
  border-color: rgba(199,162,74,.65);
  background: linear-gradient(180deg, rgba(199,162,74,.95), rgba(199,162,74,.70));
  color: #111;
}
.btn-gold:hover{
  border-color: rgba(225,193,111,.90);
  background: linear-gradient(180deg, rgba(225,193,111,.98), rgba(199,162,74,.78));
}

.hero{
  padding: 52px 0 28px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.kicker .dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(199,162,74,.14);
}

.h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.6px;
  line-height: 1.08;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  max-width: 62ch;
}

.hero-ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.subnote{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.card{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


.sidecard{
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
}
.sidecard h3{
  margin: 0;
  font-size: 16px;
}
.sidecard p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: 12px;
}

.section{
  padding: 24px 0;
}
.section h2{
  margin: 0 0 12px;
  font-size: 22px;
  letter-spacing: -0.2px;
}
.section p.top{
  margin: 0 0 16px;
  color: var(--muted);
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 920px){
  .grid3{ grid-template-columns: 1fr; }
}

.feature{
  padding: 16px;
}
.feature .icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(199,162,74,.12);
  border: 1px solid rgba(199,162,74,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
  color: var(--gold2);
  font-weight: 800;
}
.feature h3{ margin: 0 0 6px; font-size: 15px; }
.feature p{ margin: 0; color: var(--muted); font-size: 14px; }

.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 920px){
  .steps{ grid-template-columns: 1fr; }
}
.step{
  padding: 16px;
}
.step .n{
  width: 30px; height: 30px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gold2);
  font-weight: 800;
  margin-bottom: 10px;
}
.step h3{ margin: 0 0 6px; font-size: 15px; }
.step p{ margin: 0; color: var(--muted); font-size: 14px; }

.pricing{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 920px){
  .pricing{ grid-template-columns: 1fr; }
}
.pricecard{
  padding: 18px;
}
.pricecard .tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.04);
}
.pricecard h3{ margin: 10px 0 6px; font-size: 16px; }
.pricecard .price{
  font-size: 26px;
  letter-spacing: -0.3px;
  margin: 6px 0 10px;
}
.pricecard ul{ margin: 0; padding-left: 18px; color: var(--muted); }
.pricecard li{ margin: 8px 0; font-size: 14px; }

.cta{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cta b{ font-size: 16px; }
.cta p{ margin: 6px 0 0; color: var(--muted); font-size: 14px; }

.footer{
  padding: 22px 0 36px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--text); }


/* ================================
   Form styling (Bootstrap-like)
   ================================ */

form label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}



form textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

form input::placeholder,
form textarea::placeholder {
  color: rgba(255,255,255,.45);
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(199,162,74,.25);
}

form input:disabled,
form textarea:disabled,
form select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Form spacing */
form > label {
  margin-top: 12px;
}

form button {
  margin-top: 10px;
}

/* Error text */
.form-error,
form p[style*="color:#ff6b6b"] {
  background: rgba(255,107,107,.12);
  border: 1px solid rgba(255,107,107,.35);
  color: #ffb3b3;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 14px;
}

/* ===============================
   MOBILE CTA BAR (sticky)
================================= */

.mobile-cta {
  display:none;
}

@media (max-width:768px){

  .mobile-cta {
    display:block;
    position:sticky;
    bottom:0;
    background:#fff;
    border-top:1px solid #e5e7eb;
    padding:12px 0;
    z-index:20;
  }

  .mobile-cta .bar {
    display:flex;
    gap:10px;
  }
}
/* =====================================
   MOBILE HEADER + DRAWER (single source)
===================================== */

/* hamburger hidden on desktop */
.hamburger {
  display:none;
  font-size:28px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px 10px;
}

/* overlay */
.mobile-drawer {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99999;   /* force top of everything */
}

.mobile-drawer.open {
  display:block;
}

/* slide panel */
.drawer-panel {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:260px;

  background:#111;
  padding:20px;

  display:flex;
  flex-direction:column;
  gap:14px;

  transform:translateX(100%);
  transition:transform .25s ease;

  z-index:3001;
}

.mobile-drawer.open .drawer-panel {
  transform:translateX(0);
}

.drawer-panel a {
  color:#fff;
  font-size:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* mobile behaviour */
@media (max-width:768px){

  .navlinks,
  .actions{
    display:none !important;
  }

  .hamburger{
    display:block;
    margin-left:auto;
  }

  .brand small{
    display:none;
  }
}
.hero-image {
  width: 100%;
  max-width: 420px;   /* desktop cap */
  height: auto;
  border-radius: 18px;
  margin: 24px auto;
  display: block;
}
.section img.hero-image{
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 18px;
  margin: 24px auto;
  display: block;
}
/* ---------------------------------
   Hero image + video layout
--------------------------------- */

.hero-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin: 32px 0;
}

/* ---------------------------------
   Hero image + video layout
--------------------------------- */

.hero-media{
  display:grid;
  grid-template-columns: auto auto; /* don't stretch */
  justify-content:center;          /* centre both */
  gap: 28px;
  align-items:center;
  margin: 32px 0;
}

.hero-image,
.hero-video{
  width:100%;
  max-width:420px;   /* SAME size = clean symmetry */
  border-radius:18px;
  box-shadow: var(--shadow);
}

/* stack on mobile */
@media (max-width: 900px){
  .hero-media{
    grid-template-columns: 1fr;
  }
}

/* stack on mobile */
@media (max-width: 900px){
  .hero-media{
    grid-template-columns: 1fr;
  }
}
.wizard{
  padding:28px;
  max-width:640px;
  margin:auto;
}

.step-page{
  display:none;
  gap:14px;
  flex-direction:column;
}

.step-page.active{
  display:flex;
}

.chat-box{
  height:220px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fafafa;
  font-size:14px;
  margin-bottom:12px;
}

.chat-msg{
  margin-bottom:10px;
}

.chat-msg.user{ text-align:right; color:#333; }
.chat-msg.bot{ color:#666; }

.chat-input{
  display:flex;
  gap:8px;
}

/* ===================================
   Modern form styling (clean + light)
=================================== */

.form-group{
  margin-bottom:16px;
}

form label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text);
}

/* inputs */
form input,
form textarea,
form select{
  width:100%;
  min-height:46px;
  padding:12px 14px;

  font-size:15px;
  font-family:inherit;

  background:#fff;
  color:var(--text);

  border:1px solid var(--line);
  border-radius:12px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

/* textarea */
form textarea{
  min-height:110px;
  resize:vertical;
}

/* placeholder */
form input::placeholder,
form textarea::placeholder{
  color:#9ca3af;
}

/* focus */
form input:focus,
form textarea:focus,
form select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,76,.18);
  background:#fff;
}

/* hover */
form input:hover,
form textarea:hover,
form select:hover{
  border-color:#d1d5db;
}

/* buttons */
form button,
form .btn{
  height:46px;
  padding:0 18px;
}

/* nicer sections */
form hr{
  border:none;
  border-top:1px solid var(--line);
  margin:24px 0;
}

/* ===========================
   CONTACT WIZARD
=========================== */

.wizard{
  padding:28px;
  max-width:640px;
  margin:0 auto;
}

/* steps */
.step-page{
  display:none;
  animation:fade .25s ease;
}

.step-page.active{
  display:block;
}

@keyframes fade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:none;}
}

/* spacing */
.form-group{
  margin-bottom:18px;
}

/* inputs */
.wizard input,
.wizard textarea,
.wizard select{
  width:100%;
  min-height:46px;
  padding:12px 14px;

  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;

  font-size:15px;
  color:var(--text);

  transition:border-color .2s, box-shadow .2s;
}

.wizard textarea{
  min-height:120px;
}

.wizard input:focus,
.wizard textarea:focus,
.wizard select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,76,.18);
}

/* buttons */
.wizard button{
  width:100%;
  margin-top:10px;
}

/* answers */
.answer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.answer-list button{
  text-align:left;
  justify-content:flex-start;
}

/* chat */
.chat-box{
  height:320px;
  overflow-y:auto;
  background:#fafafa;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
}

.chat-msg{
  padding:8px 10px;
  border-radius:10px;
  margin-bottom:8px;
  font-size:14px;
  max-width:80%;
}

.chat-user{
  background:var(--gold);
  color:#111;
  margin-left:auto;
}

.chat-ai{
  background:#e5e7eb;
}

./* ===================================
   Chat input layout (clean + roomy)
=================================== */

.chat-input{
  display:flex;
  flex-direction:column;   /* stack vertically */
  gap:10px;
}

.chat-input textarea{
  width:100%;
  min-height:140px;        /* bigger typing area */
  padding:14px 16px;

  border-radius:14px;
  border:1px solid var(--line);

  font-size:15px;
  line-height:1.5;

  resize:vertical;
}

.chat-input button{
  width:100%;              /* full width button feels nicer */
  height:46px;
}
.answer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.answer-list .btn{
  text-align:left;
  justify-content:flex-start;
}

.chat-input textarea#chatInput{
  width:100%;
  min-height:90px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  resize: vertical;
  font-size: 15px;
}
/* ==============================
   Chat bubbles styling
============================== */

.chat-msg{
  padding:10px 14px;
  border-radius:14px;
  margin-bottom:10px;
  max-width:75%;
  font-size:14px;
  line-height:1.4;
}

/* user question */
.chat-user{
  margin-left:auto;
  background:var(--gold);
  color:#111;
  font-weight:600;
  text-align:right;
}

/* AI answer */
.chat-ai{
  margin-right:auto;
  background:#e5e7eb;
  color:#374151;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
}
/* -----------------------------------------
   Pricing cards
----------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.pricecard {
  padding: 26px;
  border-radius: 18px;
  border: 1px solid #e6e6e6;
  text-align: left;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.pricecard h3 {
  margin-bottom: 6px;
  font-size: 20px;
}

.price {
  font-size: 32px;
  font-weight: 700;
  margin: 6px 0 2px;
}

.price-sub {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
}

.pricecard ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.pricecard li {
  margin-bottom: 8px;
  font-size: 14px;
}

.pricecard li:before {
  content: "✓ ";
  font-weight: 700;
  margin-right: 6px;
}

.price-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

/* pastel backgrounds */
.plan-starter { background: #f3f6ff; }
.plan-pro     { background: #f2fbf7; border: 2px solid #c7a24a; }
.plan-agency  { background: #fff7ed; }

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: inline-block;
  margin-bottom: 12px;
}
/* ======================================
   Hero stacked layout (safe + isolated)
====================================== */

.hero-top{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hero-media-row{
  display:flex;
  gap:24px;
  justify-content:center;
  margin-top:40px;
}

.hero-media-row video,
.hero-media-row img{
  width:100%;
  max-width:520px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:18px;
  box-shadow: var(--shadow);
}

/* Mobile adjustments */
@media (max-width:900px){
  .hero-media-row{
    flex-direction:column;
    align-items:center;
    gap:18px;
  }

  .hero-media-row video,
  .hero-media-row img{
    max-width:420px;   /* smaller on mobile */
  }
}


/* mobile */
@media (max-width:900px){
  .hero-media-row{
    flex-direction:column;
    align-items:center;
  }
}
/* =====================================
   Hero Explainer Video (isolated fix)
===================================== */

.hero-explainer-video{
  width:100%;
  max-width:520px;
  aspect-ratio:16/9;
  height:auto;
  border-radius:18px;
  box-shadow: var(--shadow);
  display:block;
  margin:0 auto;
}

/* Strong mobile override */
@media (max-width:900px){
  .hero-explainer-video{
    max-width:380px;
  }
}