*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#f62963;--pink-light:#fff0f4;--pink-mid:#ffd6e3;
  --black:#0d0d0d;--near-white:#f9f9f8;--white:#ffffff;
  --gray-100:#f3f3f1;--gray-200:#e6e6e2;--gray-300:#d0d0cb;--gray-400:#afafaa;
  --text:#111110;--text-muted:#686863;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --radius:12px;--radius-sm:8px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--near-white);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── LOGO COMPONENT ── icon PNG + CSS text, no black-bg problem ──────────── */
.site-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
.logo-icon{height:30px;width:30px;border-radius:5px;display:block;flex-shrink:0}
.logo-text{font-family:var(--font);font-size:1.3rem;font-weight:700;color:var(--black);letter-spacing:-0.02em;line-height:1}
.logo-text em{color:var(--pink);font-style:normal}
/* White version for dark sections */
.logo-white .logo-text{color:#f5f5f5}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;height:64px;background:rgba(249,249,248,0.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--gray-200)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-login{font-size:.875rem;font-weight:500;color:var(--text-muted);text-decoration:none;padding:.5rem 1rem;border-radius:var(--radius-sm);transition:background .15s}
.nav-login:hover{background:var(--gray-100);color:var(--text)}
.nav-cta{background:var(--pink);color:#fff;border:none;border-radius:var(--radius-sm);padding:.5rem 1.25rem;font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .15s;white-space:nowrap}
.nav-cta:hover{opacity:.88}

/* ── HERO: centred ───────────────────────────────────────────────────────── */
.hero-outer{max-width:1280px;margin:0 auto;padding:64px 3rem 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero-text{padding:4rem 0 2.5rem;max-width:680px;width:100%;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:1.5rem}
.hero-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--pink)}
h1{font-size:clamp(2.5rem,5vw,3.9rem);font-weight:700;line-height:1.06;color:var(--black);margin-bottom:1.25rem;letter-spacing:-.03em}
h1 .accent{color:var(--pink)}
.hero-sub{font-size:1.05rem;color:var(--text-muted);line-height:1.7;max-width:560px;margin:0 auto 2.25rem}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.btn-primary{background:var(--pink);color:#fff;padding:.8rem 1.75rem;border-radius:var(--radius-sm);border:none;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .15s;display:inline-block}
.btn-primary:hover{opacity:.88}
.btn-secondary{background:var(--white);color:var(--text);padding:.8rem 1.75rem;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);font-family:var(--font);font-size:.9rem;font-weight:500;cursor:pointer;text-decoration:none;transition:border-color .15s;display:inline-block}
.btn-secondary:hover{border-color:var(--gray-400)}

/* ── SCREENSHOT GRID (centred under hero) ────────────────────────────────── */
.screenshot-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:12px;padding-bottom:4rem;width:100%;max-width:1080px}
.ss-main{grid-row:1/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--gray-200);box-shadow:0 8px 32px rgba(0,0,0,.07)}
.ss-main img,.ss-side img{width:100%;display:block}
.ss-side{border-radius:var(--radius);overflow:hidden;border:1px solid var(--gray-200);box-shadow:0 4px 16px rgba(0,0,0,.06)}

/* ── SHARED ──────────────────────────────────────────────────────────────── */
.section-wrap{max-width:1280px;margin:0 auto;padding:6rem 3rem}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:1rem;display:block}
h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;line-height:1.1;color:var(--black);margin-bottom:1rem;letter-spacing:-.025em}
h2 .accent{color:var(--pink)}
.section-sub{font-size:1.05rem;color:var(--text-muted);line-height:1.75;max-width:540px}
.divider{border:none;border-top:1px solid var(--gray-200);margin:0 3rem}

