@import url("fonts.css");

:root{
  --ink:#1d1830; --ink2:#4a4560; --mute:#77728a;
  --paper:#f5f8f8; --card:#ffffff; --blush:#dcf0f3; --sky:#e3e7f2;
  --rose:#12869c; --rose-d:#0d6a7b; --line:#dbe5e7;
  --serif:"Plus Jakarta Sans",system-ui,sans-serif; --sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --r:22px; --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--paper);color:var(--ink);font:400 16.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif);font-weight:400}
em.hl{font-style:normal;color:var(--rose);background:linear-gradient(transparent 64%,var(--blush) 64%,var(--blush) 92%,transparent 92%);padding:0 .06em}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
h3{font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(40px,5.6vw,74px)}
h2{font-size:clamp(30px,4vw,52px)}
h3{font-size:21px;line-height:1.25}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rose);display:inline-flex;gap:10px;align-items:center;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor}
.lead{font-size:19px;color:var(--ink2);max-width:620px}
section{padding:110px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:99px;font:700 15px/1 var(--sans);text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;border:0}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--rose);transform:translateY(-2px);box-shadow:0 12px 28px -12px var(--rose)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}

/* NAV */
header.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
header.nav.s{background:rgba(245,248,248,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 18px/1 var(--sans);letter-spacing:-.02em}
.logo img{width:48px;height:48px}
.logo b{color:var(--rose);font-weight:800}
.nav ul{display:flex;gap:30px;list-style:none;font-weight:600;font-size:15px}
.nav ul a{text-decoration:none;opacity:.8}.nav ul a:hover{opacity:1;color:var(--rose)}
.nav .btn{padding:12px 20px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:.3s}

/* HERO */
.hero{padding:150px 0 90px;position:relative}
.hero::before{content:"";position:absolute;right:-12%;top:-10%;width:65vw;height:65vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle,var(--blush) 0,transparent 65%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1 em{font-style:normal;color:var(--rose);background:linear-gradient(transparent 66%,var(--blush) 66%,var(--blush) 92%,transparent 92%)}
.hero .lead{margin:28px 0 38px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;gap:36px;margin-top:46px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.trust strong{display:block;font:800 32px/1 var(--serif);letter-spacing:-.03em;color:var(--ink);margin-bottom:6px}
.portrait{position:relative;justify-self:center;width:min(100%,430px)}
.portrait .ph{border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--sky);position:relative;z-index:1;box-shadow:0 40px 80px -40px rgba(29,24,48,.45)}
.portrait::before{content:"";position:absolute;inset:28px -22px -22px 28px;border-radius:28px;background:var(--blush);z-index:0}
.portrait .badge{position:absolute;z-index:2;left:-18px;bottom:28px;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 18px 40px -18px rgba(29,24,48,.35);font-size:13px;line-height:1.35;white-space:nowrap}
.portrait .badge b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em}
.portrait .badge span{color:var(--mute)}
.portrait .ph img{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;font-size:13px;font-weight:700;box-shadow:0 18px 40px -18px rgba(29,24,48,.35);display:flex;gap:10px;align-items:center;animation:float 6s ease-in-out infinite}
.chip i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blush);font-size:15px}
.chip small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.chip.c1{left:-46px;top:16%}.chip.c2{right:-30px;top:52%;animation-delay:-2s}.chip.c3{left:-20px;bottom:7%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-8px)}}

