/* ───────────────────────── Design tokens ───────────────────────── */
:root{
  --primary: #1f3a5f;          /* refined navy */
  --primary-deep: #0f1d2e;     /* deep charcoal-navy */
  --primary-soft: #e3e9f1;     /* soft navy tint */
  --accent: #c8a45c;           /* warm muted gold */
  --accent-bright: #ddc188;
  --ink: #1b2530;
  --ink-soft: #56636e;
  --ink-faint: #8b96a0;
  --paper: #fbfaf7;            /* warm off-white */
  --surface: #f4f2ec;
  --surface-2: #ece9e0;
  --line: #e6e2d8;
  --white: #ffffff;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --t-hero: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
  --t-h2: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
  --t-h3: clamp(1.15rem, 1rem + .5vw, 1.35rem);
  --t-lede: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(15,29,46,.06);
  --shadow-md: 0 10px 30px rgba(15,29,46,.10);
  --shadow-lg: 0 28px 60px rgba(15,29,46,.16);
  --wide: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 24px}
::selection{background:var(--primary-soft)}

/* ───────────────────────── Type helpers ───────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--accent)}
.eyebrow--light{color:var(--accent-bright)}
.eyebrow--light::before{background:var(--accent)}
.section-title{font-family:var(--display);font-weight:500;font-size:var(--t-h2);line-height:1.12;letter-spacing:-.01em;margin-top:14px;color:var(--ink)}
.section-title em{font-style:italic;color:var(--primary)}
.lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:58ch;margin-top:16px}

/* ───────────────────────── Buttons ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--primary-deep)}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--outline-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{padding:16px 32px;font-size:1.02rem}

/* ───────────────────────── Header ───────────────────────── */
.header{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.header.is-scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{flex-shrink:0;line-height:0;border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm)}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{font-family:var(--display);font-size:1.12rem;font-weight:500;line-height:1.15;color:var(--ink);white-space:nowrap}
.brand__loc{font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav a:hover{color:var(--primary)}
.header__cta{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn svg{width:26px;height:26px;stroke:var(--ink)}
.mobile-nav{display:none;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 24px 24px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 4px;font-weight:500;font-size:1.05rem;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:18px;width:100%}

/* ───────────────────────── Hero ───────────────────────── */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 600px at 90% -10%, var(--primary-soft) 0%, transparent 60%),
  var(--paper)}
