:root{
    /* Brand canonical (from the guideline) */
    --black:#000000;
    --off-white:#F5F5F5;
    --red:#DE3A3A;

    /* Functional extensions */
    --red-hover:#C32F2F;
    --surface-1:#0B0B0C;
    --surface-2:#141416;
    --muted:#C2C2C4;        /* readable secondary text on black */
    --muted-2:#8C8C8E;      /* dim meta text */
    --hairline:rgba(245,245,245,0.12);
    --hairline-strong:rgba(245,245,245,0.20);
    --red-glow:rgba(222,58,58,0.18);

    /* Type */
    --font-display:'Bellefair', Georgia, 'Times New Roman', serif;
    --font-sans:'Abel', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --container:1200px;
    --gutter:clamp(1.25rem, 5vw, 3rem);
    --header-h:76px;
    --section-y:clamp(5rem, 9vw, 9.5rem);
    --radius-sm:2px;
    --radius-md:4px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--black);
    color:var(--off-white);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}

  .wrap{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding-inline:var(--gutter);
  }

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    height:var(--header-h);
    display:flex;
    align-items:center;
    transition:background .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  .site-header.scrolled{
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  .brand{display:flex;align-items:center;gap:11px;}
  .brand .mark{width:34px;height:26px;fill:var(--red);flex:none;}
  .brand .wordmark{
    font-family:var(--font-display);
    font-size:1.4rem;
    letter-spacing:.01em;
    color:var(--off-white);
    line-height:1;
  }
  .nav-links{display:flex;align-items:center;gap:34px;}
  .nav-links a{
    position:relative;
    font-size:.8rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    padding:6px 0;
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:"";
    position:absolute;left:0;bottom:0;
    height:1.5px;width:0;
    background:var(--red);
    transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--off-white);}
  .nav-links a:hover::after{width:100%;}

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-sans);
    font-size:.82rem;
    letter-spacing:.11em;
    text-transform:uppercase;
    padding:.95rem 1.7rem;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    cursor:pointer;
    transition:background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--red);color:var(--black);border-color:var(--red);}
  .btn-primary:hover{background:#E85553;border-color:#E85553;}
  .btn-ghost{background:transparent;color:var(--off-white);border-color:var(--hairline-strong);}
  .btn-ghost:hover{border-color:var(--red);color:var(--off-white);}
  .btn-outline-red{
    background:transparent;color:var(--off-white);border-color:var(--red);
    padding:.7rem 1.25rem;font-size:.76rem;
  }
  .btn-outline-red:hover{background:var(--red);color:var(--black);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:calc(100vh - var(--header-h));
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:clamp(2rem,5vw,5rem);
    padding-block:clamp(2.5rem,6vh,5rem);
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    font-size:.82rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(245,245,245,0.86);
    margin:0 0 1.6rem;
  }
  .eyebrow .tick{
    display:inline-block;width:26px;height:2px;
    background:var(--red);margin-right:14px;flex:none;
  }
  .hero-title{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2.6rem, 5.4vw, 4.6rem);
    line-height:1.04;
    letter-spacing:-0.005em;
    margin:0;
    max-width:13ch;
    color:var(--off-white);
  }
  .hero-sub{
    font-size:clamp(1.05rem, 1.55vw, 1.26rem);
    line-height:1.62;
    color:var(--muted);
    margin:1.6rem 0 0;
    max-width:34em;
  }
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem;}

  .hero-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(1rem,2.2vw,1.6rem);
    min-height:280px;
  }
  .visual-tagline{
    position:relative;z-index:1;
    margin:0;
    font-size:.9rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    text-align:center;
    color:rgba(245,245,245,0.82);
  }
  .hero-visual::before{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:118%;height:118%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle at center, var(--red-glow), transparent 62%);
    filter:blur(18px);
    z-index:0;
  }
  .hero-visual .mark{
    position:relative;z-index:1;
    width:clamp(220px, 32vw, 430px);
    height:auto;
    fill:var(--red);
    filter:drop-shadow(0 0 46px rgba(222,58,58,0.28));
  }

  /* Scroll cue */
  .scroll-cue{
    position:absolute;
    left:var(--gutter);bottom:26px;
    display:inline-flex;align-items:center;gap:10px;
    font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-2);
  }
  .scroll-cue svg{width:14px;height:14px;stroke:var(--red);animation:nudge 1.8s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  /* ---------- Trust strip ---------- */
  .trust{
    border-top:1px solid var(--hairline);
    padding-block:clamp(1.75rem, 4vw, 2.75rem);
  }
  .trust-inner{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.85rem clamp(1.5rem, 4vw, 3rem);
  }
  .trust-label{
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted-2);
    flex:none;
  }
  .trust-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.6rem 0;
    list-style:none;margin:0;padding:0;
  }
  .trust-list li{
    display:inline-flex;
    align-items:center;
    font-size:.95rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(245,245,245,0.80);
  }
  .trust-list li:not(:first-child)::before{
    content:"";
    width:4px;height:4px;border-radius:50%;
    background:var(--red);
    margin:0 clamp(1rem, 2.6vw, 1.9rem);
    flex:none;
  }

  /* ---------- Section header (reusable) ---------- */
  .section-head{margin-bottom:clamp(2.5rem, 5vw, 4rem);}
  .kicker{
    display:inline-flex;align-items:center;
    font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(245,245,245,0.86);
    margin:0 0 1.1rem;
  }
  .kicker::before{
    content:"";display:inline-block;
    width:24px;height:2px;background:var(--red);
    margin-right:13px;flex:none;
  }
  .section-title{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
    line-height:1.1;letter-spacing:-0.005em;
    margin:0;max-width:18ch;color:var(--off-white);
  }
  .section-intro{
    font-size:clamp(1.02rem, 1.4vw, 1.18rem);
    line-height:1.6;color:var(--muted);
    margin:1.1rem 0 0;max-width:46ch;
  }

  /* ---------- 3. The problem ---------- */
  .problem{padding-block:var(--section-y);}
  .problem-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(1rem, 2vw, 1.5rem);
  }
  .pain{
    background:var(--surface-1);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:clamp(1.5rem, 2.5vw, 2rem);
  }
  .pain-rule{display:block;width:30px;height:2px;background:var(--red);margin-bottom:1.3rem;}
  .pain-title{
    font-family:var(--font-display);font-weight:400;
    font-size:1.45rem;line-height:1.15;
    margin:0 0 .7rem;color:var(--off-white);
  }
  .pain-desc{font-size:1rem;line-height:1.6;color:var(--muted);margin:0;}
  @media (max-width:820px){ .problem-grid{grid-template-columns:1fr;} }

  /* ---------- 4. The answer (services) ---------- */
  .services{padding-block:var(--section-y);}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(.9rem, 1.6vw, 1.25rem);
  }
  .service{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--surface-1);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:clamp(1.5rem, 2.4vw, 2rem);
    color:inherit;
    min-height:210px;
    transition:border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .service:hover{
    border-color:rgba(222,58,58,0.55);
    background:var(--surface-2);
    transform:translateY(-3px);
  }
  .service:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
  .service-num{
    font-size:.78rem;letter-spacing:.18em;
    color:var(--muted-2);margin-bottom:1.05rem;
  }
  .service-title{
    font-family:var(--font-display);font-weight:400;
    font-size:1.4rem;line-height:1.15;
    margin:0 0 .65rem;color:var(--off-white);
    padding-right:1.4rem;
  }
  .service-desc{font-size:.98rem;line-height:1.55;color:var(--muted);margin:0;}
  .service-arrow{
    position:absolute;
    top:clamp(1.5rem, 2.4vw, 2rem);
    right:clamp(1.5rem, 2.4vw, 2rem);
    font-size:1.15rem;color:var(--muted-2);
    transition:color .25s ease, transform .25s ease;
  }
  .service:hover .service-arrow{color:var(--red);transform:translate(3px,-3px);}
  @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }

  /* ---------- 5. Why Peak CPM ---------- */
  .why{padding-block:var(--section-y);}
  .why-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(2rem, 5vw, 4.5rem);
    align-items:center;
  }
  .portrait-placeholder{
    position:relative;
    aspect-ratio:4 / 5;
    border:1px dashed var(--hairline-strong);
    border-radius:var(--radius-md);
    background:linear-gradient(160deg, var(--surface-2), var(--surface-1));
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.7rem;padding:1.5rem;text-align:center;overflow:hidden;
  }
  .portrait-placeholder .ph-mark{width:66px;height:50px;fill:rgba(222,58,58,0.28);}
  .portrait-placeholder .ph-label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  .portrait-placeholder .ph-note{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);}
  .why-lead{
    font-size:clamp(1.02rem, 1.4vw, 1.16rem);
    line-height:1.7;color:rgba(245,245,245,0.90);
    margin:1.4rem 0 0;max-width:54ch;
  }
  .why-sig{margin:1.5rem 0 0;display:flex;flex-direction:column;gap:.2rem;}
  .why-sig .sig-name{font-family:var(--font-display);font-size:1.35rem;color:var(--off-white);line-height:1;}
  .why-sig .sig-title{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);}
  .proof-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
    margin:clamp(2rem, 3.5vw, 2.75rem) 0 0;padding:0;list-style:none;
  }
  .proof h3{
    display:flex;align-items:flex-start;gap:.6rem;
    font-family:var(--font-sans);font-weight:400;
    font-size:1.05rem;line-height:1.25;color:var(--off-white);margin:0 0 .35rem;
  }
  .proof h3::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--red);margin-top:.4rem;flex:none;
  }
  .proof p{font-size:.92rem;line-height:1.5;color:var(--muted);margin:0;padding-left:1.2rem;}
  @media (max-width:820px){
    .why-grid{grid-template-columns:1fr;}
    .why-media{max-width:360px;}
  }
  @media (max-width:560px){ .proof-grid{grid-template-columns:1fr;} }

  /* ---------- 6. IP and frameworks teaser ---------- */
  .ip{
    background:var(--surface-1);
    border-block:1px solid var(--hairline);
    padding-block:var(--section-y);
  }
  .ip-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(1rem, 1.8vw, 1.4rem);
  }
  .ip-card{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--surface-2);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:clamp(1.5rem, 2.4vw, 2rem);
    color:inherit;
    min-height:220px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .ip-card:hover{border-color:rgba(222,58,58,0.55);transform:translateY(-3px);}
  .ip-card:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
  .ip-tag{
    align-self:flex-start;
    font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted-2);
    border:1px solid var(--hairline);border-radius:999px;
    padding:.3rem .7rem;margin-bottom:1.1rem;
  }
  .ip-title{
    font-family:var(--font-display);font-weight:400;
    font-size:1.42rem;line-height:1.18;
    margin:0 0 .65rem;color:var(--off-white);
  }
  .ip-desc{font-size:.96rem;line-height:1.55;color:var(--muted);margin:0;}
  .ip-link{
    margin-top:auto;padding-top:1.4rem;
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--off-white);
  }
  .ip-link svg{width:16px;height:16px;stroke:var(--red);fill:none;transition:transform .25s ease;}
  .ip-card:hover .ip-link svg{transform:translateX(4px);}
  .ip-all{
    display:inline-flex;align-items:center;gap:.55rem;
    margin-top:clamp(1.75rem, 3vw, 2.5rem);
    font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    transition:color .2s ease;
  }
  .ip-all:hover{color:var(--off-white);}
  .ip-all svg{width:16px;height:16px;stroke:var(--red);fill:none;}
  @media (max-width:820px){ .ip-grid{grid-template-columns:1fr;} }

  /* ---------- 7. Lead magnet band ---------- */
  .lead{padding-block:var(--section-y);}
  .lead-panel{
    position:relative;
    display:grid;grid-template-columns:1.1fr .9fr;
    align-items:center;gap:clamp(2rem, 5vw, 4rem);
    background:linear-gradient(135deg, #161618, #0B0B0C);
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-md);
    padding:clamp(2rem, 5vw, 4rem);
    overflow:hidden;
  }
  .lead-panel::before{
    content:"";position:absolute;
    top:-35%;right:-12%;width:62%;height:170%;
    background:radial-gradient(circle at center, rgba(222,58,58,0.18), transparent 64%);
    pointer-events:none;
  }
  .lead-copy{position:relative;z-index:1;}
  .lead-eyebrow{
    display:inline-flex;align-items:center;gap:.6rem;
    font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(245,245,245,0.86);margin:0 0 1.1rem;
  }
  .lead-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;}
  .lead-title{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);line-height:1.1;
    margin:0;color:var(--off-white);max-width:18ch;
  }
  .lead-sub{
    font-size:clamp(1rem, 1.4vw, 1.14rem);line-height:1.6;
    color:var(--muted);margin:1.1rem 0 0;max-width:42ch;
  }
  .lead-cta{margin-top:1.9rem;}
  .lead-meta{font-size:.8rem;color:var(--muted-2);margin:1.05rem 0 0;}
  .lead-visual{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
  .lead-radar{width:100%;max-width:330px;height:auto;}
  .lead-caption{
    text-align:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted-2);margin:.9rem 0 0;
  }
  @media (max-width:820px){
    .lead-panel{grid-template-columns:1fr;}
    .lead-visual{margin-top:1rem;}
  }

  /* ---------- 8. Call to action band (inverted, high contrast) ---------- */
  .cta-band{
    background:var(--off-white);
    color:var(--black);
    text-align:center;
    padding-block:clamp(4rem, 9vw, 7.5rem);
  }
  .cta-inner{max-width:760px;margin-inline:auto;}
  .cta-mark{display:block;width:48px;height:36px;fill:var(--red);margin:0 auto 1.5rem;}
  .cta-title{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(2.1rem, 4.2vw, 3.4rem);line-height:1.08;
    letter-spacing:-0.01em;margin:0;color:var(--black);
  }
  .cta-sub{
    font-size:clamp(1.02rem, 1.5vw, 1.2rem);line-height:1.6;
    color:#4a4a4a;margin:1.1rem auto 0;max-width:46ch;
  }
  .cta-actions{margin-top:2.2rem;display:flex;justify-content:center;}

  /* ---------- Footer ---------- */
  .site-footer{
    background:var(--surface-1);
    border-top:1px solid var(--hairline);
    padding-top:clamp(3rem, 6vw, 5rem);
  }
  .footer-top{
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr 1.1fr;
    gap:clamp(2rem, 4vw, 3.5rem);
    padding-bottom:clamp(2.5rem, 5vw, 4rem);
  }
  .f-mark-row{display:flex;align-items:center;gap:11px;margin-bottom:1.1rem;}
  .f-mark{width:34px;height:26px;fill:var(--red);flex:none;}
  .f-wordmark{font-family:var(--font-display);font-size:1.4rem;color:var(--off-white);line-height:1;}
  .f-tagline{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:0 0 1.1rem;}
  .f-blurb{font-size:.95rem;line-height:1.6;color:var(--muted);margin:0;max-width:36ch;}
  .footer-col h3{
    font-family:var(--font-sans);font-weight:400;
    font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted-2);margin:0 0 1.2rem;
  }
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
  .footer-col a, .footer-col .f-static{font-size:.95rem;color:var(--muted);}
  .footer-col a{transition:color .2s ease;}
  .footer-col a:hover{color:var(--off-white);}
  .footer-bottom{
    border-top:1px solid var(--hairline);
    padding-block:1.6rem;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
  }
  .footer-bottom p{font-size:.82rem;color:var(--muted-2);margin:0;}
  .footer-legal{display:flex;align-items:center;gap:1.5rem;}
  .footer-legal a{font-size:.82rem;color:var(--muted-2);transition:color .2s ease;}
  .footer-legal a:hover{color:var(--off-white);}
  @media (max-width:860px){
    .footer-top{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1 / -1;}
  }
  @media (max-width:520px){
    .footer-top{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
  }

  /* Entrance */
  .reveal{opacity:0;transform:translateY(16px);animation:riseIn .7s cubic-bezier(.2,.6,.2,1) forwards;}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
  @keyframes riseIn{to{opacity:1;transform:none}}
  .hero-visual{opacity:0;animation:fadeIn 1s ease .25s forwards;}
  @keyframes fadeIn{to{opacity:1}}

  @media (max-width:860px){
    .nav-links{display:none;}
    .hero{grid-template-columns:1fr;gap:2rem;padding-top:1rem;}
    .hero-visual{order:-1;min-height:auto;}
    .hero-visual .mark{width:clamp(150px,46vw,240px);}
    .hero-title{max-width:18ch;}
    .scroll-cue{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal,.hero-visual{animation:none;opacity:1;transform:none;}
    .scroll-cue svg{animation:none;}
    html{scroll-behavior:auto;}
  }

/* Founder portrait (polish) */
.portrait{display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--hairline);}

/* Footer social link */
.footer-col a.f-social{display:inline-flex;align-items:center;gap:7px;}
.footer-col a.f-social svg{width:15px;height:15px;flex:none;}