/* ── PAIN ────────────────────────────────────────────────────────────────── */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-200);border-radius:var(--radius);overflow:hidden;margin-top:3.5rem}
.pain-item{background:var(--near-white);padding:2.25rem}
.pain-num{font-size:2.25rem;font-weight:700;color:var(--gray-200);margin-bottom:1rem;letter-spacing:-.04em}
.pain-head{font-weight:700;font-size:1rem;margin-bottom:.5rem;color:var(--black)}
.pain-text{font-size:.875rem;color:var(--text-muted);line-height:1.7}

/* ── WHO - dark ──────────────────────────────────────────────────────────── */
.who-bg{background:var(--black)}
.who-bg .eyebrow{color:rgba(246,41,99,.9)}
.who-bg h2{color:#f5f5f5}
.who-bg .section-sub{color:rgba(255,255,255,.6);max-width:100%}
.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;margin-top:3.5rem}
.type-card{background:#181818;padding:2rem 1.75rem;transition:background .15s}
.type-card:hover{background:#1f1f1f}
.type-icon{font-size:2rem;margin-bottom:1rem;line-height:1;display:block}
.type-name{font-size:1.1rem;font-weight:700;color:#f0f0f0;margin-bottom:.4rem}
.type-desc{font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.65}
.roles-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem}
.role-pill{font-size:.78rem;font-weight:500;padding:.35rem .875rem;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);transition:all .15s}
.role-pill:hover{border-color:rgba(246,41,99,.5);color:rgba(246,41,99,.85)}

/* ── PILLARS ─────────────────────────────────────────────────────────────── */
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem}
.pillar{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:2.25rem;display:flex;flex-direction:column}
.pillar-num{font-size:2.75rem;font-weight:700;line-height:1;margin-bottom:1.25rem;letter-spacing:-.04em;color:var(--pink)}
.pillar-name{font-size:1.25rem;font-weight:700;color:var(--black);margin-bottom:.5rem}
.pillar-desc{font-size:.875rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.5rem}
.pillar-features{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:auto}
.pillar-features li{font-size:.82rem;color:var(--text-muted);padding-left:1.1rem;position:relative;line-height:1.5}
.pillar-features li::before{content:'—';position:absolute;left:0;color:var(--pink)}
.pillar-note{font-size:.75rem;color:var(--pink);font-weight:600;margin-top:1rem}

/* ── INTEL ───────────────────────────────────────────────────────────────── */
.intel-header{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-bottom:3.5rem}
.intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.intel-card{padding:1.5rem;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);transition:border-color .15s}
.intel-card:hover{border-color:var(--pink)}
.intel-step{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:.6rem}
.intel-name{font-weight:700;font-size:.9rem;margin-bottom:.4rem;color:var(--black)}
.intel-desc{font-size:.82rem;color:var(--text-muted);line-height:1.6}

/* ── TOOLS ───────────────────────────────────────────────────────────────── */
.tools-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3.5rem}
.tools-list{display:flex;flex-direction:column}
.tool-item{padding:1rem 0;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tool-item:first-child{border-top:1px solid var(--gray-200)}
.tool-name{font-size:.875rem;font-weight:600;color:var(--text)}
.tool-note{font-size:.78rem;color:var(--text-muted);margin-top:.1rem}
.tool-tag{font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pink);background:var(--pink-light);padding:.2rem .55rem;border-radius:4px;white-space:nowrap;flex-shrink:0}
.conf-head{font-size:1.35rem;font-weight:700;margin-bottom:.6rem;color:var(--black);letter-spacing:-.02em}
.conf-sub{font-size:.875rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.75rem}
.confidence-grid{display:flex;flex-direction:column;gap:.75rem}
.conf-row{display:flex;align-items:flex-start;gap:.875rem;padding:.875rem 1rem;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm)}
.conf-icon{font-size:.95rem;min-width:1.4rem;text-align:center;margin-top:1px}
.conf-label{font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:.15rem}
.conf-desc{font-size:.78rem;color:var(--text-muted)}

