/* Character-led visual layer; purchase and account behavior stays in main.js. */
.onn-home {
    --onn-blue: #0874d8;
    --onn-blue-hover: #0b68c1;
    --onn-muted: #aeb8c2;
}
.onn-artwork { display: block; min-width: 0; }
.onn-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; }
.onn-home .onn-hero { padding: 36px 0 32px; }
.onn-home .onn-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 38px; min-height: 560px; }
.onn-home .onn-status { margin-bottom: 22px; }
.onn-home .onn-hero h1 { font-weight: 600; line-height: 1.08; }
.onn-home .onn-hero-description { margin-top: 24px; }
.onn-home .onn-hero-offer .btn { min-height: 56px; }
.onn-home .onn-character-hero {
    display: block;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    isolation: isolate;
}
.onn-character-hero > .onn-artwork {
    position: relative;
    width: 94%;
    height: 100%;
    margin-inline: auto;
    mask-image: linear-gradient(#000 0 92%, transparent 100%);
}
.onn-home .onn-character-hero > .onn-artwork img { width: 100%; height: 100%; object-fit: contain; }
.onn-hero-services { position: absolute; inset: 0; pointer-events: none; }
.onn-service-float {
    position: absolute;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    background: #19252f;
    border: 1px solid #3b4d5b;
    border-radius: 8px;
    box-shadow: 0 9px 0 #0b1116, 0 18px 32px #0005, inset 0 1px 0 #ffffff18;
}
.onn-service-float img { width: 50px; height: 50px; object-fit: contain; }
.onn-service-float--youtube { left: 0; top: 19%; transform: rotate(-9deg); }
.onn-service-float--telegram { right: 0; top: 30%; transform: rotate(9deg); }
.onn-service-float--tiktok { left: 3%; bottom: 15%; transform: rotate(-7deg); }
.onn-home .onn-character-hero .onn-art-caption {
    width: max-content;
    max-width: 100%;
    bottom: 0;
    padding: 12px 20px;
    border-color: #334653;
    background: #141e26;
    box-shadow: 0 10px 28px #0003;
}
.onn-home .onn-character-hero .onn-art-caption > img { width: 36px; height: 36px; }
.onn-home .onn-character-hero .onn-art-caption > span { color: #aebdca; }
.onn-home .onn-character-hero .onn-art-caption strong { color: #fff; font-size: 15px; }
.onn-home .onn-benefits { padding-top: 16px; padding-bottom: 50px; }
.onn-home .onn-benefits-title { margin-bottom: 20px; }
.onn-home .onn-benefit-grid { gap: 18px; }
.onn-home .onn-benefit { grid-template-rows: 208px 1fr; background: #11181f; border-color: #29353f; }
.onn-home .onn-benefit-visual { height: 208px; overflow: hidden; border: 0; background: #0f161d; }
.onn-benefit-visual .onn-artwork { width: 280px; height: 280px; max-width: 100%; }
.onn-benefit-visual .onn-artwork img { width: 100%; height: 100%; }
.onn-home .onn-benefit-copy { padding: 20px 24px 24px; }
.onn-home .onn-benefit h3 { font-size: 21px; margin-bottom: 9px; }
.onn-home .onn-benefit p { font-size: 14px; line-height: 1.6; }
.onn-home .onn-everywhere { padding-block: 58px; background: #10171d; }
.onn-home .onn-everywhere-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 46px; }
.onn-home .onn-everywhere h2 { font-size: 40px; }
.onn-home .onn-everywhere .onn-section-lead { max-width: 450px; }
.onn-lifestyle { position: relative; width: 100%; min-width: 0; }
.onn-lifestyle > .onn-artwork { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; }
.onn-lifestyle > .onn-artwork img { width: 100%; height: 100%; object-fit: cover; }
.onn-lifestyle-services {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    color: #b7c4ce;
    font-size: 12px;
}
.onn-lifestyle-services img { width: 26px; height: 26px; object-fit: contain; }
.onn-lifestyle-services span { margin-left: auto; }
.onn-home .onn-steps { padding-top: 62px; padding-bottom: 40px; }
.onn-home .onn-step { background: #11181f; border-color: #29353f; }
.onn-home .onn-step-visual { height: 236px; grid-template-rows: minmax(0, 1fr); background: #10171d; overflow: hidden; }
.onn-step-visual .onn-artwork { width: 100%; height: 100%; min-height: 0; padding: 14px 20px 0; mask-image: linear-gradient(#000 0 92%, transparent 100%); }
.onn-step-visual .onn-artwork img { width: 100%; height: 100%; object-fit: contain; }
.onn-home .onn-step-visual > span { z-index: 1; top: 18px; left: 20px; font-size: 14px; color: #88b7da; }
.onn-home .onn-step-copy { padding: 20px 24px 24px; }
.onn-home .onn-step h3 { font-size: 21px; }
.onn-home .onn-step p { line-height: 1.6; }
.onn-home .onn-tariffs { padding-top: 32px; padding-bottom: 58px; }
.onn-home .onn-plan { background: #11181f; border-color: #2b3843; }
.onn-home .onn-plan-featured { background: #122333; border-color: #2e94ec; }
.onn-home .onn-plan-price strong { font-size: 36px; }
.onn-home .onn-plan-featured .onn-plan-heading > span { color: #96ceff; }
.onn-home .onn-faq { padding-block: 38px 64px; }
.onn-home .onn-faq summary { min-height: 76px; }
.onn-home .onn-support { padding-block: 44px; background: #10171d; }
.onn-home .onn-support-grid { max-width: 1050px; grid-template-columns: .9fr 1.1fr; gap: 70px; }
.onn-home .onn-support-character { position: relative; display: block; width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; }
.onn-support-character > .onn-artwork { position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(#000 0 86%, transparent 100%); }
.onn-support-telegram { position: absolute; right: -8px; top: 35%; display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #3a4e5e; border-radius: 8px; background: #19252f; box-shadow: 0 8px 0 #0b1116; transform: rotate(8deg); }
.onn-home .onn-support-telegram img { width: 44px; height: 44px; }
.onn-home .onn-support-copy h2 { font-size: 38px; }
.onn-home .onn-support-link { border-top-color: #3b4b58; }
@media (min-width: 1600px) {
    .onn-home .onn-hero-grid { min-height: 590px; }
    .onn-home .onn-character-hero { max-width: 570px; }
    .onn-home .onn-benefit-visual { height: 220px; }
    .onn-home .onn-benefit { grid-template-rows: 220px 1fr; }
    .onn-benefit-visual .onn-artwork { width: 300px; height: 300px; }
}
@media (max-width: 1100px) {
    .onn-home .onn-hero-grid { gap: 24px; min-height: 480px; }
    .onn-home .onn-hero h1 { font-size: 48px; }
    .onn-service-float { width: 64px; height: 64px; }
    .onn-service-float img { width: 42px; height: 42px; }
    .onn-home .onn-everywhere-grid { gap: 30px; }
    .onn-home .onn-everywhere h2 { font-size: 34px; }
    .onn-home .onn-benefit h3, .onn-home .onn-step h3 { font-size: 19px; }
    .onn-home .onn-benefit-copy, .onn-home .onn-step-copy { padding-inline: 18px; }
}
@media (min-width: 681px) and (max-width: 820px) {
    .onn-home .onn-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 12px; }
    .onn-home .onn-hero h1 { font-size: 39px; }
    .onn-service-float { width: 48px; height: 48px; }
    .onn-service-float img { width: 30px; height: 30px; }
    .onn-home .onn-character-hero .onn-art-caption { padding: 8px 12px; }
    .onn-home .onn-character-hero .onn-art-caption strong { font-size: 12px; }
    .onn-home .onn-benefit { grid-template-rows: 162px 1fr; }
    .onn-home .onn-benefit-visual { height: 162px; }
    .onn-benefit-visual .onn-artwork { width: 220px; height: 220px; }
    .onn-home .onn-benefit h3, .onn-home .onn-step h3 { font-size: 18px; }
    .onn-home .onn-everywhere-grid { grid-template-columns: 1fr; gap: 30px; }
    .onn-home .onn-everywhere-copy { max-width: 580px; }
    .onn-lifestyle { max-width: 620px; }
    .onn-home .onn-step-visual { height: 190px; }
    .onn-home .onn-support-grid { gap: 30px; }
    .onn-home .onn-support-copy h2 { font-size: 30px; }
}
@media (max-width: 680px) {
    .onn-home .onn-hero { padding: 22px 0 24px; }
    .onn-home .onn-hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .onn-home .onn-status { margin-bottom: 13px; }
    .onn-home .onn-hero h1 { font-size: 38px; max-width: 430px; }
    .onn-home .onn-character-hero { width: 300px; max-width: 100%; margin: 14px auto 12px; aspect-ratio: 1; }
    .onn-character-hero > .onn-artwork { width: 94%; }
    .onn-service-float { width: 50px; height: 50px; border-radius: 8px; box-shadow: 0 5px 0 #0b1116, 0 10px 20px #0004; }
    .onn-service-float img { width: 32px; height: 32px; }
    .onn-service-float--youtube { left: 0; top: 18%; }
    .onn-service-float--telegram { right: 0; top: 32%; }
    .onn-service-float--tiktok { left: 3%; bottom: 18%; }
    .onn-home .onn-character-hero .onn-art-caption { padding: 7px 13px; bottom: 0; gap: 8px; }
    .onn-home .onn-character-hero .onn-art-caption > img { width: 26px; height: 26px; }
    .onn-home .onn-character-hero .onn-art-caption > span { font-size: 9px; }
    .onn-home .onn-character-hero .onn-art-caption strong { font-size: 11px; }
    .onn-home .onn-hero-description { margin-top: 12px; }
    .onn-home .onn-hero-offer { margin-top: 18px; }
    .onn-home .onn-hero-offer .btn { min-height: 52px; }
    .onn-home .onn-benefits { padding-top: 12px; padding-bottom: 30px; }
    .onn-home .onn-benefits-title { margin-bottom: 14px; }
    .onn-home .onn-benefit-grid { gap: 10px; }
    .onn-home .onn-benefit { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: 1fr; min-height: 132px; }
    .onn-home .onn-benefit-visual { height: 100%; min-height: 132px; }
    .onn-benefit-visual .onn-artwork { width: 128px; height: 128px; max-width: none; }
    .onn-home .onn-benefit-copy { padding: 16px 14px 16px 4px; }
    .onn-home .onn-benefit h3 { font-size: 17px; margin-bottom: 6px; }
    .onn-home .onn-benefit p { font-size: 12px; line-height: 1.5; }
    .onn-home .onn-everywhere { padding-block: 34px; }
    .onn-home .onn-everywhere-grid { grid-template-columns: 1fr; gap: 24px; }
    .onn-home .onn-everywhere h2 { font-size: 29px; }
    .onn-lifestyle-services { margin-top: 12px; gap: 12px; font-size: 11px; }
    .onn-lifestyle-services img { width: 24px; height: 24px; }
    .onn-home .onn-steps { padding-block: 36px 28px; }
    .onn-home .onn-step { grid-template-columns: 126px minmax(0, 1fr); min-height: 144px; }
    .onn-home .onn-step-visual { height: 100%; min-height: 144px; }
    .onn-step-visual .onn-artwork { height: 144px; padding: 8px 0 0; }
    .onn-home .onn-step-visual > span { top: 7px; left: 9px; font-size: 11px; }
    .onn-home .onn-step-copy { padding: 15px 14px 15px 6px; }
    .onn-home .onn-step h3 { font-size: 17px; }
    .onn-home .onn-step p { font-size: 12px; line-height: 1.5; }
    .onn-home .onn-tariffs { padding-top: 26px; padding-bottom: 32px; }
    .onn-home .onn-plan { min-height: 216px; }
    .onn-home .onn-plan:first-child { min-height: 0; }
    .onn-home .onn-plan-price strong { font-size: 30px; }
    .onn-home .onn-faq { padding-block: 30px 38px; }
    .onn-home .onn-faq summary { min-height: 66px; }
    .onn-home .onn-support { padding-block: 34px 24px; }
    .onn-home .onn-support-grid { grid-template-columns: 100px minmax(0, 1fr); gap: 0 20px; }
    .onn-home .onn-support-copy { display: contents; }
    .onn-home .onn-support-copy .onn-eyebrow { grid-column: 1 / -1; grid-row: 1; }
    .onn-home .onn-support-copy h2 { grid-column: 1 / -1; grid-row: 2; font-size: 29px; }
    .onn-home .onn-support-copy > p:not(.onn-eyebrow) { grid-column: 1 / -1; grid-row: 3; margin-bottom: 20px; }
    .onn-home .onn-support-character { grid-column: 1; grid-row: 4; width: 100px; height: 110px; display: block; }
    .onn-home .onn-support-telegram { width: 30px; height: 30px; right: -2px; top: 45%; border-radius: 5px; box-shadow: 0 3px 0 #0b1116; }
    .onn-home .onn-support-telegram img { width: 20px; height: 20px; }
    .onn-home .onn-support-link { grid-column: 2; grid-row: 4; align-self: center; margin: 0; padding: 0; border: 0; gap: 8px; }
    .onn-home .onn-support-link strong { font-size: 18px; }
    .onn-home .onn-support-link small { font-size: 10px; }
    .onn-home .onn-support-link > span:last-child { font-size: 22px; }
}
@media (max-width: 374px) {
    .onn-home .onn-hero h1 { font-size: 34px; }
    .onn-home .onn-character-hero { width: 280px; }
    .onn-home .onn-benefit { grid-template-columns: 108px minmax(0, 1fr); }
    .onn-benefit-visual .onn-artwork { width: 116px; height: 116px; }
    .onn-home .onn-benefit h3 { font-size: 16px; }
    .onn-home .onn-step { grid-template-columns: 112px minmax(0, 1fr); }
    .onn-home .onn-step h3 { font-size: 16px; }
    .onn-home .onn-support-grid { gap: 0 14px; grid-template-columns: 90px minmax(0, 1fr); }
    .onn-home .onn-support-copy h2 { font-size: 27px; }
    .onn-home .onn-support-link strong { font-size: 17px; }
}