/* ===== Base tokens & layout ===== */
:root{
  --bg:#0B0F13;
  --paper:#0F141A;
  --ink:#E9EEF3;
  --muted:#8A98A5;
  --brand:#4F8EF7;
  --brand-ink:#0B1B33;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, #0A0E12 0%, #0E141B 100%);
  color:var(--ink);
  font: 400 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px; 
}

/* ===== Header & nav ===== */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(10,14,18,.65);
  border-bottom:1px solid rgba(255,255,255,.05);
}
header .nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
  position: relative; /* for mobile dropdown positioning */
}
.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; background:linear-gradient(135deg,#3D7BEF,#6AA9FF);
  box-shadow: var(--shadow);
}
.brandname{font-weight:800; letter-spacing:.2px}
.brandname span:first-child{color:#fff;}
.brandname span:last-child{color:#BBD2FF;}
.menu a{
  color:var(--ink); text-decoration:none; margin-left:18px; font-weight:600;
  opacity:.9;
}
.menu a:hover{opacity:1}
.mobile-toggle{display:none}

/* ===== Buttons, chips, pills ===== */
.button{
  appearance:none; border:0; border-radius:999px;
  padding:12px 18px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  line-height:1;
  box-shadow: var(--shadow);
  transition: transform .06s ease, opacity .2s ease, background .2s ease, color .2s ease;
  text-decoration:none;
}
.button svg{
  width:18px; height:18px; display:inline-block; vertical-align:middle; flex:0 0 auto;
}
.button svg path{ fill: currentColor; }
.button:active{transform:translateY(1px)}
.button.primary{background:var(--brand); color:#051020}
.button.primary:hover{opacity:.95}
.button.secondary{
  background:#121A23; color:#E2EAF2; border:1px solid #1E2A36;
}
.button.secondary:hover{opacity:.95}

.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:.8rem; font-weight:700; color:#D5E6FF;
  background:rgba(79,142,247,.16); border:1px solid rgba(79,142,247,.35);
}

.chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  font-size:.9rem; color:#CFE0F8; background:#121B25; border:1px solid #1F2D3B;
}

/* ===== Hero ===== */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:42px;
  padding:54px 0 24px;
}
.hero h1{
  font-size: clamp(28px, 4.2vw, 48px);
  line-height:1.1; margin:14px 0 12px; font-weight:800;
}
.hero .sub{color:var(--muted); margin:0 0 18px}
.quickpoints{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 18px}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:32px}
}