/* ── SECURITY - dark ─────────────────────────────────────────────────────── */
.security-bg{background:var(--black)}
.security-bg .eyebrow{color:rgba(246,41,99,.9)}
.security-bg h2{color:#f5f5f5}
.security-bg .section-sub{color:rgba(255,255,255,.6)}
.security-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3.5rem}
.sec-item{padding:1.5rem;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);transition:border-color .15s}
.sec-item:hover{border-color:rgba(246,41,99,.4)}
.sec-icon{font-size:1.75rem;margin-bottom:.875rem;line-height:1;display:block}
.sec-name{font-size:.9rem;font-weight:700;color:#f0f0f0;margin-bottom:.35rem}
.sec-desc{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.6}

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem;align-items:start}
.plan-card{border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);overflow:hidden}
.plan-card.featured{border:2px solid var(--pink)}
.plan-header{padding:1.75rem 1.75rem 1.5rem}
.plan-badge{display:inline-block;font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pink);background:var(--pink-light);padding:.25rem .65rem;border-radius:4px;margin-bottom:1.1rem}
.plan-name{font-size:1.4rem;font-weight:700;color:var(--black);margin-bottom:.35rem;letter-spacing:-.02em}
.plan-price{font-size:1.9rem;font-weight:700;color:var(--black);letter-spacing:-.03em;margin-bottom:.15rem}
.plan-price-note{font-size:.78rem;color:var(--text-muted);margin-bottom:1.1rem}
.plan-cta{display:block;text-align:center;text-decoration:none;padding:.7rem;font-size:.875rem;font-weight:600;transition:opacity .15s;border-radius:var(--radius-sm)}
.plan-cta-ghost{border:1.5px solid var(--gray-200);color:var(--text-muted)}
.plan-cta-ghost:hover{border-color:var(--gray-400);color:var(--text)}
.plan-cta-solid{background:var(--pink);color:#fff}
.plan-cta-solid:hover{opacity:.88}
.plan-accordion{border-top:1px solid var(--gray-100)}
.accordion-toggle{width:100%;background:none;border:none;cursor:pointer;padding:.875rem 1.75rem;display:flex;align-items:center;justify-content:space-between;font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--text-muted);text-align:left;transition:color .15s}
.accordion-toggle:hover{color:var(--text)}
.accordion-arrow{font-size:.65rem;transition:transform .2s;flex-shrink:0;margin-left:.5rem}
.accordion-toggle.open .accordion-arrow{transform:rotate(180deg)}
.accordion-body{display:none;padding:0 1.75rem 1.5rem}
.accordion-body.open{display:block}
.plan-section-label{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin:.875rem 0 .5rem}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.plan-features li{font-size:.82rem;color:var(--text-muted);padding-left:1.2rem;position:relative;line-height:1.5}
.plan-features li::before{content:'✓';position:absolute;left:0;color:var(--pink);font-size:.75rem;font-weight:700}
.plan-features.limits li::before{content:'—';color:var(--gray-400)}
.plan-integration-note{font-size:.75rem;color:var(--text-muted);font-style:italic;margin-top:.875rem;line-height:1.55}
.pricing-note{text-align:center;margin-top:1.25rem;font-size:.82rem;color:var(--text-muted)}

