/* OvuFriend · osobny landing subskrypcji Premium */
:root{--coral:#fa7c82;--coral-deep:#e56572;--plum:#4b2636;--muted:#76636b;--line:#f1e1e5;--bg:#fff7f8;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--plum);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:3px solid var(--coral-deep);outline-offset:4px}
.page-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 85% 12%,#ffe7e9 0,transparent 33%),radial-gradient(circle at -8% 85%,#fde7ec 0,transparent 36%),linear-gradient(180deg,#fffbfc 0%,#fff7f8 100%)}
.site-shell{max-width:1160px;margin:0 auto;padding:0 24px}
.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center}
.brand img{display:block;width:180px;height:auto}
.help-link{font-size:13px;font-weight:700;text-decoration:none;color:#7d6972;display:inline-flex;align-items:center;gap:9px}
.help-link:hover{color:var(--coral-deep)}
.help-link svg{width:18px;height:18px}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(320px,.86fr);align-items:center;min-height:530px;background:#fff;border:1px solid var(--line);border-radius:34px;overflow:hidden;box-shadow:0 25px 84px rgba(75,38,54,.09)}
.hero-content{z-index:2;padding:56px 20px 55px 60px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:9px 14px;background:#fff0f1;color:#ba5867;font-size:12px;letter-spacing:.045em;font-weight:800;text-transform:uppercase}
.eyebrow-icon{color:var(--coral);font-size:17px;line-height:1}
h1{font-size:clamp(39px,4.3vw,59px);line-height:1.09;letter-spacing:-.048em;max-width:680px;margin:22px 0 22px;font-weight:830}
h1 em{font-style:normal;color:var(--coral-deep)}
.lead{color:#6d5863;font-size:17px;line-height:1.7;max-width:590px;margin:0}
.lead strong{font-weight:760;color:var(--plum)}
.steps{margin-top:25px;display:grid;gap:13px;max-width:600px}
.step{display:flex;align-items:flex-start;gap:14px}
.step-number{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:#fff0f1;color:#ce6674;font-weight:800;font-size:12px}
.step p{font-size:14px;line-height:1.55;color:#725f68;margin:4px 0 0}
.step strong{color:var(--plum)}
.app-note{display:flex;align-items:flex-start;gap:8px;margin:21px 0 0;font-size:12.5px;line-height:1.5;color:#a0828e;max-width:530px}
.app-note svg{flex:0 0 17px;width:17px;height:17px}
.hero-visual{position:relative;height:100%;min-height:510px;isolation:isolate;overflow:hidden}
.blob{position:absolute;z-index:-1;border-radius:50%}
.blob-a{width:460px;height:460px;top:36px;right:-82px;background:radial-gradient(circle at 40% 45%,#ffe3e6,#fff4f5 65%,transparent 74%)}
.blob-b{width:200px;height:200px;bottom:5px;left:-40px;background:radial-gradient(circle,rgba(250,124,130,.13),transparent 70%)}
.screens{position:absolute;inset:0}
.screen{position:absolute;display:block;width:auto;height:auto;max-width:none;filter:drop-shadow(0 22px 25px rgba(75,38,54,.16))}
.screen-back{width:215px;right:9%;top:96px;transform:rotate(9deg)}
.screen-front{width:250px;right:38%;top:55px;transform:rotate(-6deg)}
.visual-heart{position:absolute;right:9%;bottom:27px;font-size:58px;color:rgba(250,124,130,.35);transform:rotate(-17deg)}
.download{background:#fff;border:1px solid var(--line);border-radius:30px;margin:24px 0 22px;padding:30px 36px 22px;box-shadow:0 12px 42px rgba(75,38,54,.045)}
.download-head{max-width:650px}
.mini-label{font-size:12px;text-transform:uppercase;letter-spacing:.075em;color:#bf6570;font-weight:800}
h2{font-size:27px;letter-spacing:-.035em;margin:5px 0 7px}
.download-head p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.download-head strong{color:var(--plum)}
.download-grid{margin-top:24px}
/* Desktop: kafelki QR są jednocześnie klikalnymi linkami do sklepów. */
.store-buttons{display:none}
.qr-area{display:grid;grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:22px}
.qr-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;text-align:center;border:1px solid #f1dfe3;border-radius:24px;padding:23px 22px 20px;background:linear-gradient(180deg,#fff 0%,#fffafb 100%);box-shadow:0 9px 28px rgba(75,38,54,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.qr-card:hover{transform:translateY(-3px);border-color:#efa0a6;box-shadow:0 16px 34px rgba(75,38,54,.105)}
.qr-platform{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:var(--plum)}
.qr-platform svg{display:block;width:25px;height:25px;flex:none}
.qr-code-wrap{display:flex;align-items:center;justify-content:center;width:202px;height:202px;padding:12px;border-radius:18px;background:#fff;border:1px solid #f5eaed}
.qr-code-wrap img{display:block;width:176px;height:176px;max-width:100%;object-fit:contain}
.qr-instruction{font-size:12.5px;font-weight:700;color:#ad7582;white-space:nowrap}
.qr-instruction span{font-size:17px;vertical-align:-1px}
/* Te same sklepy, ale przyciski zamiast QR, widoczne tylko na telefonie. */
.store-btn{min-height:74px;display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;background:#fffafa;border:1px solid #f1dfe3;border-radius:17px;box-shadow:0 5px 16px rgba(75,38,54,.03);transition:transform .18s,border-color .18s,box-shadow .18s}
.store-btn:hover{transform:translateY(-2px);border-color:#f3a0a7;box-shadow:0 10px 22px rgba(75,38,54,.08)}
.store-logo{width:30px;height:30px;flex:0 0 30px}
.store-text{display:grid;gap:4px}
.store-text small{font-size:11px;font-weight:600;color:#9b808a;white-space:nowrap}
.store-text strong{font-size:16px;font-weight:800}
.arrow{margin-left:auto;font-size:18px;color:var(--coral-deep)}
.security-note{border-top:1px solid #f5e8ea;padding-top:15px;margin:20px 0 0;display:flex;align-items:center;gap:8px;font-size:12px;color:#aa9099}
.security-note svg{flex:0 0 16px;width:16px;height:16px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:7px 0 24px;color:#a18b95;font-size:12px}
.footer a{text-decoration:none;color:#8b6675}
.footer a:hover{color:var(--coral-deep);text-decoration:underline}
@media(max-width:1050px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr)}.hero-content{padding:42px 12px 42px 42px}.screen-back{right:-9%;width:207px}.screen-front{right:34%;width:236px}.qr-area{grid-template-columns:repeat(2,minmax(0,270px));gap:16px}}
@media(max-width:760px){.site-shell{padding:0 14px}.site-header{height:85px;padding:0 4px}.brand img{width:162px}.help-link{font-size:0;gap:0}.help-link svg{width:24px;height:24px}.hero{grid-template-columns:1fr;border-radius:27px}.hero-content{padding:33px 25px 28px}.hero-visual{display:none}.screens{max-width:390px;margin:0 auto;position:relative;height:210px}.screen-front{width:132px;right:48%;top:-14px}.screen-back{width:118px;right:19%;top:-2px}.blob-a{width:300px;height:300px;top:-40px;right:calc(50% - 190px)}.visual-heart{right:17%;bottom:8px;font-size:38px}.eyebrow{font-size:10px}h1{font-size:clamp(37px,8.3vw,53px);margin:19px 0 17px}h1 br{display:none}.lead{font-size:16px}.steps{margin-top:18px;gap:11px}.app-note{margin-top:19px}.download{margin:15px 0 17px;padding:26px 22px 18px;border-radius:25px}.download-grid{margin-top:20px}.store-buttons{display:grid;grid-template-columns:1fr;gap:11px}.qr-area{display:none}.footer{justify-content:center;text-align:center;gap:13px;padding-bottom:22px}.footer span:nth-child(2){order:3;width:100%}}
@media(max-width:440px){.hero-content{padding:29px 21px 25px}.hero-visual{min-height:176px}.screens{height:180px}.screen-front{width:116px;right:49%;top:-8px}.screen-back{width:106px;right:19%;top:0}.download{padding:24px 19px 17px}h2{font-size:25px}.step p{font-size:13px}.app-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Premium: dyskretny detal w obrębie istniejącej identyfikacji wizualnej. */
.visual-premium{position:absolute;right:9%;bottom:35px;border:1px solid rgba(250,124,130,.27);background:#fff8f9;color:#c45f6f;box-shadow:0 12px 28px rgba(75,38,54,.11);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:850;letter-spacing:.02em;transform:rotate(-7deg)}
@media(max-width:760px){.visual-premium{display:none}}

/* Instrukcje zależne od sposobu prezentacji sklepów. */
.download-instructions-mobile{display:none}
@media(max-width:760px){.download-instructions-desktop{display:none}.download-instructions-mobile{display:block}}

/* Aktywowanie tekstu zależnego od źródła wejścia.
   [hidden] ma pierwszeństwo nad regułami desktop/mobile. */
[data-entry-source][hidden]{display:none!important}
.source-step-content{flex:1;min-width:0}

/* Krótki adres pozostaje w całości w jednym wierszu, bez rozdzielania po ukośniku. */
.source-step-content .inline-url{display:inline-block;white-space:nowrap;color:var(--coral-deep);font-weight:750;text-decoration:underline;text-underline-offset:2px}

/* Adres Premium zawsze jest jednym elementem. W kroku 02 ma własny,
   czytelny wiersz, a nie przypadkowe łamanie po ukośniku. */
.premium-url-line{display:block;margin:9px 0 9px}
.premium-url{display:inline-block;max-width:100%;padding:9px 13px;border:1px solid #f4d6dc;border-radius:12px;background:#fff7f8;color:var(--coral-deep)!important;font-weight:800;text-decoration:none;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;font-size:clamp(12px,3.6vw,14px);line-height:1.45}
.premium-url:hover{background:#fff0f2;border-color:#eda3b0;text-decoration:underline}
.premium-url span{margin-left:5px}
.premium-inline-url{display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;font-weight:750;color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
@media(max-width:340px){.premium-url{font-size:12px;padding:8px 9px}}

.app-note-text{flex:1;min-width:0}