:root{ --paper:#FFFFFF; --paper-2:#F3F1F6; --paper-card:#FFFFFF; --ink:#0B0A0D; --ink-soft:#514D59; --line:rgba(20,10,45,.14); --plum:#3E1F6E; --plum-2:#6B3FA0; --gold:#C9A227; --gold-light:#E3C158; --gold-ink:#7A5E10; --green:#25d366; --shadow:0 24px 48px -28px rgba(11,10,13,.35); --radius:3px; --container:1180px; --container-narrow:760px; --fs-kicker:clamp(.86rem,.3vw + .78rem,.98rem); --fs-h1:clamp(2.35rem,4.6vw + 1rem,4.5rem); --fs-h2:clamp(1.7rem,2.4vw + .95rem,2.65rem); --fs-h3:clamp(1.22rem,.9vw + .95rem,1.48rem); --fs-lead:clamp(1.06rem,.6vw + .88rem,1.28rem); --fs-body:clamp(.97rem,.2vw + .89rem,1.05rem); --fs-small:clamp(.8rem,.1vw + .76rem,.88rem); --fs-numeral:clamp(2.1rem,3vw + 1rem,3.4rem); --sp-section:clamp(3.6rem,6vw + 1rem,7.2rem); --sp-lg:clamp(2rem,3vw + 1rem,3.4rem); --sp-md:clamp(1.3rem,1.6vw + .5rem,2rem); --header-h:69px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ background:var(--paper);color:var(--ink); font-family:'Jost',sans-serif;font-weight:300; overflow-x:hidden;-webkit-font-smoothing:antialiased; padding-bottom:88px;font-size:var(--fs-body);line-height:1.6; } h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--ink)} a{color:inherit;text-decoration:none} button{font-family:inherit;background:none;border:0;cursor:pointer} img{max-width:100%;display:block} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 24px} .skip-link{ position:absolute;left:-999px;top:0;background:var(--plum);color:var(--paper-card); padding:12px 18px;z-index:100;border-radius:0 0 6px 0; } .skip-link:focus{left:0} :focus-visible{outline:2px solid var(--plum-2);outline-offset:3px} .progress{ position:fixed;top:0;left:0;height:2px;width:0;z-index:80; background:linear-gradient(90deg,var(--gold),var(--plum-2)); transform-origin:left;pointer-events:none; } .kicker{ font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500; font-size:var(--fs-kicker);color:var(--gold-ink);letter-spacing:.01em; display:inline-block;margin-bottom:14px; } .kicker::before{content:'';display:inline-block;width:22px;height:1px;background:var(--gold);margin-right:10px;vertical-align:middle} .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:blur(10px);border-bottom:1px solid var(--line); transition:transform .35s ease; } .site-header.hide{transform:translateY(-100%)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px} .brand{display:flex;align-items:center;gap:11px} .brand img{width:36px;height:36px;object-fit:contain} .brand-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:.06em;color:var(--ink)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:'Jost',sans-serif;font-size:.86rem;letter-spacing:.02em;font-weight:500; padding:13px 24px;border-radius:var(--radius);border:1px solid transparent; transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease; cursor:pointer; } .btn-line{border-color:var(--gold);color:var(--gold-ink);background:transparent} .btn-line:hover{background:var(--gold);color:var(--paper-card)} .btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--plum);box-shadow:0 14px 30px -14px rgba(201,162,39,.5); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(201,162,39,.65)} .btn-ghost-link{font-size:.86rem;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:2px} .btn-ghost-link:hover{color:var(--plum-2);border-color:var(--gold)} @media (prefers-reduced-motion:reduce){ .btn,.site-header{transition:none} } html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} html.js .reveal.in{opacity:1;transform:translateY(0)} html.js .reveal-d1{transition-delay:.08s} html.js .reveal-d2{transition-delay:.16s} html.js .reveal-d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none;transition:none} } .hero{padding:clamp(2.6rem,6vw,4.6rem) 0 var(--sp-section);position:relative} .hero::before{ content:'';position:absolute;inset:auto -10% 8% 40%;height:42%; background:radial-gradient(ellipse at center,rgba(201,162,39,.09),transparent 70%); pointer-events:none;z-index:0; } .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center;position:relative} .hero-lead{font-family:'Jost',sans-serif;font-weight:400;font-size:var(--fs-lead);color:var(--ink-soft);max-width:30ch;margin-bottom:6px} .hero h1{font-size:var(--fs-h1);line-height:1.08;max-width:15ch} .hero-sub{max-width:44ch;color:var(--ink-soft);font-size:var(--fs-body);line-height:1.8;margin-top:22px} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px} .hero-note{max-width:40ch;color:var(--ink-soft);font-size:var(--fs-small);opacity:.85;margin-top:22px;line-height:1.65} .hero-media{position:relative;display:flex;align-items:center;justify-content:center} .hero-frame{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%} .hero-frame img{ width:100%;max-width:440px;height:auto;object-fit:contain;margin:0 auto; filter:drop-shadow(0 26px 40px rgba(11,10,13,.16)); animation:float 7s ease-in-out infinite; will-change:transform; } .hero-frame:hover img{animation-play-state:paused;transform:scale(1.03)} @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @media (prefers-reduced-motion:reduce){ .hero-frame img{animation:none} .hero-frame:hover img{transform:none} } @media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr} .hero h1{max-width:12ch} .hero-frame img{max-width:480px} } .principle{padding:0 0 var(--sp-section)} .principle-inner{border-top:1px solid var(--gold);padding-top:26px;max-width:640px} .principle h2{font-size:var(--fs-h2);line-height:1.18;margin-bottom:18px} .principle p{color:var(--ink-soft);line-height:1.8;font-size:var(--fs-body);max-width:52ch} .section{padding:0 0 var(--sp-section)} .section-alt{background:var(--paper-2)} .section-alt-inner{padding:var(--sp-section) 0} .section-head{max-width:640px;margin-bottom:var(--sp-lg)} .section-head h2{font-size:var(--fs-h2);line-height:1.16} .section-head p{color:var(--ink-soft);margin-top:14px;line-height:1.75;font-size:var(--fs-body);max-width:52ch} .tri{display:grid;grid-template-columns:1fr;gap:0} .tri article{border-top:1px solid var(--line);padding:26px 0;transition:border-color .3s ease} .tri article:first-child{border-top:1px solid var(--ink)} .tri h3{font-size:var(--fs-h3);margin-bottom:10px} .tri p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.7;max-width:48ch} @media(min-width:820px){ .tri{grid-template-columns:repeat(3,1fr);column-gap:28px} .tri article{border-top:1px solid var(--ink);padding:22px 0 0} } @media (hover:hover){ .tri article:hover{border-top-color:var(--gold)} } .path-nav{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:rgba(255,255,255,.94);backdrop-filter:blur(12px); position:sticky;top:0;z-index:40; } .site-header.hide + main .path-nav, body.header-hidden .path-nav{top:0} .path-list{display:flex;overflow-x:auto;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none} .path-list::-webkit-scrollbar{display:none} .path-list a{ flex:0 0 auto;display:flex;align-items:baseline;gap:10px; padding:18px 22px;border-right:1px solid var(--line);white-space:nowrap; font-size:var(--fs-small);color:var(--ink-soft);transition:color .25s ease,background .25s ease; } .path-list a span{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--gold-ink)} .path-list a:hover,.path-list a.is-active{color:var(--ink);background:var(--paper-2)} .path-list a.is-active{box-shadow:inset 0 -2px 0 var(--gold)} @media (prefers-reduced-motion:reduce){ .path-list a{transition:none} } .cycles{position:relative} .cycle{ display:grid;grid-template-columns:1fr;gap:14px; padding:var(--sp-md) 0;border-bottom:1px solid var(--line); transition:background .35s ease; } .cycle:first-child{padding-top:0} .cycle.is-on .cycle-n{color:var(--plum-2)} .cycle-n{font-size:var(--fs-numeral);color:var(--gold);line-height:1;font-weight:500} .cycle h3{font-size:var(--fs-h3);margin:6px 0 12px} .cycle .plain{color:var(--ink);font-size:var(--fs-body);line-height:1.75;margin-bottom:14px;max-width:56ch} .cycle ul{margin:0 0 4px;padding-left:20px;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.8} .cycle li{margin-bottom:5px} .term{ margin-top:16px;padding:14px 18px;border-left:2px solid var(--gold); background:var(--paper-2);border-radius:0 var(--radius) var(--radius) 0; color:var(--ink-soft);font-size:var(--fs-small);line-height:1.7;max-width:54ch; } .term strong{color:var(--plum-2);font-weight:500} @media(min-width:760px){ .cycle{grid-template-columns:140px 1fr;gap:32px;align-items:start} } .mid-cta{ margin:var(--sp-lg) 0; padding:28px 24px; border:1px solid var(--line); border-left:3px solid var(--gold); background:linear-gradient(120deg,rgba(243,241,246,.9),#fff); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px; } .mid-cta p{max-width:46ch;color:var(--ink-soft);font-size:var(--fs-body);line-height:1.7} .mid-cta strong{color:var(--ink);font-weight:500} .more-grid{display:grid;grid-template-columns:1fr;gap:0} .more-grid article{ border-top:1px solid var(--line);padding:24px 0; transition:padding-left .3s ease,border-color .3s ease; } .more-grid h3{font-size:var(--fs-h3);margin-bottom:8px} .more-grid p{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.7;max-width:44ch} @media(min-width:700px){ .more-grid{grid-template-columns:repeat(2,1fr);column-gap:32px} } @media(min-width:1080px){ .more-grid{grid-template-columns:repeat(3,1fr)} } @media (hover:hover){ .more-grid article:hover{padding-left:14px;border-color:var(--gold)} } @media (prefers-reduced-motion:reduce){ .more-grid article{transition:none} } .faq{max-width:var(--container-narrow)} .faq details{ border-bottom:1px solid var(--line);padding:4px 0; } .faq summary{ list-style:none;cursor:pointer;padding:16px 0; font-family:'Cormorant Garamond',serif;font-size:var(--fs-h3); display:flex;justify-content:space-between;align-items:center;gap:16px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';color:var(--gold-ink);font-family:'Jost',sans-serif;font-weight:400;font-size:1.2rem} .faq details[open] summary::after{content:'–'} .faq details p{color:var(--ink-soft);padding:0 0 18px;line-height:1.75;max-width:52ch} .rules{max-width:var(--container-narrow)} .rules ol{list-style:none} .rules li{ display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:baseline; padding:18px 0;border-bottom:1px solid var(--line); font-size:var(--fs-body);line-height:1.65;color:var(--ink); } .rules li b{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--gold-ink);font-weight:500} .cta-section{background:var(--plum);color:var(--paper-card);padding:var(--sp-section) 0} .cta-inner{max-width:640px} .cta-inner .kicker{color:var(--gold-light)} .cta-inner .kicker::before{background:var(--gold-light)} .cta-section h2{color:var(--paper-card);font-size:var(--fs-h2);line-height:1.18;margin-bottom:18px} .cta-section p{color:rgba(255,255,255,.78);line-height:1.8;font-size:var(--fs-body);margin-bottom:30px;max-width:52ch} .cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px} .cta-section .btn-ghost-link{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.25)} .cta-section .btn-ghost-link:hover{color:var(--gold-light);border-color:var(--gold-light)} footer{padding:44px 24px 32px;text-align:center} footer p{color:var(--ink-soft);font-size:var(--fs-small);opacity:.75} .bottom-bar{ position:fixed;left:0;right:0;bottom:0;z-index:40; background:rgba(255,255,255,.96);backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex;align-items:center;justify-content:space-between;gap:14px; transform:translateY(0);transition:transform .35s ease,box-shadow .35s ease; } .bottom-bar.nudge{box-shadow:0 -10px 30px -18px rgba(62,31,110,.35)} .bottom-bar p{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.3} .bottom-bar strong{display:block;color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:500} .bottom-bar a{ background:var(--green);color:#04170b;white-space:nowrap; font-size:.78rem;letter-spacing:.02em;font-weight:600; padding:13px 18px;border-radius:22px;min-height:44px;display:inline-flex;align-items:center; transition:filter .25s ease,transform .25s ease; } .bottom-bar a:hover{filter:brightness(1.06)} .bottom-bar.nudge a{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} } @media (prefers-reduced-motion:reduce){ .bottom-bar a,.bottom-bar{transition:none} .bottom-bar.nudge a{animation:none} } @media(max-width:520px){.bottom-bar{flex-wrap:wrap}.bottom-bar a{width:100%;justify-content:center}}