/* =====================================================================
styles.css — Аукціонний Телеграм Бот landing
Brand tokens lifted from the bot's design system:
accent #4478ae · rarity blue/violet/orange/diamond · Unbounded display
Three aesthetic directions switch via [data-theme] on :
telegram (default) · rarity · midnight
===================================================================== */
/* ---------- Fonts ----------
Loaded via + in index.html
so the browser discovers them during HTML parse (an @import here is
only found after this CSS downloads, creating an extra request hop). */
/* ---------- Fixed rarity palette (brand constant) ---------- */
:root{
--rare:#4a90e2; --epic:#9b59b6; --legendary:#e67e22; --diamond:#cfd8dc;
--success:#4caf50; --warning:#ff9800; --error:#f44336;
--ok-soft:#7bdc80; --err-soft:#ff8a7d; /* legible success/error text on dark */
--display:'Unbounded'; --body:'Manrope';
--maxw:1180px;
}
/* ---------- THEME: telegram (default) ---------- */
:root,
[data-theme="telegram"]{
--bg:#0c1117; --bg2:#0f1419; --card:#161f29; --elev:#1c2733;
--line:#27333f; --line2:#33424f;
--tx:#eef2f6; --tx2:#a8b4c0; --tx3:#8a96a3;
--accent:#4f8fce; --accent2:#5fa6e0;
--grad:linear-gradient(135deg,#4f8fce 0%,#5fa6e0 100%);
--aura1:radial-gradient(60% 60% at 78% 8%, rgba(79,143,206,.22), transparent 70%);
--aura2:radial-gradient(50% 50% at 10% 60%, rgba(95,166,224,.12), transparent 70%);
--ringglow:0 10px 24px -12px rgba(79,143,206,.55);
}
/* ---------- THEME: rarity (premium, multi-hue) ---------- */
[data-theme="rarity"]{
--bg:#090b11; --bg2:#0c0f16; --card:#13161f; --elev:#1a1e29;
--line:#222634; --line2:#2e3342;
--tx:#f1eef7; --tx2:#aeb0c2; --tx3:#8a8ca0;
--accent:#9b6cd6; --accent2:#e07a4f;
--grad:linear-gradient(110deg,#4a90e2 0%,#9b59b6 48%,#e67e22 100%);
--aura1:radial-gradient(55% 55% at 82% 6%, rgba(155,89,182,.26), transparent 70%);
--aura2:radial-gradient(55% 55% at 6% 50%, rgba(74,144,226,.16), transparent 70%);
--ringglow:0 10px 24px -12px rgba(155,89,182,.55);
}
/* ---------- THEME: midnight (near-black, minimal) ---------- */
[data-theme="midnight"]{
--bg:#05070b; --bg2:#080a0f; --card:#0f1217; --elev:#151921;
--line:#1c2128; --line2:#2a3038;
--tx:#f4f6f8; --tx2:#9aa4b0; --tx3:#828c99;
--accent:#a779e0; --accent2:#c9a9ee;
--grad:linear-gradient(135deg,#a779e0 0%,#cfd8dc 120%);
--aura1:radial-gradient(55% 55% at 80% 6%, rgba(167,121,224,.20), transparent 72%);
--aura2:radial-gradient(50% 50% at 8% 55%, rgba(207,216,220,.06), transparent 70%);
--ringglow:0 10px 24px -12px rgba(167,121,224,.5);
}
/* ---------- Display-font tweak hooks ---------- */
[data-display="system"]{ --display:'Manrope'; }
/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
margin:0; background:var(--bg); color:var(--tx);
font-family:var(--body),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
em{font-style:normal; color:var(--accent2);}
h1,h2,h3,h4{font-family:var(--display),sans-serif; font-weight:700; line-height:1.08;
letter-spacing:-.02em; margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{position:relative;}
/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--accent2); outline-offset:3px;}
[tabindex="-1"]:focus{outline:none;} /* skip-link target shouldn't show a ring */
.skip{position:fixed; left:50%; top:-70px; transform:translateX(-50%); z-index:100;
background:var(--card); color:var(--tx); border:1px solid var(--line2);
padding:11px 20px; border-radius:11px; font-family:var(--body); font-weight:600;
font-size:14px; box-shadow:0 12px 30px -12px rgba(0,0,0,.6); transition:top .2s ease;}
.skip:focus{top:12px;}
/* ---------- Shared heading bits ---------- */
.lead{color:var(--tx2); font-size:18px; max-width:60ch;}
/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
font-family:var(--body); font-weight:700; font-size:15.5px; border-radius:13px;
padding:14px 24px; cursor:pointer; border:1px solid transparent;
transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--ringglow);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--tx); border-color:var(--line2);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent2);}
.btn svg{width:18px; height:18px;}
/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50;
background:color-mix(in srgb, var(--bg) 90%, transparent);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border-bottom:1px solid transparent; transition:border-color .3s, background .3s;}
.nav.scrolled{border-color:var(--line); background:color-mix(in srgb, var(--bg) 97%, transparent);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:70px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display);
font-weight:700; font-size:16px; letter-spacing:-.01em;}
.brand .logo{width:34px; height:34px; border-radius:10px; background:var(--grad);
display:grid; place-items:center; flex-shrink:0; box-shadow:var(--ringglow);}
.brand .logo svg{width:19px; height:19px; color:#fff;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--tx2); transition:color .2s;}
.nav-links a:hover{color:var(--tx);}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav .btn{padding:10px 18px; font-size:14px;}
/* Hamburger button — hidden on desktop, shown in the mobile bar */
.menu-cta{display:none;}
.nav-toggle{display:none; flex-direction:column; align-items:center; justify-content:center;
gap:4px; width:44px; height:44px; flex-shrink:0; padding:0; cursor:pointer;
border:1px solid var(--line2); border-radius:11px; background:transparent;}
.nav-toggle span{width:18px; height:2px; border-radius:2px; background:var(--tx);
transition:transform .25s ease, opacity .2s ease;}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav.open .nav-toggle span:nth-child(2){opacity:0;}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:820px){
.nav-cta{display:none;}
.nav-toggle{display:flex;}
.brand{min-width:0;}
.brand > span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Links collapse into a full-width dropdown under the bar */
.nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column;
align-items:stretch; gap:0; padding:8px 0 12px; background:var(--bg);
border-bottom:1px solid var(--line); box-shadow:0 24px 40px -24px rgba(0,0,0,.7);
transform:translateY(-10px); opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;}
.nav.open .nav-links{transform:none; opacity:1; pointer-events:auto;}
.nav-links a{display:flex; align-items:center; min-height:48px; padding:13px 28px;
font-size:16px; color:var(--tx);}
.nav-links a:hover{color:var(--tx); background:var(--bg2);}
.nav-links .menu-cta{display:inline-flex; justify-content:center; margin:10px 24px 4px;
min-height:48px;}
}
/* ---------- Hero ---------- */
.hero{padding:54px 0 70px; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
background:var(--aura1);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:54px; align-items:center;
position:relative; z-index:1;}
.pill{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 11px;
border:1px solid var(--line2); border-radius:999px; background:color-mix(in srgb,var(--card) 60%,transparent);
font-size:13px; font-weight:600; color:var(--tx2);}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--accent2);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 15%, transparent);}
.hero h1{font-size:clamp(38px,5.4vw,66px); font-weight:700; margin:22px 0 0;}
.hero .lead{margin-top:22px; font-size:19px;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
/* ---------- Phone frame ---------- */
.phone{position:relative; border-radius:34px; padding:11px;
background:linear-gradient(160deg,var(--elev),var(--bg)); border:1px solid var(--line2);
box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);}
.phone::after{content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
width:96px; height:6px; border-radius:6px; background:#000; opacity:.55; z-index:2;}
.phone img{border-radius:24px; width:100%;}
/* Floating card frame (no bezel) — used when [data-frame="float"] */
[data-frame="float"] .phone{padding:0; border-radius:22px; background:none;
border:1px solid var(--line); box-shadow:0 30px 70px -28px rgba(0,0,0,.75);}
[data-frame="float"] .phone::after{display:none;}
[data-frame="float"] .phone img{border-radius:21px;}
.hero-phone{position:relative; justify-self:center; max-width:330px; width:100%;}
.hero-phone .phone{transform:rotate(1.4deg);}
.phone-cap{position:absolute; left:-22px; bottom:46px; z-index:3;
background:var(--card); border:1px solid var(--line2); border-radius:13px;
padding:11px 14px; box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
display:flex; align-items:center; gap:11px; min-width:172px;}
.phone-cap .ico{width:34px; height:34px; border-radius:9px; background:var(--grad);
display:grid; place-items:center; flex-shrink:0;}
.phone-cap .ico svg{width:17px; height:17px; color:#fff;}
.phone-cap b{display:block; font-size:15px; font-family:var(--display); letter-spacing:-.01em;}
.phone-cap small{color:var(--tx3); font-size:11.5px; font-weight:600;}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr; gap:38px;}
.hero-copy{text-align:center;}
.hero-copy .lead{margin-left:auto; margin-right:auto;}
.hero-cta{justify-content:center;}
.hero-phone{order:-1; max-width:268px;}
.hero-phone .phone{transform:none;}
.phone-cap{left:auto; right:-6px;}
}
/* ---------- Section heading block ---------- */
.sec{padding:52px 0;}
.sec.tight-top{padding-top:20px;}
.sec-head{max-width:720px; margin-bottom:38px;}
.sec-head h2{font-size:clamp(30px,3.8vw,46px); margin-top:16px; font-weight:700;}
.sec-head .lead{margin-top:18px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-alt{background:var(--bg2);}
/* ---------- Old vs New ---------- */
.ovn{display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--card);}
.ovn-col{padding:34px 32px;}
.ovn-old{background:color-mix(in srgb,var(--error) 5%, var(--card));}
.ovn-new{background:color-mix(in srgb,var(--success) 6%, var(--card));}
.ovn-div{width:1px; background:var(--line);}
.ovn-tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px;}
.ovn-old .ovn-tag{color:var(--err-soft); background:color-mix(in srgb,var(--error) 16%, transparent);}
.ovn-new .ovn-tag{color:var(--ok-soft); background:color-mix(in srgb,var(--success) 16%, transparent);}
.ovn-col h3{font-size:23px; margin:16px 0 22px;}
.ovn-list{display:flex; flex-direction:column; gap:16px;}
.ovn-item{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--tx2);
line-height:1.5;}
.ovn-item .mk{width:22px; height:22px; border-radius:7px; flex-shrink:0; margin-top:1px;
display:grid; place-items:center;}
.ovn-old .mk{background:color-mix(in srgb,var(--error) 16%, transparent); color:var(--err-soft);}
.ovn-new .mk{background:color-mix(in srgb,var(--success) 18%, transparent); color:var(--ok-soft);}
.ovn-item .mk svg{width:13px; height:13px;}
.ovn-new .ovn-item{color:var(--tx);}
@media (max-width:860px){
.ovn{grid-template-columns:1fr;}
.ovn-div{width:auto; height:1px;}
}
/* ---------- How it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{position:relative;}
.step .num{position:relative; z-index:1; display:grid; place-items:center;
width:48px; height:48px; border-radius:50%; background:var(--card); border:1px solid var(--line2);
color:var(--accent2); font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:20px;}
/* thin connector line through the badge centres */
.step:not(:last-child)::after{content:""; position:absolute; top:24px; left:48px; right:-28px;
height:1px; background:var(--line2); z-index:0;}
.step h3{font-size:21px; margin:0 0 10px;}
.step p{color:var(--tx2); font-size:15px; margin:0;}
@media (max-width:780px){
.steps{grid-template-columns:1fr; gap:26px;}
.step:not(:last-child)::after{display:none;}
}
/* ---------- Feature showcase rows ---------- */
.showcase{display:flex; flex-direction:column; gap:56px;}
.show-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.show-row.rev .show-media{order:2;}
.show-copy h3{font-size:clamp(26px,3vw,36px); margin:0 0 16px; font-weight:700;}
.show-copy p{color:var(--tx2); font-size:17px; margin:0 0 24px;}
.show-bul{display:flex; flex-direction:column; gap:12px;}
.show-bul li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600;}
.show-bul .ck{width:22px; height:22px; border-radius:7px; background:color-mix(in srgb,var(--accent) 18%,transparent);
color:var(--accent2); display:grid; place-items:center; flex-shrink:0;}
.show-bul .ck svg{width:13px; height:13px;}
.show-media{position:relative; display:flex; justify-content:center; gap:18px;}
.show-media .phone{position:relative; z-index:1; max-width:280px;}
.show-media .phone.small{max-width:230px; align-self:flex-end; margin-bottom:18px;}
.show-media .phone.tall{max-width:262px;}
@media (max-width:880px){
.show-row{grid-template-columns:1fr; gap:34px;}
.show-row.rev .show-media{order:0;}
.show-media .phone{max-width:250px;}
/* one phone per row on small screens — two side-by-side get cramped */
.show-media .phone.small{display:none;}
}
/* ---------- Platform / white-label ---------- */
.plat{display:grid; grid-template-columns:.95fr 1.05fr; gap:54px; align-items:center;}
.plat-copy h2{font-size:clamp(30px,3.8vw,46px); margin-top:16px;}
.plat-copy .lead{margin-top:18px;}
.plat-list{display:grid; grid-template-columns:1fr 1fr; gap:15px 24px;}
.pli{display:flex; align-items:center; gap:12px; font-weight:600; font-size:15.5px; color:var(--tx);}
.pli .ck{width:23px; height:23px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent2);}
.pli .ck svg{width:13px; height:13px;}
@media (max-width:860px){ .plat{grid-template-columns:1fr; gap:30px;} }
@media (max-width:520px){ .plat-list{grid-template-columns:1fr;} }
/* ---------- CTA / contacts ---------- */
.cta{position:relative; border:1px solid var(--line2); border-radius:28px; overflow:hidden;
background:var(--card); padding:56px 48px;}
.cta::before{content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(70% 120% at 80% 0%, color-mix(in srgb,var(--accent) 11%,transparent), transparent 70%);}
.cta-inner{position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center;}
.cta h2{font-size:clamp(28px,3.4vw,42px); font-weight:700; max-width:18ch; margin-top:14px;}
.cta .lead{margin-top:16px;}
.contacts{display:flex; flex-direction:column; gap:12px; min-width:320px;}
.contact{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
border-radius:14px; background:var(--bg2); transition:border-color .2s, transform .2s;}
.contact:hover{border-color:var(--accent); transform:translateX(2px);}
.contact .av{width:42px; height:42px; border-radius:11px; background:var(--grad); flex-shrink:0;
display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:16px;}
.contact .meta{flex:1; min-width:0;}
.contact .meta small{display:block; color:var(--tx3); font-size:12px; font-weight:700;
text-transform:uppercase; letter-spacing:.08em;}
.contact .meta b{font-size:15px; font-weight:700;}
.contact .go{font-size:13px; font-weight:700; color:var(--accent2); display:inline-flex; align-items:center; gap:5px;}
.contact .go svg{width:14px; height:14px;}
@media (max-width:840px){
.cta{padding:40px 28px;}
.cta-inner{grid-template-columns:1fr; gap:30px;}
.contacts{min-width:0;}
}
/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line); padding:46px 0 40px; color:var(--tx3);}
.foot-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot .brand{font-size:15px; margin-bottom:8px;}
.foot .logo{width:28px; height:28px; border-radius:8px;}
.foot .logo svg{width:15px; height:15px;}
.foot p{margin:0; font-size:14px;}
.foot .handle{font-family:var(--display); font-size:14px; color:var(--tx2);}
/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px 24px;}
.gcard{margin:0; display:flex; flex-direction:column; align-items:center;}
.gcard .phone{max-width:224px; width:100%; transition:transform .3s ease;}
.gcard:hover .phone{transform:translateY(-3px);}
.gcap{margin-top:16px; font-family:var(--display); font-weight:500; font-size:15px;
letter-spacing:-.01em; color:var(--tx2); text-align:center;}
@media (max-width:880px){ .gallery{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){
.gallery{grid-template-columns:1fr; max-width:320px; margin:0 auto;}
/* trim to the first four screens on phones — full set still shows on tablet+ */
.gallery .gcard:nth-child(n+5){display:none;}
}
/* ---------- Mobile vertical rhythm (shorter scroll) ---------- */
@media (max-width:680px){
.sec{padding:38px 0;}
.hero{padding:34px 0 44px;}
.sec-head{margin-bottom:26px;}
.showcase{gap:40px;}
/* keep the now-single screenshot from ballooning in height */
.show-media .phone{max-width:224px;}
.hero-phone{max-width:248px;}
}
/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
/* hard fallback: if transitions don't advance (frozen preview) or reduced motion,
snap everything visible so content is never stuck hidden */
html.no-anim .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }
/* ---------- Tweaks panel host ---------- */
#tweaks-host{position:fixed; z-index:90;}