.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-block:72px 88px}
.hero h1{font-family:var(--display);font-weight:500;font-size:var(--t-hero);line-height:1.05;letter-spacing:-.015em;margin-top:20px}
.hero h1 .accent{display:block;font-style:italic;color:var(--primary)}
.hero__lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:52ch;margin-top:22px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px}
.hero__trust li{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.hero__trust svg{width:19px;height:19px;fill:var(--primary);flex-shrink:0}

/* CSS browser mockup (no stock photos) */
.hero__media{position:relative}
.mock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.mock__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.mock__bar>span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.mock__bar>span:first-child{background:#e0857d}
.mock__bar>span:nth-child(2){background:#e6c074}
.mock__bar>span:nth-child(3){background:#8fc08a}
.mock__url{margin-left:12px;flex:1;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.74rem;color:var(--ink-faint);padding:5px 14px}
.mock__body{padding:30px 28px 34px;background:
  radial-gradient(500px 240px at 85% -20%, var(--primary-soft) 0%, transparent 60%), #fff}
.mock__hero{max-width:78%}
.mock__h1{height:18px;border-radius:6px;background:var(--primary-deep);width:90%}
.mock__h1::after{content:"";display:block;height:18px;border-radius:6px;background:var(--primary);width:60%;margin-top:9px}
.mock__h2{height:9px;border-radius:5px;background:var(--surface-2);width:100%;margin-top:18px}
.mock__h2::after{content:"";display:block;height:9px;border-radius:5px;background:var(--surface-2);width:80%;margin-top:7px}
.mock__btn{height:30px;width:120px;border-radius:999px;background:var(--accent);margin-top:20px}
.mock__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.mock__card{height:74px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.mock__card:nth-child(2){background:var(--primary-soft)}
.mock__badge{position:absolute;top:-14px;right:-10px;background:var(--primary-deep);color:#fff;border-radius:999px;padding:10px 18px;font-size:.8rem;font-weight:600;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px}
.mock__badge svg{width:15px;height:15px;fill:var(--accent)}

/* ───────────────────────── Trust strip ───────────────────────── */
.strip{background:var(--primary-deep);color:#fff}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:30px}
.strip__item{text-align:center;position:relative}
.strip__item + .strip__item::before{content:"";position:absolute;left:-12px;top:10%;height:80%;width:1px;background:rgba(255,255,255,.14)}
.strip__item strong{display:block;font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--accent)}
.strip__item span{display:block;font-size:.82rem;color:rgba(255,255,255,.72);margin-top:3px}

/* ───────────────────────── Sections ───────────────────────── */
.section{padding:100px 0}
.section--surface{background:var(--surface)}
.section-head{max-width:680px}
.section-head--center{margin:0 auto;text-align:center}
.section-head--center .lede{margin-left:auto;margin-right:auto}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .eyebrow::after{content:"";width:28px;height:1.5px;background:var(--accent)}

/* Generic card grid (What we do) */
.grid-4{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card__icon{width:52px;height:52px;border-radius:14px;background:var(--primary-soft);display:grid;place-items:center;margin-bottom:22px}
.card__icon svg{width:26px;height:26px;stroke:var(--primary-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--display);font-weight:500;font-size:var(--t-h3);line-height:1.25}
.card p{font-size:.93rem;color:var(--ink-soft);margin-top:10px}

/* Who it's for */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px}
.who-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.who-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--primary-soft)}
.who-card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:0;transition:opacity .3s}
.who-card:hover::after{opacity:1}
.who-card__tag{font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--ink)}
.who-card p{font-size:.93rem;color:var(--ink-soft);margin-top:10px}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:60px;counter-reset:none}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px}
.step__num{font-family:var(--display);font-style:italic;font-weight:500;font-size:2.2rem;color:var(--accent)}
.step h3{font-family:var(--display);font-weight:500;font-size:1.25rem;margin-top:10px;line-height:1.25}
.step p{font-size:.93rem;color:var(--ink-soft);margin-top:10px}

/* Guarantee */
.guarantee{background:
  radial-gradient(800px 380px at 10% 120%, var(--primary) 0%, transparent 60%),
  var(--primary-deep);color:#fff}
.guarantee__in{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding-block:64px}
.guarantee__seal{width:78px;height:78px;border-radius:50%;background:rgba(200,164,92,.16);display:grid;place-items:center;flex-shrink:0}
.guarantee__seal svg{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guarantee h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);line-height:1.15}
.guarantee p{color:rgba(255,255,255,.78);margin-top:12px;max-width:60ch}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:58px;max-width:880px;margin-left:auto;margin-right:auto}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 34px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card--alt{background:var(--primary-deep);color:#fff;border-color:var(--primary-deep)}
.price-card__tag{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);padding:6px 12px;border-radius:999px}
.price-card--alt .price-card__tag{color:var(--accent);background:rgba(200,164,92,.16)}
.price-card h3{font-family:var(--display);font-weight:500;font-size:1.5rem;margin-top:18px}
.price-card__price{font-family:var(--display);font-weight:500;font-size:3rem;line-height:1;margin-top:14px;color:var(--primary)}
.price-card--alt .price-card__price{color:#fff}
.price-card__price .from{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);vertical-align:middle;margin-right:6px}
.price-card__price .per{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.6)}
.price-card__sub{font-size:.9rem;color:var(--ink-soft);margin-top:14px}
.price-card--alt .price-card__sub{color:rgba(255,255,255,.72)}
.price-card__list{margin:24px 0 28px;display:grid;gap:12px;flex:1}
.price-card__list li{position:relative;padding-left:28px;font-size:.93rem;color:var(--ink)}
.price-card--alt .price-card__list li{color:rgba(255,255,255,.9)}
.price-card__list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--primary-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f3a5f'%3E%3Cpath d='M9.5 16.2 5.3 12l1.4-1.4 2.8 2.8 7-7L18 7.8z'/%3E%3C/svg%3E");background-size:18px;background-repeat:no-repeat}
.price-card--alt .price-card__list li::before{background-color:rgba(200,164,92,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c8a45c'%3E%3Cpath d='M9.5 16.2 5.3 12l1.4-1.4 2.8 2.8 7-7L18 7.8z'/%3E%3C/svg%3E")}
.price-card .btn{align-self:flex-start}
.price-card--alt .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.price-card--alt .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.price-note{text-align:center;color:var(--ink-soft);font-size:.95rem;margin-top:34px;max-width:60ch;margin-left:auto;margin-right:auto}

/* FAQ */
.faq{max-width:760px;margin:50px auto 0;display:grid;gap:14px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:var(--display);font-weight:500;font-size:1.12rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:18px;transition:color .2s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);flex-shrink:0;transition:transform .25s var(--ease);margin-top:-4px}
.faq__item[open] summary::after{transform:rotate(225deg);margin-top:4px}
.faq__item summary:hover{color:var(--primary)}
.faq__a{padding:0 26px 24px}
.faq__a p{color:var(--ink-soft);font-size:.97rem}

/* About / founder */
.about__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.founder-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px 36px;text-align:center;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.founder-card::before{content:"";position:absolute;inset:0 0 auto 0;height:90px;background:
  radial-gradient(220px 120px at 50% -30%, var(--primary-soft) 0%, transparent 70%)}
.founder-card__avatar{position:relative;width:108px;height:108px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-deep));display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.founder-card__avatar span{font-family:var(--display);font-style:italic;font-size:2.3rem;color:var(--accent)}
.founder-card__name{font-family:var(--display);font-weight:500;font-size:1.5rem}
.founder-card__role{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-top:7px}
.founder-card__loc{font-size:.9rem;color:var(--ink-faint);margin-top:10px}
.about__copy .body{color:var(--ink-soft);margin-top:16px}
.about__copy .hero__ctas{margin-top:28px}