/* ===== Phone demo card (right side of hero) ===== */
.card{
  background:linear-gradient(180deg,#0E1620,#0D1117);
  border:1px solid #182331; border-radius:22px; padding:20px;
  box-shadow: var(--shadow);
}
.phone-wrap{display:flex; align-items:center; justify-content:center}
.phone{
  width: 310px; height: 620px; border-radius:40px; padding:14px;
  background:#0A0F14; border:1px solid #1A2633; position:relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03), 0 20px 60px rgba(0,0,0,.35);
}
.screen{
  height:100%; border-radius:28px; background:linear-gradient(180deg,#0A121B,#0B1620);
  border:1px solid #152132; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.qr-pulse{position:absolute; inset:0; display:grid; place-items:center; opacity:.9}
.qr-chips{display:grid; grid-template-columns:repeat(3, 16px); gap:6px}
.qr-chips span{width:16px; height:16px; background:#D6E6FF; opacity:.2; border-radius:3px; animation:pulse 1.8s infinite}
.qr-chips span:nth-child(3n+2){animation-delay:.2s}
.qr-chips span:nth-child(3n){animation-delay:.4s}
@keyframes pulse{
  0%,100%{opacity:.18; transform:scale(.98)}
  50%{opacity:.35; transform:scale(1)}
}
.scan-beam{
  position:absolute; top:-20%; left:0; right:0; height:80px;
  background:linear-gradient(180deg, transparent, rgba(90,170,255,.25), transparent);
  filter: blur(8px); animation:scan 3.2s linear infinite;
}
@keyframes scan{
  0%{transform:translateY(0)}
  100%{transform:translateY(140%)}
}
.card-draft{
  position:absolute; bottom:86px; left:18px; right:18px;
  background:#0E1926; border:1px solid #1B2A3C; color:#CFE0F8;
  border-radius:12px; padding:10px 12px; font-size:.92rem;
  box-shadow: var(--shadow);
}
.typing{margin-left:6px}
.typing .dot{
  display:inline-block; width:6px; height:6px; border-radius:999px; background:#CFE0F8;
  animation:blink 1.2s infinite; margin:0 1px; opacity:.75;
}
.typing .dot:nth-child(2){animation-delay:.15s}
.typing .dot:nth-child(3){animation-delay:.3s}
@keyframes blink{
  0%,100%{opacity:.2; transform:translateY(0)}
  50%{opacity:1; transform:translateY(-2px)}
}
.post-btn{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#04101F; font-weight:800;
  padding:10px 16px; border-radius:999px; border:0; box-shadow: var(--shadow);
}

/* ===== Simple fades ===== */
.fade-up{animation:fadeUp .5s ease both}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

/* ===== Carousel zoom + parallax + blur ===== */
.carousel-wrap{
  position:relative;
  overflow:hidden;
  margin-top:32px;
  display:flex;
  justify-content:center;
  align-items:center;
  overscroll-behavior: contain;
}
.carousel-track{
  display:flex;
  gap:28px;                 
  transition:transform .6s ease-in-out;
  will-change:transform;
  align-items:stretch;
}
.carousel-item{
  flex: 0 0 auto;         /* prevent flex shrink on mobile */
  min-width:260px;
  border-radius:16px;
  transition:transform .5s ease, opacity .5s ease, filter .5s ease;
  transform:scale(.85);
  opacity:.7;
  will-change:transform, filter, opacity;
}
.carousel-item.active{
  transform:scale(1.05);
  opacity:1;
  z-index:2;
}
.carousel-item img{
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:var(--shadow);
  display:block;
}
.carousel-item .caption{
  padding:10px 14px;
  text-align:center;
  font-size:.95rem;
  color:var(--muted);
}
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid #E4E7EC;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:var(--shadow);
  font-size:1.4rem;
  z-index:10;
}
#prevBtn{left:0}
#nextBtn{right:0}

/* Optional hover pop */
.carousel-item:hover{
  transform:scale(1.07);
  opacity:1;
  filter:blur(0);
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .carousel-track,
  .carousel-item{transition:none !important}
}

/* ===== Sections ===== */
.section{padding:64px 0}
.section h2{
  text-align:center; margin:0 0 10px; font-size: clamp(22px, 3.6vw, 34px);
  font-weight:800;
}
.section-sub{
  text-align:center; color:var(--muted); max-width:720px; margin:0 auto 28px;
}

/* Steps grid */
.steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.step h3{margin:10px 0 6px; font-size:1.05rem}
.step p{margin:0; color:var(--ink); opacity:.9}
.step .step-icon{
  width:44px; height:44px; border-radius:12px;
  background:rgba(79,142,247,.12); color:#BBD2FF;
  display:grid; place-items:center; margin-bottom:8px;
  border:1px solid rgba(79,142,247,.25);
}
.step .step-icon svg{width:22px; height:22px}

/* Benefits chips row */
.benefits{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px;
}

/* ===== Contact grid ===== */
.cta-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:20px;
}
.cta-item svg{ margin-right:0; } /* gap handled by .button */

/* ===== Mobile & small screens ===== */
@media (max-width: 768px){
  .menu{display:none}
  .mobile-toggle{display:inline-flex}

  /* Mobile dropdown menu */
  .menu{
    position:absolute;
    top:64px; left:16px; right:16px;
    background: rgba(10,14,18,.96);
    backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid #1E2A36;
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
    z-index: 60;
    flex-direction: column;
    gap: 10px;
  }
  .menu.open{ display:flex !important; }
  .menu:not(.open){ display:none; }
  .menu a{
    margin:0;
    padding:10px 12px;
    border-radius:10px;
    background:#121A23;
    border:1px solid #1E2A36;
    text-align:left;
  }

  /* Global spacing */
  .container{padding:0 16px;}
  .section{padding:40px 0;}
  .section-sub{margin-bottom:20px;}

  /* Hero stack */
  .hero{grid-template-columns:1fr; padding-top:32px; gap:30px;}
  .hero h1{font-size: clamp(24px, 10vw, 40px); margin:10px 0 10px;}
  .cta-row{justify-content:center;}

  /* Phone visual */
  .hero-visual{order:-1; display:flex; justify-content:center; padding:0 10px;}
  .phone-wrap{padding:10px; max-width:300px;}
  .phone{width:260px; height:500px; padding:10px;}
  .card-draft{bottom:50px; font-size:.8rem;}
  .post-btn{bottom:12px; padding:6px 12px; font-size:.9rem;}

  /* Hero chips */
  .quickpoints{flex-direction:column; align-items:center; gap:8px; margin:10px 0 18px;}
  .quickpoints .chip{padding:8px 16px; font-size:.85rem; width:fit-content; max-width:90%;}

  /* Steps */
  .steps{grid-template-columns:1fr; gap:16px; padding:0 10px;}
  .step{text-align:center; padding:20px;}
  .step-icon{margin:0 auto 8px;}

  /* Benefits */
  .benefits{justify-content:center; margin-top:16px;}

  /* Contact */
  .contact-card{padding:20px;}

  /* Carousel */
  .carousel-item{min-width:220px}
  #prevBtn,#nextBtn{display:none}

  /* Contact grid: 2 columns on mobile */
  .cta-grid{grid-template-columns: repeat(2, 1fr);}
}

/* ===== Tiny phones ===== */
@media (max-width: 360px){
  .button{padding:10px 14px}
  .button svg{width:16px; height:16px}
}

/* (debug border removed) */