*{box-sizing:border-box}
body{margin:0;background:#030d20;color:#f4f9ff;
font:16px/1.55 -apple-system,BlinkMacSystemFont,
"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:auto;padding:0 24px}
header{background:#061529;border-bottom:1px solid #218de0}
.head{min-height:82px;display:flex;justify-content:space-between;
align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-size:29px;font-weight:850;color:white}
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{font-size:15px;color:#dfedff}
nav a:hover,.language{color:#6ee2ff}
.sel{border:1px solid #2698ee;border-radius:23px;
padding:7px 17px;background:#113b6b}
.hero{background:#03122b url("assets/space-home.svg")
center 45%/cover no-repeat;min-height:442px}
.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;
align-items:center;gap:35px;padding-top:48px;padding-bottom:80px}
h1{font-size:clamp(40px,5.4vw,67px);line-height:1.08;
letter-spacing:-.045em;margin:0 0 14px;
text-shadow:0 5px 28px #000c}
.lead{font-size:20px;color:#b8e1ff;margin:0 0 27px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:1px solid #73d4ff;border-radius:12px;
padding:11px 21px;display:inline-flex;align-items:center;
justify-content:center;background:#0c3459;color:white;
box-shadow:0 0 18px #0689de54;font-weight:750;
font-size:16px;min-height:47px}
.btn.primary{background:linear-gradient(120deg,#73eaff,#00baf2);
color:#031b2d;box-shadow:0 0 22px #0fb6ff8a}
button.btn:disabled{opacity:.5;cursor:not-allowed}
.hero-icon{width:min(100%,350px);aspect-ratio:1;object-fit:contain;
justify-self:center;border-radius:36px;border:2px solid #56bfff;
box-shadow:0 0 26px #168bff,0 0 55px #0a8bff70}
.main{position:relative;margin-top:-35px}
.product{display:grid;grid-template-columns:1fr auto;
align-items:center;gap:30px;padding:27px 37px;
border-radius:27px;background:linear-gradient(125deg,#113c6b,#071b38);
border:1px solid #238fea;box-shadow:0 15px 55px #000b}
.product-info{display:flex;align-items:center;gap:24px}.product-info img{width:130px;height:130px;object-fit:contain;
border-radius:24px;box-shadow:0 0 18px #1799ff55}
h2{margin:0 0 6px;font-size:clamp(27px,3vw,43px)}
.product p{color:#c1d7ec;font-size:17px;margin:0}
.offer{border-left:1px solid #337fbb;padding-left:32px}
.price{font-size:41px;font-weight:850;color:#79e7ff;
white-space:nowrap;margin-bottom:11px}
.offer .btn{font-size:14px;padding:8px 14px;min-height:41px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);
gap:19px;margin:27px 0}
.tile{display:flex;align-items:center;justify-content:center;
gap:20px;min-height:94px;border-radius:18px;
border:1px solid #177acb;background:linear-gradient(140deg,#0c345e,#071c36);
font-size:17px;font-weight:700}
.tile svg{width:39px;height:39px;fill:none;stroke:#5de7ff;
stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
footer{border-top:1px solid #165685;margin-top:45px;
padding:26px 0;color:#bad0e5}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:780px){
.head{padding:14px 20px}
.hero-grid,.product,.tiles{grid-template-columns:1fr}
.hero-grid{padding-top:52px;padding-bottom:92px}
h1{font-size:42px}
.hero-icon{max-width:240px}
.product{padding:22px}
.product-info img{width:82px;height:82px}
.offer{border:0;border-top:1px solid #327cb6;padding:15px 0 0}
.price{font-size:34px}
.tile{min-height:75px}
}


/* IKRA_PLANET_AND_CONTACT_V1 */

.hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.hero::after {
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    left:0;
    right:0;
    bottom:0;
    height:clamp(135px,19vw,245px);
    background-image:url("img/MusicCatalog.jpg");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:100% auto;
    -webkit-mask-image:linear-gradient(
        to bottom,transparent 0%,black 26%
    );
    mask-image:linear-gradient(
        to bottom,transparent 0%,black 26%
    );
    filter:saturate(1.15) brightness(1.08);
}

.hero>.wrap {
    position:relative;
    z-index:1;
}

.btn {
    box-shadow:
        0 0 14px #139dec94,
        0 0 25px #0177ec55;
    transition:box-shadow .2s,transform .2s;
}

.btn:hover {
    box-shadow:
        0 0 19px #55d9ff,
        0 0 36px #068dff;
    transform:translateY(-2px);
}.btn.primary {
    box-shadow:
        0 0 18px #29d4ff,
        0 0 35px #03a3fa85;
}

.btn.primary:hover {
    box-shadow:
        0 0 25px #8defff,
        0 0 48px #03a3fa;
}

.btn:disabled {
    opacity:.5;
    box-shadow:none;
    transform:none;
}

.contact-btn {
    display:inline-flex;
    align-items:center;
    gap:11px;
}

.contact-icon {
    width:27px;
    height:27px;
    flex:none;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linejoin:round;
}

.telegram-contact {
    display:flex;
    align-items:center;
    gap:12px;
}

.telegram-icon {
    width:30px;
    height:30px;
    flex:none;
    fill:#54dfff;
}

.telegram-contact span {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.telegram-contact b {
    color:#8beeff;
}

.telegram-contact small {
    font-size:12px;
    color:#a9bdd6;
}

@media(max-width:780px) {
    .hero::after {
        height:150px;
        background-size:auto 550px;
    }
}


/* IKRA_ORIGINAL_PLANET_POSITION_V2 */

/* Затемняем космос, не меняя изображения */
.hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(0,5,17,.48) 0%,
        rgba(0,7,20,.38) 60%,
        rgba(0,7,20,.16) 100%
    );
}

/* Опускаем именно оригинальную планету */
.hero::after {
    bottom:-75px;
    filter:saturate(1.06) brightness(.92);
}

/* Текст и кнопки остаются над фоном */
.hero>.wrap {
    position:relative;
    z-index:1;
}


/* IKRA_GLASS_CARDS_V1 */

.product {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(
            ellipse at 18% 0%,
            rgba(65,165,255,.25),
            transparent 65%
        ),
        linear-gradient(
            125deg,
            rgba(12,47,87,.98),
            rgba(4,22,49,.98)
        );
    border:1px solid rgba(91,188,255,.85);
    box-shadow:
        0 20px 55px rgba(0,0,0,.65),
        0 0 22px rgba(0,133,255,.28),
        inset 0 2px 2px rgba(200,240,255,.25),
        inset 0 -18px 35px rgba(0,85,185,.12);
}

.product::before {
    content:"";
    position:absolute;
    top:0;
    left:7%;
    right:7%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(177,235,255,.9),
        transparent
    );
    pointer-events:none;
}

.product-info,
.offer {
    position:relative;
    z-index:1;
}

.product-info img {
    box-shadow:
        0 0 15px rgba(36,178,255,.8),
        0 0 32px rgba(13,112,255,.4),
        0 12px 22px rgba(0,0,0,.5);
}

.tile {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(40,143,255,.2),
            transparent 75%
        ),
        linear-gradient(
            155deg,
            #0d3158,
            #06182f
        );
    border:1px solid rgba(69,174,255,.8);
    box-shadow:
        0 12px 26px rgba(0,0,0,.35),
        inset 0 1px 1px rgba(176,231,255,.25),
        inset 0 -9px 20px rgba(12,86,170,.18);
    transition:
        border-color .2s,
        box-shadow .2s;
}

.tile:hover {
    border-color:#98eaff;
    box-shadow:
        0 0 24px rgba(18,151,255,.42),
        0 12px 26px rgba(0,0,0,.35);
}


/* IKRA_ORIGINAL_HORIZON_V4 */

/* Убираем искусственную SVG-планету */
.hero {
    background:
        radial-gradient(
            ellipse at 25% 35%,
            #103365,
            transparent 65%
        ),
        radial-gradient(
            ellipse at 85% 35%,
            #12396b,
            transparent 60%
        ),
        #020b1c !important;
}

/* Показываем нижнюю часть ИСХОДНОГО логотипа */
.hero::after {
    content:"";
    position:absolute;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:clamp(140px,18vw,255px) !important;

    background-image:url("img/MusicCatalog.jpg") !important;
    background-size:100% auto !important;
    background-position:center bottom !important;
    background-repeat:no-repeat !important;

    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 100%
    ) !important;

    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 22%,
        black 100%
    ) !important;

    opacity:1 !important;
    filter:none !important;
    pointer-events:none;
    z-index:0;
}

.hero > .wrap {
    position:relative;
    z-index:1;
}


/* IKRA_EXACT_ORIGINAL_PLANET_V5 */

.hero::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:-70px !important;
    width:100% !important;
    height:clamp(175px,21vw,250px) !important;

    background-image:url("assets/ikra-real-horizon-v5.png") !important;
    background-repeat:no-repeat !important;
    background-size:100% auto !important;
    background-position:center bottom !important;

    -webkit-mask-image:linear-gradient(
        to bottom,transparent 0%,black 18%
    ) !important;
    mask-image:linear-gradient(
        to bottom,transparent 0%,black 18%
    ) !important;

    filter:brightness(1.18) saturate(1.12) !important;
    opacity:1 !important;
    pointer-events:none !important;
    z-index:0 !important;
}

.hero > .wrap {
    position:relative;
    z-index:1;
}


/* IKRA_CENTER_GLOW_V6 */

.hero::after {
    background-image:
        radial-gradient(
            ellipse 22% 11% at 50% 87%,
            rgba(235,252,255,.95) 0%,
            rgba(103,214,255,.85) 22%,
            rgba(27,150,255,.55) 48%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 48% 23% at 50% 87%,
            rgba(19,149,255,.34) 0%,
            transparent 100%
        ),
        url("assets/ikra-real-horizon-v5.png") !important;

    background-size:
        100% 100%,
        100% 100%,
        100% auto !important;

    background-position:
        center center,
        center center,
        center bottom !important;

    background-repeat:no-repeat !important;
    filter:brightness(1.12) saturate(1.12) !important;
}

/* IKRA_CONTACT_BUTTONS_V1 */
.hero-grid .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.hero-grid .actions .btn {
    white-space: nowrap;
}
.telegram-btn .telegram-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* IKRA_MOBILE_20261110 - mobile-only refinements, desktop unchanged */
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .head { flex-direction: column; align-items: stretch; gap: 11px; padding: 14px 16px; }
  .brand { font-size: 25px; line-height: 1.15; }
  .head nav { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; }
  .head nav a { font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; padding: 6px 8px; }
  .head nav .sel { padding: 6px 12px; }
  .hero-grid { gap: 28px; padding-top: 36px; padding-bottom: 75px; }
  .hero-grid > div { min-width: 0; }
  .hero h1 { font-size: clamp(31px, 9vw, 42px); line-height: 1.12; overflow-wrap: break-word; }
  .hero .lead { font-size: 17px; margin-bottom: 20px; }
  .hero-icon { max-width: 190px; border-radius: 24px; }
  .main { margin-top: -28px; }
  .product { gap: 16px; border-radius: 19px; padding: 20px 16px; }
  .product-info { min-width: 0; gap: 14px; }
  .product-info img { width: 68px; height: 68px; flex: none; border-radius: 15px; }
  .product-info > div { min-width: 0; }
  .product-info h2 { font-size: clamp(24px, 7vw, 32px); overflow-wrap: break-word; }
  .product-info p { font-size: 14px; }
  .offer { padding-top: 17px; }
  .price { font-size: 32px; }
  .offer .btn { min-height: 45px; }
  .tiles { gap: 12px; margin-top: 20px; }
  .tile { justify-content: flex-start; padding: 12px 17px; font-size: 15px; min-height: 70px; }
  .tile svg { width: 31px; height: 31px; flex: none; }
  .about-page { padding-top: 38px; padding-bottom: 55px; }
  .about-page h1 { font-size: clamp(28px, 8vw, 36px); }
  .about-grid { gap: 13px; margin: 20px 0; }
  .about-grid article { padding: 20px; }
}
@media (max-width: 390px) {
  .hero-grid .actions { display: grid; grid-template-columns: 1fr; }
  .hero-grid .actions .btn { width: 100%; justify-content: center; }
  .offer { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .offer .price { grid-column: 1 / -1; margin-bottom: 4px; }
  .offer .btn { text-align: center; }
}