/* Final CTA */
.cta{background:
  radial-gradient(900px 420px at 14% 120%, var(--primary) 0%, transparent 60%),
  var(--primary-deep);color:#fff;text-align:center;padding:104px 0}
.cta .eyebrow{justify-content:center;margin-bottom:6px}
.cta h2{font-family:var(--display);font-weight:500;font-size:var(--t-h2);line-height:1.15;max-width:20ch;margin:0 auto}
.cta h2 em{font-style:italic;color:var(--accent)}
.cta p{color:rgba(255,255,255,.78);max-width:56ch;margin:18px auto 0;font-size:var(--t-lede)}
.cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:38px}

/* Footer */
.footer{background:#0c1722;color:rgba(255,255,255,.72);padding:72px 0 0;font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:52px}
.footer .brand__name{color:#fff}
.footer .brand__loc{color:rgba(255,255,255,.5)}
.footer__desc{margin-top:18px;max-width:36ch;line-height:1.7}
.footer h4{color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.footer li{margin-bottom:10px}
.footer a:hover{color:var(--accent)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:rgba(255,255,255,.45)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1020px){
  .nav{display:none}
  .menu-btn{display:block}
  .hero__in{grid-template-columns:1fr;gap:48px;padding-block:54px 70px}
  .hero__media{max-width:560px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .who-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .strip__in{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .strip__item:nth-child(2)::before{display:none}
  .guarantee__in{grid-template-columns:auto 1fr;gap:28px}
  .guarantee .btn{grid-column:1/-1;justify-self:start}
  .about__in{grid-template-columns:1fr;gap:48px}
  .founder-card{max-width:380px;margin:0 auto}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .section{padding:68px 0}
  .grid-4,.who-grid,.steps,.price-grid{grid-template-columns:1fr}
  .strip__in{grid-template-columns:1fr 1fr}
  .strip__item::before{display:none!important}
  .guarantee__in{grid-template-columns:1fr;text-align:left;gap:22px}
  .footer__grid{grid-template-columns:1fr}
  .header__cta .btn{padding:10px 15px;font-size:.8rem}
  .header__in{gap:10px;height:68px}
  .brand{flex:1;min-width:0}
  .brand__loc{display:none}
  .brand__name{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mock__badge{right:0;font-size:.72rem;padding:8px 14px}
}
@media (max-width: 420px){
  /* On the narrowest phones the PW monogram alone carries the brand */
  .header .brand__text{display:none}
}