/* 1win — one-win.cl */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#141415;color:#f3f4f6;
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#0075ff;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* — шапка — */
.hd{position:sticky;top:0;z-index:50;background:#0f0f10;
 border-bottom:1px solid #3a3a3a;backdrop-filter:blur(8px)}
.hd-in{display:flex;align-items:center;gap:18px;height:72px}

.logo img{max-height:40px;width:auto}
.wordmark{font-weight:900;font-size:1.45rem;letter-spacing:-.03em;
 color:#f3f4f6;white-space:nowrap}
.wordmark::first-letter{color:#0075ff}
.logo:hover{text-decoration:none}
.nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}

.nav a{color:#959698;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:#f3f4f6;text-decoration:none}
.cta{display:inline-block;background:#0075ff;color:#ffffff;font-weight:800;
 padding:11px 22px;border-radius:999px;border:0;cursor:pointer;letter-spacing:.01em}
.cta:hover{background:#298bff;text-decoration:none}
.cta--ghost{background:transparent;color:#0075ff;border:2px solid #0075ff}
.cta--ghost:hover{background:#0075ff;color:#ffffff}

/* На узких экранах шапка в две строки, меню — горизонтальная прокрутка.
   Без JS: бургер тут не нужен, пунктов всего шесть. */
@media(max-width:860px){
 .hd-in{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
 .logo{margin-right:auto}
 .nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
  gap:18px;padding-bottom:2px;scrollbar-width:none}
 .nav::-webkit-scrollbar{display:none}
 .cta{padding:9px 16px;font-size:.92rem}
}

/* — герой — */
.hero{padding:64px 0 52px;
 background:radial-gradient(1100px 420px at 50% -10%,#102744,#141415)}
.hero h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;margin:0 0 14px;letter-spacing:-.02em}
.hero p.lead{font-size:1.1rem;color:#959698;margin:0 0 26px;max-width:62ch}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.hero-split{display:grid;gap:30px;align-items:center;
 grid-template-columns:1.05fr .95fr}
/* без промо-баннера вторая колонка не нужна — иначе половина экрана пустая */
.hero-split--solo{grid-template-columns:1fr}
.hero-split--solo .lead{max-width:70ch}
@media(max-width:860px){.hero-split{grid-template-columns:1fr}}
.hero-art{display:block;border-radius:14px;overflow:hidden;line-height:0}
.hero-art img{width:100%;max-height:400px;object-fit:cover}
.hero-art:hover{text-decoration:none}

/* — секции — */
.sec{padding:56px 0}
.sec h2{font-size:clamp(1.35rem,2.6vw,2rem);margin:0 0 8px;letter-spacing:-.01em}
.sec .sub{color:#959698;margin:0 0 22px;max-width:72ch}
.sec p{margin:0 0 14px}
.sec p+h3{margin-top:22px}
.sec h3{font-size:1.12rem;margin:0 0 8px}

/* — карточки и плитки — */
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:#212122;border:1px solid #3a3a3a;border-radius:14px;padding:20px}
.card h3{margin:0 0 6px;color:#0075ff}
.card p{margin:0;color:#959698;font-size:.96rem}

.tiles{display:grid;gap:12px;
 grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{display:block;background:#212122;border:1px solid #3a3a3a;border-radius:14px;
 overflow:hidden;line-height:0;transition:border-color .15s}
.tile:hover{border-color:#0075ff;text-decoration:none}
.tile img{width:100%;height:auto;object-fit:cover;display:block}
/* Пропорция задаётся по РЕАЛЬНОЙ форме картинки, а не одна на всех.
   Единый aspect-ratio:1/1 резал широкие баннеры до 40% ширины, а портретные
   обложки обрезал сверху и снизу — у slottica квадратных был 1 файл из 25. */
.tile--square img{aspect-ratio:1/1}
.tile--wide img{aspect-ratio:16/9}
.tile--tall img{aspect-ratio:3/4}
.tile--hero img{aspect-ratio:16/9}
.tile span{display:block;padding:9px 10px;font-size:.85rem;color:#959698;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* — таблица — */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.tbl th,.tbl td{border:1px solid #3a3a3a;padding:10px 12px;text-align:left}
.tbl th{background:#2c2c2c;font-weight:700}
.tbl-scroll{overflow-x:auto}

/* — шаги — */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{background:#212122;border:1px solid #3a3a3a;border-radius:14px;padding:18px 18px 18px 58px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;
 width:28px;height:28px;border-radius:999px;background:#0075ff;color:#ffffff;
 display:grid;place-items:center;font-weight:800;font-size:.9rem}
.step h3{margin:0 0 5px;font-size:1rem}
.step p{margin:0;color:#959698;font-size:.93rem}

/* — FAQ — */
.faq{border-top:1px solid #3a3a3a}
.faq details{border-bottom:1px solid #3a3a3a}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:#0075ff;font-weight:800}
.faq details[open] summary::after{content:'−'}
.faq p{margin:0 0 15px;color:#959698}

/* — призыв — */
.band{background:linear-gradient(100deg,#0e315b,#152c48);
 border:1px solid #3a3a3a;border-radius:14px;padding:28px;text-align:center;margin:26px 0}
.band h2{margin:0 0 8px}
.band p{color:#959698;margin:0 0 18px}

/* — подвал — */
.ft{border-top:1px solid #3a3a3a;background:#0e0e0f;margin-top:56px;padding:34px 0 26px}
.ft-cols{display:grid;gap:26px;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.ft-cols{grid-template-columns:1fr}}
.ft h4{margin:0 0 10px;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:#959698}
.ft a{color:#959698;display:block;padding:3px 0;font-size:.94rem}
.ft a:hover{color:#f3f4f6}
.ft-note{margin-top:24px;padding-top:18px;border-top:1px solid #3a3a3a;
 color:#959698;font-size:.85rem;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.age{flex:none;background:#0075ff;color:#ffffff;font-weight:800;border-radius:999px;padding:3px 11px;font-size:.8rem}
.crumbs{color:#959698;font-size:.87rem;padding:14px 0 0}
.crumbs a{color:#959698}