.peyo-page { --peyo-ink:#101317; --peyo-paper:#fbf4ed; --peyo-coral:#f24f3c; --peyo-gold:#ffc94a; --peyo-blue:#6170ff; background:var(--peyo-paper); color:var(--peyo-ink); }
.peyo-page .peyo-header { position:absolute; z-index:4; top:0; left:50%; width:min(1180px,calc(100% - 48px)); height:92px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.18); color:#fff; }
.peyo-brand { display:flex; align-items:center; gap:12px; }.peyo-brand img { width:44px; height:44px; border-radius:14px; }.peyo-brand span { display:flex; flex-direction:column; line-height:1.25; }.peyo-brand strong { font-size:18px; }.peyo-brand small { color:rgba(255,255,255,.6); font:700 9px/1.5 monospace; letter-spacing:.12em; }.peyo-header nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:750; }.peyo-header nav a:hover,.peyo-text-link:hover { color:var(--peyo-gold); }.peyo-header__cta { padding:10px 14px; border:1px solid rgba(255,255,255,.42); border-radius:999px; }
.peyo-locale-links { display:flex; align-items:center; gap:8px; margin-left:auto; padding-left:24px; font:800 10px/1 monospace; letter-spacing:.08em; }.peyo-locale-links a { color:rgba(255,255,255,.55); }.peyo-locale-links a:hover { color:var(--peyo-gold); }.peyo-locale-links a[aria-current="page"] { color:var(--peyo-ink); background:var(--peyo-gold); border-radius:999px; }
.peyo-hero { position:relative; min-height:790px; overflow:hidden; display:grid; grid-template-columns:1fr .95fr; align-items:center; gap:30px; padding:150px max(36px,calc((100vw - 1180px)/2)) 90px; color:#fff; background:radial-gradient(circle at 78% 25%,rgba(97,112,255,.35),transparent 28%),radial-gradient(circle at 20% 90%,rgba(242,79,60,.22),transparent 25%),var(--peyo-ink); }.peyo-hero__copy { position:relative; z-index:2; max-width:670px; }.peyo-eyebrow,.peyo-kicker { margin:0 0 22px; font:800 11px/1.4 monospace; letter-spacing:.15em; }.peyo-eyebrow { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); }.peyo-eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--peyo-gold); box-shadow:0 0 0 5px rgba(255,201,74,.16); }.peyo-hero h1 { margin:0; font-size:clamp(38px,5vw,67px); line-height:1.28; letter-spacing:-.04em; }.peyo-hero h1 em,.peyo-intro h2 em,.peyo-card-feature h2 em,.peyo-pricing h2 em,.peyo-final h2 em { color:var(--peyo-gold); font-style:normal; }.peyo-hero__lead { max-width:560px; margin:28px 0 34px; color:rgba(255,255,255,.78); font-size:16px; line-height:2.05; }.peyo-hero__actions { display:flex; align-items:center; gap:24px; }.peyo-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:54px; padding:10px 22px; border-radius:4px; font-size:14px; font-weight:800; }.peyo-button--light { color:var(--peyo-ink); background:#fff; }.peyo-button--light:hover { background:var(--peyo-gold); }.peyo-button--dark { color:#fff; background:var(--peyo-ink); }.peyo-button--dark:hover { background:#2b3039; }.peyo-text-link { padding-bottom:4px; border-bottom:1px solid currentColor; font-size:13px; font-weight:750; }.peyo-hero__note { margin:20px 0 0; color:rgba(255,255,255,.53); font-size:12px; }
.peyo-hero__visual { position:relative; min-height:530px; display:flex; align-items:center; justify-content:center; }.peyo-hero__screenshot { display:block; width:min(100%,320px); height:auto; object-fit:contain; border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.45); transform:rotate(1deg); }
.peyo-intro { display:grid; grid-template-columns:1.15fr .85fr; gap:20px 80px; align-items:start; max-width:1180px; margin:0 auto; padding:112px 0; border-bottom:1px solid rgba(16,19,23,.13); }.peyo-intro .peyo-kicker { grid-area:1/1; color:#777b83; }.peyo-intro h2 { grid-area:2/1; margin:0; font-size:clamp(31px,4vw,49px); line-height:1.45; letter-spacing:-.04em; }.peyo-intro > p:last-child { grid-area:1/2/3/2; align-self:center; max-width:32em; margin:0; color:#666b74; font-size:15px; line-height:2.1; }.peyo-kicker { color:#70747c; }
.peyo-screens { max-width:1180px; margin:0 auto; padding:112px 0 0; }.peyo-screen-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,260px)); justify-content:space-between; gap:18px; }.peyo-screen-gallery figure { margin:0; border-radius:12px; background:#f2ece6; box-shadow:0 18px 40px rgba(16,19,23,.12); }.peyo-screen-gallery img { display:block; width:100%; height:auto; border-radius:12px 12px 0 0; }.peyo-screen-gallery figcaption { display:flex; align-items:center; gap:12px; padding:16px 18px; color:#676c76; font-size:13px; }.peyo-screen-gallery figcaption b { color:var(--peyo-coral); font:800 10px/1 monospace; letter-spacing:.12em; }
.peyo-how { max-width:1180px; margin:0 auto; padding:112px 0; }.peyo-section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:48px; }.peyo-section-heading .peyo-kicker { margin-bottom:10px; }.peyo-section-heading h2,.peyo-card-feature h2,.peyo-pricing h2,.peyo-final h2 { margin:0; font-size:clamp(31px,4vw,49px); line-height:1.45; letter-spacing:-.04em; }.peyo-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.peyo-step { min-height:370px; padding:30px; border:1px solid rgba(16,19,23,.13); border-radius:8px; background:#fff; }.peyo-step__number { display:block; margin-bottom:40px; color:var(--peyo-coral); font:800 11px/1 monospace; letter-spacing:.12em; }.peyo-step h3 { margin:28px 0 12px; font-size:23px; }.peyo-step p { margin:0; color:#666b74; font-size:14px; line-height:1.95; }.peyo-step__icon { display:flex; align-items:center; justify-content:center; width:110px; height:110px; border-radius:50%; background:#f4ede5; }.peyo-step__icon--draw { display:grid; grid-template-columns:repeat(3,18px); gap:5px; align-content:center; justify-content:center; }.peyo-step__icon--draw i { width:18px; height:23px; border:1px solid #c7c9d2; border-radius:40%; background:#fff; }.peyo-step__icon--draw i:nth-child(2),.peyo-step__icon--draw i:nth-child(5),.peyo-step__icon--draw i:nth-child(8) { background:var(--peyo-coral); border-color:var(--peyo-coral); }.peyo-step__icon--count { flex-direction:column; color:var(--peyo-coral); }.peyo-step__icon--count b { font-size:33px; line-height:1; }.peyo-step__icon--count small { margin-top:7px; color:#868a92; font:700 9px/1 monospace; letter-spacing:.12em; }.peyo-step__icon--share { flex-direction:column; color:var(--peyo-blue); }.peyo-step__icon--share b { font-size:42px; line-height:1; }.peyo-step__icon--share small { margin-top:10px; color:#868a92; font:700 9px/1 monospace; letter-spacing:.08em; }
.peyo-card-feature { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; padding:120px max(36px,calc((100vw - 1180px)/2)); color:#fff; background:var(--peyo-ink); }.peyo-card-feature__visual { min-height:450px; display:grid; place-items:center; }.peyo-project-card { width:290px; min-height:390px; padding:28px; transform:rotate(-6deg); color:#fff; background:linear-gradient(145deg,var(--peyo-coral),#bb2e5c); box-shadow:22px 28px 0 rgba(255,201,74,.75),0 30px 70px rgba(0,0,0,.35); }.peyo-project-card > p { margin:0; color:rgba(255,255,255,.72); font:800 9px/1 monospace; letter-spacing:.16em; }.peyo-project-card h3 { margin:22px 0 24px; font-size:33px; line-height:1.05; }.peyo-project-card__pattern { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:16px; background:rgba(255,255,255,.14); }.peyo-project-card__pattern span { aspect-ratio:.7; border-radius:40%; background:#fff; opacity:.9; }.peyo-project-card__pattern span:nth-child(2n),.peyo-project-card__pattern span:nth-child(6n) { background:var(--peyo-gold); }.peyo-project-card__meta { display:flex; justify-content:space-between; margin-top:22px; color:rgba(255,255,255,.76); font-size:10px; }.peyo-card-feature__copy > p:not(.peyo-kicker) { max-width:33em; margin:24px 0 32px; color:rgba(255,255,255,.76); font-size:15px; line-height:2; }.peyo-card-feature__copy .peyo-button--dark { color:var(--peyo-ink); background:#fff; }.peyo-card-feature__copy .peyo-button--dark:hover { background:var(--peyo-gold); }
.peyo-pricing { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:36px 64px; align-items:start; max-width:1180px; margin:0 auto; padding:112px 0; }.peyo-pricing__heading { grid-column:1/-1; display:grid; grid-template-columns:1.05fr .95fr; gap:24px 72px; align-items:end; }.peyo-pricing__heading .peyo-kicker { grid-column:1/-1; margin-bottom:0; }.peyo-pricing__heading > p:last-child { max-width:38em; margin:0; color:#666b74; font-size:15px; line-height:2.05; }.peyo-pro-benefits { padding:34px; color:#fff; border-radius:12px; background:var(--peyo-ink); box-shadow:0 20px 45px rgba(16,19,23,.14); }.peyo-pro-benefits h3 { margin:0 0 24px; font-size:22px; line-height:1.5; }.peyo-pro-benefits ul { display:grid; gap:16px; margin:0; padding:0; list-style:none; }.peyo-pro-benefits li { display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.82); font-size:14px; line-height:1.7; }.peyo-pro-benefits li span { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; color:var(--peyo-ink); border-radius:50%; background:var(--peyo-gold); font-weight:900; }.peyo-price-list { display:grid; gap:14px; }.peyo-price-card { position:relative; display:grid; grid-template-columns:minmax(145px,.85fr) minmax(180px,1.15fr); gap:6px 24px; align-items:center; padding:26px 30px; border:1px solid rgba(16,19,23,.13); border-radius:12px; background:#fff; box-shadow:0 14px 32px rgba(16,19,23,.07); }.peyo-price-card--recommended { border:2px solid var(--peyo-coral); box-shadow:0 18px 38px rgba(242,79,60,.12); }.peyo-price-card__label { position:absolute; top:0; right:24px; transform:translateY(-50%); display:block; padding:6px 12px; color:#fff; border-radius:999px; background:var(--peyo-coral); font:800 10px/1.2 monospace; letter-spacing:.08em; }.peyo-price-card:not(.peyo-price-card--recommended) .peyo-price-card__label { color:#777b83; background:#eee8e2; }.peyo-price-card h3 { grid-row:1/3; margin:0; font-size:21px; line-height:1.4; }.peyo-price-card__price { display:flex; align-items:baseline; justify-content:flex-end; gap:8px; margin:0; text-align:right; }.peyo-price-card__price strong { font-size:31px; line-height:1.15; letter-spacing:-.04em; }.peyo-price-card__price span { color:#7b7f87; font-size:12px; font-weight:700; }.peyo-price-card > p:last-child { margin:0; color:#7b7f87; font-size:12px; text-align:right; }.peyo-pricing__action { grid-column:2; }.peyo-pricing__action > p { margin:0 0 14px; color:#777b83; font-size:12px; }.peyo-pricing__action .peyo-button { width:100%; }
.peyo-final { padding:120px 24px; text-align:center; background:var(--peyo-gold); }.peyo-final .peyo-kicker { color:#766021; }.peyo-final p:not(.peyo-kicker) { max-width:34em; margin:24px auto 30px; color:#5e501f; font-size:15px; line-height:2; }.peyo-final .peyo-button { margin:auto; }.peyo-footer { display:flex; justify-content:space-between; gap:20px; padding:32px max(36px,calc((100vw - 1180px)/2)); color:rgba(255,255,255,.65); background:#0b0d10; font-size:12px; }.peyo-footer a:hover { color:var(--peyo-gold); }
@media (max-width:900px) { .peyo-hero { grid-template-columns:1fr; text-align:center; }.peyo-hero__lead { margin-inline:auto; }.peyo-hero__actions { justify-content:center; }.peyo-hero__visual { width:min(100%,560px); margin:20px auto 0; }.peyo-intro { grid-template-columns:1fr; margin-inline:28px; gap:22px; }.peyo-intro .peyo-kicker,.peyo-intro h2,.peyo-intro > p:last-child { grid-area:auto; }.peyo-screens { margin-inline:28px; }.peyo-how { margin-inline:28px; }.peyo-steps { grid-template-columns:1fr; }.peyo-step { min-height:auto; }.peyo-card-feature { grid-template-columns:1fr; gap:45px; }.peyo-card-feature__copy { max-width:620px; margin:auto; }.peyo-pricing { grid-template-columns:1fr; margin-inline:28px; gap:32px; }.peyo-pricing__heading { grid-column:auto; grid-template-columns:1fr; gap:18px; }.peyo-pricing__heading .peyo-kicker { grid-column:auto; }.peyo-pro-benefits,.peyo-price-list,.peyo-pricing__action { grid-column:auto; }.peyo-footer { flex-direction:column; align-items:center; text-align:center; } }
@media (max-width:600px) { .peyo-page .peyo-header { width:calc(100% - 32px); height:126px; align-items:flex-start; padding-top:14px; }.peyo-brand img { width:38px; height:38px; border-radius:12px; }.peyo-brand strong { font-size:15px; }.peyo-brand small { display:none; }.peyo-header nav { gap:12px; font-size:11px; }.peyo-header nav a:not(.peyo-header__cta) { display:none; }.peyo-locale-links { position:absolute; right:0; bottom:0; gap:0; margin:0; padding:0; font-size:10px; }.peyo-locale-links a { display:grid; width:44px; height:44px; place-items:center; border-radius:999px; }.peyo-hero { min-height:auto; padding:154px 22px 60px; }.peyo-hero h1 { font-size:clamp(31px,8.6vw,43px); }.peyo-hero__lead { font-size:15px; }.peyo-hero__actions { flex-direction:column; gap:20px; }.peyo-hero__visual { min-height:410px; }.peyo-hero__screenshot { width:min(100%,250px); }.peyo-intro,.peyo-screens,.peyo-how,.peyo-pricing { padding:82px 0; }.peyo-screens { margin-inline:22px; }.peyo-screen-gallery { grid-template-columns:1fr; justify-items:center; gap:22px; }.peyo-screen-gallery figure { width:min(100%,250px); }.peyo-section-heading { display:block; }.peyo-section-heading h2 { margin-top:6px; }.peyo-step { padding:25px; }.peyo-card-feature { padding:85px 22px; }.peyo-card-feature__visual { min-height:390px; }.peyo-project-card { width:255px; min-height:350px; padding:23px; }.peyo-project-card h3 { font-size:28px; }.peyo-pricing { margin-inline:22px; }.peyo-pro-benefits { padding:27px; }.peyo-price-card { grid-template-columns:1fr; gap:8px; padding:27px; }.peyo-price-card h3 { grid-row:auto; }.peyo-price-card__price { justify-content:flex-start; text-align:left; }.peyo-price-card__price strong { font-size:28px; }.peyo-price-card > p:last-child { text-align:left; }.peyo-final { padding:85px 22px; }.peyo-footer { padding:28px 22px; } }
@media (prefers-reduced-motion:reduce) { .peyo-page * { scroll-behavior:auto; } }

/* Keep the accent bright on dark surfaces, but readable on paper and gold surfaces. */
.peyo-page { --peyo-gold-dark:#946500; }
.peyo-intro h2 em,.peyo-pricing h2 em { color:var(--peyo-gold-dark); }
.peyo-final h2 em { color:#6f5200; }
@media (max-width:600px) { .peyo-hero { display:flex; flex-direction:column; align-items:stretch; }.peyo-hero__visual { min-height:0; margin:24px auto 0; } }