/* Prolux home — ported 1:1 from design-reference/prolux-home-v2.html */
:root{
  --cream:#FBF6EF;
  --cream-2:#F4ECE0;
  --ink:#231F33;
  --muted:#6A6577;
  --indigo:#4A3FA0;
  --indigo-deep:#3A3080;
  --lav:#A98BC9;
  --coral:#F0965A;
  --coral-deep:#E07E44;
  --sky-top:#7A85D8;
  --line:#E7DFD2;
  --white-on:#FBF7F0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.serif{font-family:'Fraunces',Georgia,serif}
.round{font-family:'Fredoka',sans-serif}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif;font-size:14px;font-weight:500;color:var(--indigo);background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);border-radius:100px;padding:8px 16px;box-shadow:0 8px 20px -12px rgba(60,40,120,.3)}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Fredoka',sans-serif;font-weight:500;font-size:16.5px;padding:14px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--indigo);box-shadow:0 12px 30px -12px rgba(40,25,90,.5)}
.btn-white:hover{box-shadow:0 16px 36px -12px rgba(40,25,90,.6)}
.btn-indigo{background:var(--indigo);color:#fff;box-shadow:0 12px 26px -14px rgba(74,63,160,.7)}
.btn-indigo:hover{background:var(--indigo-deep)}
.btn-ghost-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.arrow{transition:transform .16s ease}.btn:hover .arrow{transform:translateX(3px)}

/* NAV */
/* Pull the hero up under the nav so the bar is truly transparent over the gradient
   (in the raw reference the sticky nav sat on a cream strip above the hero). */
header.nav{position:sticky;top:0;z-index:60;margin-bottom:-72px;transition:background .25s ease,box-shadow .25s ease}
/* Production addition: transparent over the hero gradient, tinted once scrolled so
   the white links stay readable over cream sections. */
header.nav.scrolled{background:rgba(58,48,128,.92);backdrop-filter:blur(10px);box-shadow:0 10px 30px -18px rgba(40,20,70,.5)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:25px;letter-spacing:-.01em;color:#fff}
.brand .dot{color:var(--coral)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-family:'Fredoka',sans-serif;font-weight:400;font-size:15.5px;color:rgba(255,255,255,.82)}
.nav-links a:hover{color:#fff}
.nav .btn-white{padding:10px 20px;font-size:15px}

/* Mobile menu (production addition — reference simply hides the links) */
.nav-toggle{display:none;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);border-radius:100px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.nav-toggle svg{display:block}
.nav-menu{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .nav .btn-white{display:none}
  .nav-toggle{display:inline-flex}
  .nav-menu{display:none;flex-direction:column;gap:6px;padding:14px 32px 20px;background:rgba(58,48,128,.96);backdrop-filter:blur(10px)}
  .nav-menu.open{display:flex}
  .nav-menu a{font-family:'Fredoka',sans-serif;font-size:17px;color:rgba(255,255,255,.92);padding:10px 0}
  .nav-menu .btn{align-self:flex-start;margin-top:8px}
}

/* HERO */
.hero{position:relative;background:linear-gradient(178deg,#7A85D8 0%,#9E8BCE 40%,#D9A5A9 68%,#F3BE93 100%);overflow:hidden;padding-bottom:120px}
.hero .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 15% 18%,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 72% 12%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 40% 24%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 88% 26%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 28% 8%,rgba(255,255,255,.6),transparent);opacity:.7}
.hero-inner{position:relative;z-index:5;text-align:center;padding-top:108px}
.hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,6vw,72px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:22px auto 20px;max-width:17ch;text-shadow:0 2px 24px rgba(50,30,90,.18)}
.hero h1 .hl{color:#FFE2C4;position:relative;white-space:nowrap}
.hero p.lede{color:rgba(255,255,255,.9);font-size:20px;max-width:44ch;margin:0 auto 30px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:18px;font-family:'Fredoka',sans-serif;font-weight:400;font-size:14.5px;color:rgba(255,255,255,.85);display:flex;gap:8px;justify-content:center;align-items:center}

/* hero stage: mockup + blobs + chips */
.stage{position:relative;max-width:720px;margin:48px auto 0;z-index:4}
.blob{position:absolute;border-radius:50%;filter:blur(6px);z-index:1}
.blob.b1{width:120px;height:120px;background:rgba(255,214,170,.7);left:-40px;top:40px}
.blob.b2{width:80px;height:80px;background:rgba(180,210,255,.6);right:-30px;top:10px}
.blob.b3{width:60px;height:60px;background:rgba(255,255,255,.5);right:60px;bottom:-20px}
.float{animation:float 7s ease-in-out infinite}
.float.d1{animation-delay:-2s}.float.d2{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.mock{position:relative;z-index:3;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -34px rgba(40,20,70,.6);border:1px solid rgba(255,255,255,.5);transform:perspective(1400px) rotateX(4deg)}
.mbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#efeae1;border-bottom:1px solid #e2dccf}
.mbar i{width:10px;height:10px;border-radius:50%;background:#cec8ba;display:block}
.mbar .u{flex:1;margin-left:8px;background:#fff;border-radius:6px;font-size:11.5px;color:#8a8578;padding:5px 12px}
.m-body{background:linear-gradient(180deg,#fbfaf7,#f2eeff);padding:28px 26px}
.m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.m-top .lg{font-family:'Fraunces';font-weight:600;font-size:16px;color:var(--indigo)}
.m-top .mn{display:flex;gap:12px}.m-top .mn span{width:30px;height:6px;border-radius:3px;background:#d8d2ea}
.m-top .mc{background:var(--coral);color:#fff;font-family:'Fredoka';font-size:11px;font-weight:500;padding:6px 12px;border-radius:8px}
.m-hero .mh{font-family:'Fraunces';font-weight:600;font-size:26px;color:#2c2550;max-width:15ch;line-height:1.08}
.m-hero .mp{font-size:12.5px;color:#7a7590;margin:9px 0 14px;max-width:34ch}
.m-hero .mb{display:inline-block;background:var(--indigo);color:#fff;font-family:'Fredoka';font-size:12px;font-weight:500;padding:8px 16px;border-radius:9px}
.m-cards{display:flex;gap:10px;margin-top:20px}
.m-cards .mcd{flex:1;background:#fff;border:1px solid #ece7f5;border-radius:10px;padding:12px}
.m-cards .mcd .ci{width:22px;height:22px;border-radius:7px;background:#efeaff;margin-bottom:9px}
.m-cards .mcd .cl{height:6px;border-radius:3px;background:#ddd6ec;width:75%;margin-bottom:5px}
.m-cards .mcd .cl2{height:5px;border-radius:3px;background:#eae5f4;width:92%}

.chip{position:absolute;z-index:6;background:#fff;border-radius:14px;box-shadow:0 16px 34px -16px rgba(40,20,70,.35);padding:11px 15px;display:flex;align-items:center;gap:10px;font-family:'Fredoka';font-weight:500;font-size:13.5px;color:var(--ink)}
.chip .d{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px}
.chip.c1{top:14%;left:-6%}
.chip.c2{bottom:8%;right:-7%}
@media(max-width:900px){.chip,.blob{display:none}.mock{transform:none}}

/* curved transition — anchored to the hero's bottom edge (the reference's
   negative-margin version left a stray gradient band below the curve) */
.curve{display:block;width:100%;height:70px;position:absolute;bottom:-1px;left:0;z-index:5}

/* SECTION base */
section.blk{padding:80px 0}
.sec-head{max-width:60ch}
.sec-head .kick{font-family:'Fredoka';font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--coral-deep);text-transform:uppercase}
.sec-head h2{font-family:'Fraunces';font-weight:600;font-size:clamp(29px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin-top:12px}

/* PROBLEM */
.problem{background:var(--cream)}
.problem .box{background:linear-gradient(135deg,#efeaff,#fdeede);border:1px solid #eadfef;border-radius:24px;padding:52px 48px;max-width:900px}
.problem .kick{color:var(--indigo)}
.problem h2{font-family:'Fraunces';font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;max-width:20ch;margin-top:12px}
.problem p{color:var(--muted);font-size:18px;max-width:54ch;margin-top:18px}

/* HOW */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .18s ease,box-shadow .18s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(60,40,120,.28)}
.step .num{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--indigo),var(--lav));color:#fff;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-family:'Fraunces';font-weight:600;font-size:21px;letter-spacing:-.01em;margin-bottom:7px}
.step p{color:var(--muted);font-size:16px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

/* WHAT YOU GET */
.what{background:var(--cream-2)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(60,40,120,.28)}
.card .ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#efeaff,#ffe6d2);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;color:var(--indigo)}
.card .ic svg{width:24px;height:24px}
.card h3{font-family:'Fraunces';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:7px}
.card p{color:var(--muted);font-size:16px}
@media(max-width:700px){.cards{grid-template-columns:1fr}}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.work{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff}
.work .thumb{height:186px;background:linear-gradient(135deg,#efeaff,#fce6d8);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:20px;font-family:'Fredoka'}
.work .meta{padding:16px 18px}
.work .meta .t{font-family:'Fraunces';font-weight:600;font-size:17px}
.work .meta .s{font-size:13.5px;color:var(--muted);margin-top:3px}
@media(max-width:800px){.work-grid{grid-template-columns:1fr}}

/* FINAL */
.final-blk{padding:80px 0}
.final{position:relative;overflow:hidden;background:linear-gradient(140deg,#7A85D8 0%,#A98BC9 45%,#F3BE93 100%);border-radius:28px;padding:66px 48px;text-align:center;color:#fff}
.final .stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 80% 20%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 55% 70%,rgba(255,255,255,.6),transparent);opacity:.7;pointer-events:none}
.final .in{position:relative;z-index:2}
.final .kick{font-family:'Fredoka';font-weight:500;color:#FFE2C4;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.final h2{font-family:'Fraunces';font-weight:600;font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-.02em;margin:14px auto 16px;max-width:17ch}
.final p{color:rgba(255,255,255,.9);font-size:18px;max-width:46ch;margin:0 auto 30px}
@media(max-width:700px){.final{padding:48px 26px;border-radius:20px}}

/* FOOTER */
footer{padding:44px 0 56px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.foot .brand{color:var(--ink);font-size:21px}
.foot .fmeta{font-family:'Fredoka';font-weight:400;font-size:14px;color:var(--muted)}
.foot .fmeta a:hover{color:var(--ink)}
.foot-legal{font-family:'Fredoka';font-weight:400;font-size:13px;color:var(--muted);display:flex;gap:18px}
.foot-legal a:hover{color:var(--ink)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s ease both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
section.blk :focus-visible,footer :focus-visible{outline-color:var(--indigo)}