/* ── ROADMAP ─────────────────────────────────────────────────────────────── */
.roadmap-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.roadmap-left .section-sub{margin-bottom:2rem}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border:1.5px solid var(--gray-300);border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;color:var(--text);text-decoration:none;transition:border-color .15s}
.btn-outline:hover{border-color:var(--gray-400)}
.roadmap-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.roadmap-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem;transition:border-color .15s}
.roadmap-card:hover{border-color:var(--pink-mid)}
.roadmap-card-icon{font-size:1.1rem;margin-bottom:.875rem;width:2.5rem;height:2.5rem;background:var(--pink-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.roadmap-card-title{font-size:.95rem;font-weight:700;color:var(--black);margin-bottom:.4rem}
.roadmap-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.6}

/* ── CTA PINK ────────────────────────────────────────────────────────────── */
.cta-section{background:var(--pink);padding:6rem 3rem;text-align:center}
.cta-section .eyebrow{color:rgba(255,255,255,.55)}
.cta-section h2{color:#fff;max-width:520px;margin:0 auto 1.1rem}
.cta-section .section-sub{color:rgba(255,255,255,.7);margin:0 auto 2.5rem}
.btn-white{background:#fff;color:var(--pink);padding:.8rem 2rem;border-radius:var(--radius-sm);border:none;font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;transition:opacity .15s;display:inline-block}
.btn-white:hover{opacity:.9}
.btn-white-ghost{color:rgba(255,255,255,.82);font-size:.875rem;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.38);padding-bottom:2px}
.btn-white-ghost:hover{color:#fff;border-color:#fff}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}

/* ── RATGEBER ────────────────────────────────────────────────────────────── */
.ratgeber-wrap{max-width:1280px;margin:0 auto;padding:0 3rem 4rem}
.ratgeber-banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--pink-light);border:1px solid var(--pink-mid);border-radius:var(--radius);padding:2rem 2.25rem}
.ratgeber-left{display:flex;align-items:center;gap:1.25rem}
.ratgeber-icon{width:3rem;height:3rem;background:var(--white);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:1px solid var(--pink-mid)}
.ratgeber-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:.2rem}
.ratgeber-title{font-size:1.15rem;font-weight:700;color:var(--black);margin-bottom:.25rem}
.ratgeber-desc{font-size:.875rem;color:var(--text-muted);line-height:1.55}
.btn-pink{background:var(--pink);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-family:var(--font);font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:opacity .15s;display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0}
.btn-pink:hover{opacity:.88}


/* ── USALI DISCLAIMER ────────────────────────────────────────────────────── */
.disclaimer-usali{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--gray-200);font-size:.75rem;color:var(--gray-400);line-height:1.6}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.footer-disclaimer{background:var(--near-white);border-top:1px solid var(--gray-200)}
.footer-disclaimer-inner{max-width:1280px;margin:0 auto;padding:1.75rem 3rem;font-size:.8rem;color:var(--text-muted);line-height:1.65}
footer{background:var(--near-white);border-top:1px solid var(--gray-200)}
footer .inner{max-width:1280px;margin:0 auto;padding:1.25rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-copy{font-size:.8rem;color:var(--text-muted)}
.footer-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:.8rem;color:var(--text-muted);text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--text)}

/* ── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-text>*{animation:fadeUp .6s ease both}
.hero-eyebrow{animation-delay:.05s}
h1{animation-delay:.12s}
.hero-sub{animation-delay:.2s}
.hero-actions{animation-delay:.28s}
.screenshot-grid{animation:fadeUp .7s .2s ease both}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  nav{padding:0 1.5rem}
  .hero-outer{padding:64px 1.5rem 0}
  .screenshot-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .ss-main{grid-row:auto}
  .section-wrap{padding:4.5rem 1.5rem}
  .divider{margin:0 1.5rem}
  .pain-grid,.types-grid,.pillars-grid,.intel-grid,.security-features,.plans-grid,.roadmap-cards{grid-template-columns:1fr 1fr}
  .tools-layout,.intel-header,.roadmap-layout{grid-template-columns:1fr;gap:2.5rem}
  .cta-section{padding:5rem 1.5rem}
  .ratgeber-wrap{padding:0 1.5rem 3rem}
  .ratgeber-banner{flex-direction:column;align-items:flex-start}
  footer .inner,.footer-disclaimer-inner{padding:1.25rem 1.5rem}
}
@media(max-width:640px){
  .pain-grid,.types-grid,.pillars-grid,.intel-grid,.security-features,.plans-grid,.roadmap-cards{grid-template-columns:1fr}
  .screenshot-grid{grid-template-columns:1fr}
  .hero-text{padding:3rem 0 2rem}
}