/* LOGO BAND */
.band{padding:34px 0;border-block:1px solid var(--line)}
.band .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band p{font-size:13px;color:var(--mute);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.band ul{display:flex;gap:44px;list-style:none;flex-wrap:wrap;font:700 20px/1 var(--serif);letter-spacing:-.02em;color:var(--mute)}

/* PAIN */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:56px}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pain{background:var(--card);border-radius:var(--r);padding:30px;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.pain:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(29,24,48,.35)}
.pain .n{font:800 13px/1 var(--sans);color:var(--rose);letter-spacing:.08em}
.pain h3{font-size:21px;margin:14px 0 10px}
.pain p{color:var(--ink2);font-size:15.5px}
.pain.quote{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.pain.quote p{color:#fff;font:700 24px/1.25 var(--serif);letter-spacing:-.02em}
.pain.quote a{color:#8fd6e3;font-weight:700;font-size:15px;text-decoration:none}

/* DIFFERENCE */
.diff{background:var(--ink);color:#fff;border-radius:40px;margin:0 16px;padding:110px 0;position:relative;overflow:hidden}
.diff .eyebrow{color:#8fd6e3}
.diff .lead{color:#cfcadc}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.venn{position:relative;height:380px}
.venn .c{position:absolute;width:250px;height:250px;border-radius:50%;display:grid;place-items:center;text-align:center;font:700 19px/1.2 var(--serif);padding:40px}
.venn .a{left:6%;top:20px;background:rgba(21,151,174,.6);mix-blend-mode:screen}
.venn .b{right:6%;top:20px;background:rgba(160,175,220,.45);mix-blend-mode:screen}
.venn .c span{position:absolute;top:50%;transform:translateY(-50%);width:36%;font-size:.85em}
.venn .a span{left:9%;text-align:left}.venn .b span{right:9%;text-align:right}
.venn .mid{position:absolute;left:50%;top:auto;bottom:48px;transform:translateX(-50%);background:#fff;color:var(--ink);border-radius:99px;padding:10px 18px;font-weight:800;font-size:13px;white-space:nowrap}
.venn .cap{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#cfcadc;font-size:15px}
.diff ul{list-style:none;margin-top:30px;display:grid;gap:14px}
.diff li{display:flex;gap:14px;align-items:flex-start;color:#e6e2ef}
.diff li::before{content:"✦";color:#8fd6e3;flex:none}

/* PACKAGES */
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s}
.pkg:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(29,24,48,.4)}
.pkg.pop{background:var(--blush);border-color:transparent}
.pkg .tag{position:absolute;top:-12px;right:22px;background:var(--rose);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:99px}
.pkg h3{font-size:20px;min-height:52px}
.pkg .price{margin:16px 0 20px;font-size:14px;color:var(--mute)}
.pkg .price b{font:800 40px/1 var(--serif);letter-spacing:-.04em;color:var(--ink);margin:0 4px}
.pkg ul{list-style:none;display:grid;align-content:start;gap:9px;font-size:14.5px;color:var(--ink2);flex:1}
.pkg li{padding-left:22px;position:relative}
.pkg li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;border:2px solid var(--rose)}
.pkg .btn{margin-top:24px;justify-content:center;padding:14px}
.pkg .ref{font-size:13px;color:var(--mute);margin-top:14px}.pkg .ref a,.plist a,.skill p a{color:var(--rose);font-weight:700;text-decoration:none}
.note{margin-top:22px;color:var(--mute);font-size:14px;text-align:center}

/* RESULTS */
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.res{padding:34px 26px 10px 0;border-right:1px solid var(--line);margin-right:26px}
.res:last-child{border:0;margin:0}
.res .ic{font:800 15px/1 var(--sans);color:var(--rose);width:44px;height:44px;border-radius:12px;background:var(--blush);display:grid;place-items:center}
.res h3{font-size:20px;margin:14px 0 10px}
.res p{font-size:15px;color:var(--ink2)}

/* SKILLS */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skill{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.skill .k{font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.skill h3{font-size:20px;margin:12px 0 10px}
.skill p{font-size:15px;color:var(--ink2)}
.skill:last-child{grid-column:1/-1}
.skill.big{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#fff;border:0;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;background-image:radial-gradient(circle at 85% 15%,rgba(21,151,174,.6),transparent 45%)}
.skill.big h3{font-size:clamp(32px,4vw,48px)}
.skill.big p{color:#d9d5e4;font-size:17px;max-width:520px}
.skill.big .k{color:#8fd6e3}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:700}
@media (max-width:860px){.skills{grid-template-columns:1fr 1fr}.skill.big{grid-column:span 2;grid-row:auto}}
@media (max-width:560px){.skills{grid-template-columns:1fr}.skill.big,.skill:last-child{grid-column:auto}}

/* PROCESS */
.process{background:var(--sky);border-radius:40px;margin:0 16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s;margin-top:50px}
.step{background:#fff;border-radius:var(--r);padding:34px;position:relative}
.step::before{counter-increment:s;content:"SCHRITT 0" counter(s);font:800 15px/1 var(--sans);letter-spacing:.1em;color:var(--rose);display:block;margin-bottom:14px}
.step h3{margin-bottom:10px}
.step p{color:var(--ink2);font-size:15.5px}
.step .free{display:inline-block;margin-top:16px;font-size:12px;font-weight:800;color:var(--rose);background:var(--blush);padding:6px 12px;border-radius:99px}

/* TESTIMONIALS */
.quotes{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.q blockquote{font-size:15.5px;color:var(--ink2)}
.q:first-child{background:var(--blush);border-color:transparent}
.q:first-child blockquote{font:700 23px/1.35 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.q .who{display:flex;gap:12px;align-items:center;font-size:14px}
.q .who i{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 17px/1 var(--sans);font-style:normal}
.q .who b{display:block}
.q .who span{color:var(--mute)}
.mark{font:800 64px/.8 var(--serif);color:var(--rose);height:34px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.about-img{border-radius:26px;overflow:hidden;aspect-ratio:4/5;position:relative}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img .sig{position:absolute;left:20px;bottom:20px;right:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:16px;padding:16px 18px;font-size:14px}
.about-img .sig b{font:800 19px/1.2 var(--serif);letter-spacing:-.02em;display:block}
.timeline{list-style:none;margin:30px 0;border-left:1.5px solid var(--line);padding-left:22px;display:grid;gap:16px}
.timeline li{position:relative;font-size:15.5px;color:var(--ink2)}
.timeline li::before{content:"";position:absolute;left:-29px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--rose)}
.timeline b{color:var(--ink)}
.timeline span{display:block;font-size:13px;color:var(--mute)}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:700}

/* PARTNERS + CASES */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px}
.box h3{margin-bottom:20px}
.plist{list-style:none;display:grid;gap:4px}
.plist li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700}
.plist li:last-child{border:0}
.plist span{color:var(--mute);font-weight:500;text-align:right}

/* CTA / CONTACT */
.contact{background:var(--rose);color:#fff;border-radius:40px;margin:0 16px;text-align:center;padding:120px 0;position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.25);left:-160px;bottom:-260px;box-shadow:0 0 0 70px rgba(255,255,255,.05),0 0 0 140px rgba(255,255,255,.04)}
.contact h2{font-size:clamp(42px,6vw,80px);max-width:900px;margin:0 auto}
.contact p{max-width:560px;margin:24px auto 40px;color:#dff3f6;font-size:18px}
.contact .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.contact .btn-primary{background:#fff;color:var(--ink)}
.contact .btn-primary:hover{background:var(--ink);color:#fff;box-shadow:none}
.contact .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.contact .btn-ghost:hover{background:#fff;color:var(--rose)}

footer{padding:60px 0 40px;font-size:14px;color:var(--mute)}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:24px}
footer a{text-decoration:none}footer a:hover{color:var(--rose)}

/* REVEAL */
.js .r{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .r.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.chip{animation:none}html{scroll-behavior:auto}}

/* LEGAL PAGES */
.legal{padding:150px 0 80px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(44px,6vw,70px);margin-bottom:40px}
.legal h2{font-size:30px;margin:40px 0 12px}
.legal p,.legal li{color:var(--ink2);margin-bottom:12px}
.legal ul{padding-left:20px}
.todo{background:#fff3c4;border-radius:6px;padding:0 5px}

/* RESPONSIVE */
@media (max-width:1020px){
  .pkgs{grid-template-columns:1fr 1fr}
  .results{grid-template-columns:1fr 1fr}.res:nth-child(2){border:0;margin:0}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:860px){
  section{padding:80px 0}
  .nav ul,.nav .wrap>.btn{display:none}
  .burger{display:block}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:20px 24px 30px;gap:18px;font-size:20px;box-shadow:0 20px 30px -20px rgba(0,0,0,.2)}
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding-top:120px}
  .hero-grid,.sec-head,.diff-grid,.about-grid,.duo{grid-template-columns:minmax(0,1fr);gap:44px}
  .portrait{width:min(78%,360px)}
  .chip.c1{left:-30px}.chip.c2{right:-24px}
  .pains,.steps{grid-template-columns:1fr}
  .diff,.process,.contact{margin:0 8px;border-radius:28px}
  .venn{height:320px}.venn .c{width:190px;height:190px;font-size:19px}.venn .c span{position:absolute;top:50%;transform:translateY(-50%);width:36%;font-size:.85em}
.venn .a span{left:9%;text-align:left}.venn .b span{right:9%;text-align:right}
.venn .mid{bottom:40px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .pkgs,.results{grid-template-columns:1fr}.res{border:0;margin:0;border-bottom:1px solid var(--line);padding-right:0}
  .band ul{gap:22px;font-size:18px}
  .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:12.5px}.trust strong{font-size:24px}
  .chip{font-size:12px;padding:9px 12px}.chip small{display:none}
  .venn .a{left:0}.venn .b{right:0}
}