/* Landing · "Sapinho Pop": SADE's lavender frog, a sprout green and the SADE yellow on a soft cloud base. */
.landing{
  --plum:#2B1052;--plum-2:#3A1A68;--lav:#AF80E8;--lav-soft:#EADFFA;--lime:#B6F06B;--lime-deep:#8FCB4C;--sun:#FFD23F;--pink:#F58BA8;--cloud:#F3F1EC;
  --text:#2B1052;--text-soft:#4A3470;--on-plum-soft:#D2C0F2;
  --display:"Bricolage Grotesque",Inter,"Segoe UI",system-ui,sans-serif;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.2,.8,.2,1);
  background:var(--cloud);color:var(--text);font-family:var(--display);font-size:16px;overflow-x:clip}
.landing a:focus-visible,.landing button:focus-visible,.landing summary:focus-visible,.landing input:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:20px;top:-100px;z-index:100;background:white;padding:15px}.skip-link:focus{top:12px}

/* Buttons */
.landing .btn{border-radius:50px;padding:16px 26px;font-size:15px;font-weight:700;font-family:var(--display);transition:transform .25s var(--ease-pop),background .2s,box-shadow .25s}
.landing .primary{background:var(--lime);color:var(--plum);box-shadow:0 0 0 0 var(--lime)}
.landing .primary:hover{background:#C8F78A;transform:translateY(-2px) rotate(-1deg);box-shadow:0 8px 0 -2px var(--lime-deep)}
.landing .primary:active{transform:translateY(1px)}
.landing .btn svg{transition:transform .25s var(--ease-pop)}.landing .btn:hover svg{transform:translateX(3px)}

/* Top: nav + hero share the plum stage */
.lp-top{background:var(--plum);color:var(--cloud);border-radius:0 0 48px 48px;position:relative;z-index:1}
.landing-nav{max-width:1340px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.landing .wordmark{font-family:var(--display);font-size:30px;letter-spacing:-1.4px}.landing .wordmark i{background:var(--lime);height:5px}
.landing-nav nav,.landing-actions{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.landing-nav nav a{position:relative;padding:6px 0}.landing-nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}.landing-nav nav a:hover::after{transform:scaleX(1)}
.landing-actions .btn{padding:12px 20px}
.landing-hero{max-width:1280px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;margin:auto;padding:40px 5% 90px;align-items:center}
.landing-kicker{display:block;font-size:15px;font-weight:600;margin-bottom:18px;color:#6A4A9C}
.lp-top .landing-kicker{color:var(--lime)}
.hero-copy h1{font-size:clamp(54px,7.2vw,108px);letter-spacing:-.045em;line-height:.9;font-weight:800;margin:0 0 30px;font-variation-settings:"opsz" 96}
.hero-copy h1 span{display:block;animation:lp-rise .9s var(--ease-out) both}
.hero-copy h1 span:nth-child(2){animation-delay:.08s}.hero-copy h1 span:nth-child(3){animation-delay:.16s}
@keyframes lp-rise{from{opacity:0;transform:translateY(.35em)}}
.hero-copy>p{max-width:460px;line-height:1.6;color:var(--on-plum-soft);font-size:18px}
.claim-form{max-width:500px;margin-top:30px}.claim-form>label{display:block;font-size:14px;font-weight:600;margin-bottom:10px;color:var(--cloud)}
.claim-row{display:flex;align-items:center;background:var(--cloud);border:2px solid transparent;border-radius:40px;padding:5px 5px 5px 20px;gap:2px;transition:border-color .2s,box-shadow .2s}
.claim-row:focus-within{border-color:var(--lime);box-shadow:0 0 0 6px #b6f06b33}
.claim-row>span{color:#6A4A9C;font-weight:600;font-size:16px}
.claim-row input{padding:10px 0;border:0;background:none;margin:0;min-width:0;flex:1;font-size:16px;color:var(--plum);font-weight:600;outline:0}
.landing .claim-row input:focus-visible{outline:0}
.claim-row .btn{flex-shrink:0;padding:14px 22px;background:var(--plum);color:var(--cloud)}.claim-row .btn:hover{background:var(--plum-2);box-shadow:none}
.hero-copy .hero-note{font-size:14px;margin-top:14px;color:var(--on-plum-soft)}

/* Hero scene: the tap */
.hero-scene{--rx:0;--ry:0;position:relative;min-height:600px;display:flex;justify-content:center;align-items:center;perspective:900px}
.scene-arch{position:absolute;inset:20px 6% 0;background:var(--lav);border-radius:220px 220px 36px 36px}
.scene-arch::before{content:"";position:absolute;inset:28px;border:2px dashed #2b105233;border-radius:200px 200px 22px 22px}
.hero-phone{position:relative;z-index:1;background:#fff;color:var(--plum);border:8px solid var(--plum);border-radius:40px;width:282px;overflow:hidden;box-shadow:18px 22px 0 #2b105240;transform:rotateX(calc(var(--rx) * -8deg)) rotateY(calc(var(--ry) * 10deg)) rotate(4deg);transition:transform .35s var(--ease-out)}
.phone-url{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;padding:12px 10px 10px;background:var(--lav-soft);color:#5A3C8C}
.phone-url b{color:var(--plum);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nfc-sticker{position:absolute;left:2%;bottom:70px;z-index:2;width:150px;height:166px;background:var(--sun);color:var(--plum);border:7px solid #fff;border-radius:26px;box-shadow:0 16px 26px #1a0a3340;transform:rotate(-12deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-family:var(--display);cursor:pointer;transition:transform .35s var(--ease-pop)}
.nfc-sticker:hover{transform:rotate(-6deg) translateY(-6px) scale(1.04)}
.nfc-sticker strong{font-size:16px;line-height:1.15}.nfc-sticker small{font-size:11px;font-weight:600;opacity:.8}
.is-tapping .nfc-sticker{animation:lp-tap .65s var(--ease-out)}
@keyframes lp-tap{45%{transform:translate(56px,-40px) rotate(-2deg) scale(.96)}}
.tap-ripple{position:absolute;left:calc(2% + 120px);bottom:180px;z-index:3;pointer-events:none}
.tap-ripple i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid var(--sun);opacity:0}
.is-tapping .tap-ripple i{animation:lp-ripple .9s var(--ease-out) .25s}
.is-tapping .tap-ripple i:nth-child(2){animation-delay:.36s;border-color:var(--lime)}.is-tapping .tap-ripple i:nth-child(3){animation-delay:.47s;border-color:#fff}
@keyframes lp-ripple{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(3.2)}}

/* Places marquee */
.places-strip{background:var(--lime);color:var(--plum);overflow:hidden;margin-top:-48px;padding:78px 0 28px}
.places-track{display:flex;width:max-content;animation:lp-marquee 38s linear infinite}
.places-strip:hover .places-track{animation-play-state:paused}
.places-track>div{display:flex;align-items:center;gap:34px;padding-right:34px}
.places-track span{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.places-track i{width:16px;height:16px;border-radius:50%;background:var(--lav);flex-shrink:0;box-shadow:inset -4px -3px 0 #8F5FD0}
@keyframes lp-marquee{to{transform:translateX(-50%)}}

/* Sections */
.landing-section{padding:110px max(5%,calc((100% - 1140px)/2));scroll-margin-top:20px}
.landing h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.04em;line-height:1;font-weight:800;margin-bottom:18px;max-width:14ch}
.landing-section p{line-height:1.65;color:var(--text-soft)}
.section-intro{text-align:center}.section-intro h2{margin-inline:auto}.section-intro p{font-size:18px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.how-steps article{background:#fff;border-radius:32px;padding:30px;position:relative;transition:transform .35s var(--ease-pop)}
.how-steps article:nth-child(2){background:var(--lav-soft)}.how-steps article:nth-child(3){background:#FFF3C4}
.how-steps article:hover{transform:translateY(-6px) rotate(-.6deg)}
.step-number{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--plum);color:var(--lime);font-size:24px;font-weight:800}
.how-steps h3{font-size:24px;margin:24px 0 10px;letter-spacing:-.8px;font-weight:800}
.how-steps p{font-size:16px;margin:0}
.step-visual,.step-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:70px;font-size:14px;font-weight:600;margin-top:18px}
.step-visual>span{padding:8px 12px;background:var(--cloud);border-radius:30px}
.how-steps article:nth-child(3) .step-visual>span{background:#fff}
.step-swatches i{width:36px;height:46px;border-radius:10px;background:var(--lav);transform:rotate(-9deg);transition:transform .35s var(--ease-pop)}
.step-swatches i:nth-child(2){background:var(--lime);transform:rotate(3deg)}.step-swatches i:nth-child(3){background:var(--sun);transform:rotate(12deg)}
.how-steps article:hover .step-swatches i{transform:rotate(0) translateY(-4px)}
.step-swatches span{font-size:14px;margin-left:8px}

/* Style showcase */
.theme-showcase{display:grid;grid-template-columns:1fr 1fr;gap:70px;background:var(--lav-soft);align-items:center;border-radius:48px;margin:0 2%}
.theme-story>p{max-width:430px;font-size:17px}
.demo-theme-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.demo-theme-buttons button{background:#fff;color:var(--plum);border:2px solid transparent;border-radius:30px;padding:12px 20px;font:700 15px var(--display);min-height:46px;transition:transform .25s var(--ease-pop),background .2s}
.demo-theme-buttons button:hover{transform:translateY(-2px)}
.demo-theme-buttons button[aria-pressed=true]{background:var(--plum);color:var(--lime)}
.theme-story .fine{font-size:13px;max-width:320px;margin-top:18px;color:var(--text-soft)}
.demo-stage{display:flex;justify-content:center;align-items:center;background:var(--lav);border-radius:220px 220px 40px 40px;min-height:560px;padding:30px}
@keyframes lp-swap{from{opacity:0;transform:translateY(16px) rotate(-3deg) scale(.94)}}

/* Offline */
.offline-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.offline-art{min-height:450px;border-radius:44px;background:var(--plum);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}
.offline-art::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;border:2px dashed #af80e866}
.counter-sign{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;background:var(--sun);color:var(--plum);border-radius:30px;padding:34px 30px;box-shadow:14px 16px 0 var(--lav);transform:rotate(-6deg);max-width:260px;transition:transform .45s var(--ease-pop)}
.offline-art:hover .counter-sign{transform:rotate(-2deg) scale(1.03)}
.counter-sign>span{font-size:13px;font-weight:600}
.counter-sign strong{font-size:30px;line-height:1.05;letter-spacing:-1px;font-weight:800}
.offline-bubble{position:absolute;bottom:28px;right:20px;padding:18px 20px;background:var(--lime);color:var(--plum);border-radius:22px 22px 4px 22px;transform:rotate(4deg);font-size:16px;font-weight:600;line-height:1.35}
.landing-benefits{list-style:none;padding:0;margin:26px 0}
.landing-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:16px;margin:14px 0;line-height:1.5}
.landing-benefits svg{flex-shrink:0;color:var(--plum);background:var(--lime);border-radius:50%;padding:3px;width:24px;height:24px}
.landing .text-button{font-size:16px;font-weight:700;color:var(--plum);border-bottom:3px solid var(--lime);padding:4px 0;border-radius:0}

/* FAQ */
.faq-section{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;border-top:2px dashed #2b105226}
.faq-list details{border-bottom:2px solid #2b105214;padding:18px 0}.faq-list details:first-child{padding-top:0}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-weight:700;font-size:18px;list-style:none;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--lav-soft);font-size:22px;font-weight:500;transition:transform .3s var(--ease-pop),background .2s}
.faq-list summary:hover span{background:var(--lav)}
.faq-list details[open] summary span{transform:rotate(45deg);background:var(--lime)}
.faq-list p{font-size:16px;margin:12px 50px 0 0;overflow:hidden}

/* Final */
.landing-final{position:relative;overflow:hidden;text-align:center;background:var(--plum);color:var(--cloud);padding:100px 20px 150px;border-radius:48px 48px 0 0;margin-top:20px}
.landing-final .landing-kicker{color:var(--lime)}
.landing-final h2{font-size:clamp(40px,6vw,84px);margin:0 auto 34px;max-width:13ch}
.landing-final>p{font-size:14px;color:var(--on-plum-soft);margin-top:26px}
.final-sapinho{position:absolute;left:50%;bottom:-38px;width:170px;height:170px;transform:translateX(-50%);transition:transform .45s var(--ease-pop)}
.landing-final:hover .final-sapinho{transform:translateX(-50%) translateY(-10px)}
.sapinho-pupil{transition:transform .12s linear}
.sapinho-wink,.sapinho-open{transition:opacity .18s ease}.sapinho-open{opacity:0}.landing-final .btn:is(:hover,:focus-visible)~.final-sapinho .sapinho-wink{opacity:0}.landing-final .btn:is(:hover,:focus-visible)~.final-sapinho .sapinho-open{opacity:1}
.landing-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:30px 5%;font-size:14px;background:var(--plum);color:var(--cloud);border-top:1px solid #ffffff1a}
.landing-footer>a:last-child{display:flex;align-items:center;gap:10px;font-weight:600;justify-self:end}.landing-footer>.wordmark{justify-self:start}
.landing-footer>span{color:var(--on-plum-soft)}

@media(max-width:950px){
  .landing-nav nav,.landing-nav,.landing-actions{gap:16px}
  .landing-hero{gap:20px}.hero-scene{min-height:540px}.hero-phone{width:250px}.nfc-sticker{width:122px;height:140px;left:0}.tap-ripple{left:96px;bottom:160px}
  .how-steps{gap:16px}.landing-section{padding:80px 5%}.theme-showcase,.offline-section,.faq-section{gap:40px}
}
@media(max-width:700px){
  .landing-nav{padding:18px 20px}.landing-nav nav{display:none}.landing .wordmark{font-size:26px}
  .landing-actions>a{font-size:14px}.landing-actions .btn{padding:11px 15px;font-size:13px}.landing-actions .btn svg{display:none}
  .lp-top{border-radius:0 0 32px 32px}
  .landing-hero{grid-template-columns:1fr;padding:24px 20px 60px;gap:30px}
  .hero-copy h1{font-size:clamp(46px,15vw,64px)}
  .hero-copy>p{font-size:16px}
  .claim-row{padding-left:16px}.claim-row>span{font-size:14px}.claim-row .btn{padding:13px 16px}.claim-row .btn svg{display:none}
  .hero-scene{min-height:520px;max-width:440px;width:100%;margin:auto}
  .scene-arch{inset:10px 0 0;border-radius:170px 170px 28px 28px}
  .hero-phone{width:236px;transform:rotate(4deg) translateX(18px)}.nfc-sticker{left:2px;bottom:14px;width:104px;height:118px;border-width:5px;border-radius:20px}.nfc-sticker strong{font-size:13px}.nfc-sticker svg{width:30px;height:30px}.tap-ripple{left:70px;bottom:90px}
  .places-strip{margin-top:-32px;padding:58px 0 22px}
  .landing-section{padding:64px 20px}.landing h2{font-size:clamp(34px,10vw,44px)}
  .how-steps{grid-template-columns:1fr;margin-top:34px}
  .theme-showcase,.offline-section,.faq-section{grid-template-columns:1fr;gap:34px}
  .theme-showcase{margin:0 10px;border-radius:32px}
  .demo-stage{min-height:500px;border-radius:150px 150px 28px 28px;padding:24px 10px}
  .offline-art{min-height:440px;order:2;align-items:flex-start;padding-top:40px}.counter-sign{max-width:220px;padding:26px 22px}.counter-sign strong{font-size:25px}.offline-bubble{font-size:14px;bottom:18px;right:14px;padding:14px 16px}.offline-art::before{width:280px;height:280px}
  .faq-section{gap:16px}.faq-list summary{font-size:16px}.faq-list p{margin-right:0}
  .landing-final{padding:70px 20px 130px;border-radius:32px 32px 0 0}.final-sapinho{width:140px;height:140px}
  .landing-footer{padding:26px 20px;grid-template-columns:auto auto;justify-content:space-between}.landing-footer>span{display:none}
  .landing .claim-row input{font-size:16px}
}
@media(max-width:360px){
  .landing-hero,.landing-section{padding-left:16px;padding-right:16px}.landing-nav{padding-left:16px;padding-right:16px}
  .landing-actions{gap:10px}.landing-actions .btn{padding:11px}.hero-phone{width:226px}
  .claim-row>span{display:none}.demo-theme-buttons button{padding:11px 15px}.landing-footer .wordmark{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .landing *,.landing *::before,.landing *::after{animation:none!important;transition:none!important}
  .places-track{flex-wrap:wrap;width:auto;justify-content:center}.places-track>div+div{display:none}.places-track>div{flex-wrap:wrap;justify-content:center;padding:0 20px}
  .hero-phone{transform:rotate(4deg)}
}

/* Dashboard refinements: guided setup, direct sharing, and touch-sized controls. */
.setup-guide{background:#eaf1e5;border:1px solid #d9e3d3;border-radius:15px;padding:19px;margin-bottom:24px}.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}.setup-heading>span{color:#5e785e;font-size:11px}.setup-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.setup-steps button{display:flex;align-items:center;gap:7px;background:white;border:1px solid #d5dfcf;border-radius:20px;padding:10px 12px;font-size:11px;color:#2b5b45;min-height:40px}.setup-steps button.done{background:#dbe9d6}.setup-steps button>span{border:1px solid #adc4a5;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:10px}.share-content>p{font-size:13px;color:#5b7062;line-height:1.7}.share-address{overflow-wrap:anywhere;background:#f0f4ed;border-radius:10px;padding:14px;font-size:13px}.share-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.share-options .btn{font-size:12px;min-height:46px}.share-options a{display:flex;justify-content:center;align-items:center}.share-status{min-height:20px;font-size:12px;color:#286345;margin-top:15px}.mobile-account{display:none}.link-presets{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.link-presets button{padding:10px 12px;border:1px solid #d1dccf;border-radius:20px;background:#edf4e9;font-size:11px;min-height:42px;color:#355d43}
@media(max-width:700px){.mobile-account{display:flex;margin-left:auto}.topbar>.public-address{max-width:calc(100% - 55px)}.topbar .public-address span{overflow:hidden;text-overflow:ellipsis}.top-actions{gap:8px}.top-actions>.btn{flex:1}.top-actions>.btn span{white-space:nowrap}.setup-guide{padding:16px}.setup-heading{align-items:flex-start}.setup-steps{gap:7px}.setup-steps button{font-size:10px;min-height:44px}.link-card .icon-button.small{min-width:36px;min-height:36px}.link-card .toggle,.publish-card .toggle{position:relative}.link-card .toggle::after,.publish-card .toggle::after{content:'';position:absolute;inset:-12px -5px}.mini-btn,.identity-actions .text-button{min-height:36px}.share-options{grid-template-columns:1fr}input:not([type=checkbox]),textarea{font-size:16px}.sidebar{padding-bottom:env(safe-area-inset-bottom);height:calc(68px + env(safe-area-inset-bottom))}.mobile-preview-open{bottom:calc(82px + env(safe-area-inset-bottom))}.preview-panel.mobile-open{padding-bottom:calc(25px + env(safe-area-inset-bottom))}}

/* Demo phones: the real profile renderer at phone width, scaled into the mockup frame. */
.demo-screen{width:375px;zoom:.71;pointer-events:none;user-select:none}
.demo-screen>.profile{min-height:640px;height:640px;overflow:hidden}
.hero-screen>.profile{height:700px}
.hero-screen .profile-link-wrap{opacity:0;transform:translateY(10px) scale(.96)}
.is-grown .hero-screen .profile-link-wrap{opacity:1;transform:none;transition:opacity .3s,transform .55s var(--ease-pop);transition-delay:calc(.25s + var(--i,0) * .14s)}
.is-grown .hero-screen .profile-link-wrap:nth-child(2){--i:1}.is-grown .hero-screen .profile-link-wrap:nth-child(3){--i:2}
.demo-phone{border:8px solid var(--plum);border-radius:40px;overflow:hidden;background:#fff;box-shadow:16px 18px 0 #2b105230}
.demo-swap{animation:lp-swap .55s var(--ease-pop)}
@media(max-width:950px){.hero-screen{zoom:.62}}
@media(max-width:700px){.hero-screen{zoom:.585}.demo-screen:not(.hero-screen){zoom:.66}}
@media(max-width:360px){.hero-screen{zoom:.56}.demo-screen:not(.hero-screen){zoom:.62}}