/* ===================================
   Blu-Shop
   Concept 1 — Хранитель ценного
   Final CSS
=================================== */


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}


:root {

    --dark:#061522;
    --dark-soft:#10283b;

    --blue:#1267b1;
    --blue-light:#318bd6;

    --gold:#c6a96b;

    --text:#24313d;

    --white:#ffffff;

    --gray-bg:#f5f7f9;

}



html {
    scroll-behavior:smooth;
}



body {

    font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;

    color:var(--text);

    line-height:1.7;

    background:#fff;

}



p {

    font-size:18px;

    line-height:1.75;

}



.container {

    width:min(1180px,92%);

    margin:auto;

}



/* ===================================
HEADER
=================================== */


.header {

    position:absolute;

    width:100%;

    top:0;

    z-index:10;

    padding:30px 0;

}



.header-inner {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo img {

    width:160px;

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:white;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}



nav a:hover {

    color:var(--gold);

}





/* ===================================
HERO
=================================== */


.hero {

    min-height:900px;

    display:flex;

    align-items:center;

    background:

    url("images/hero.jpg")

    center/cover no-repeat;

    position:relative;

}



.hero-overlay {

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(3,14,24,.95),

    rgba(3,14,24,.55)

    );

}



.hero-content {

    position:relative;

    z-index:2;

}



.hero-text {

    max-width:720px;

    color:white;

}



.hero h1 {

    font-size:

    clamp(42px,5vw,70px);

    line-height:1.08;

    margin-bottom:35px;

}



.hero .lead {

    font-size:25px;

    line-height:1.5;

    margin-bottom:20px;

}



.hero p {

    color:#e6edf4;

}



.buttons {

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:45px;

}



.btn {

    display:inline-flex;

    padding:15px 30px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.primary {

    background:var(--blue);

    color:white;

}



.primary:hover {

    background:var(--blue-light);

}



.secondary {

    border:1px solid rgba(255,255,255,.5);

    color:white;

}



.secondary:hover {

    background:white;

    color:var(--dark);

}



.trust-line {

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-top:45px;

    color:#dce7ef;

    font-size:15px;

}





/* ===================================
GENERAL
=================================== */


section {

    padding:110px 0;

}



h2 {

    font-size:

    clamp(32px,4vw,46px);

    line-height:1.2;

    color:var(--dark);

    text-align:center;

    margin-bottom:60px;

}



h3 {

    font-size:23px;

    margin-bottom:15px;

}





/* ===================================
WHY BLU-RAY
=================================== */


.problem {

    background:var(--gray-bg);

}



.columns {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.columns div {

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.06);

}





/* ===================================
FAMILY
=================================== */


.family-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.family img {

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}



.family h2 {

    text-align:left;

}



.family p {

    font-size:20px;

}





/* ===================================
PRODUCTS
=================================== */


.solutions {

    background:var(--gray-bg);

}



.cards {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



.card {

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);

    transition:.35s;

}



.card:hover {

    transform:translateY(-8px);

}



.card img {

    width:100%;

    height:280px;

    object-fit:cover;

}



.card h3 {

    margin:30px 30px 15px;

}



.card p {

    margin:0 30px;

    color:#4a5661;

}


.card-button {

    display:flex;

    width:max-content;

    margin:30px auto;

    padding:13px 24px;

    background:var(--blue);

    color:white !important;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    justify-content:center;

    align-items:center;

    transition:.3s;

}



.card-button:hover {

    background:var(--blue-light);

    transform:translateY(-2px);

}





/* ===================================
AUDIENCE
=================================== */


.audience {

    background:var(--dark);

}



.audience h2 {

    color:white;

}



.audience-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.audience-grid div {

    padding:35px;

    border:

    1px solid rgba(255,255,255,.15);

    border-radius:18px;

    color:white;

}



.audience-grid h3 {

    color:white;

}





/* ===================================
PROCESS SIMPLE
=================================== */


.process {

    background:white;

}



.steps {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.step {

    text-align:center;

    padding:35px 25px;

    background:var(--gray-bg);

    border-radius:18px;

}



.step span {

    display:block;

    font-size:42px;

    font-weight:700;

    color:var(--blue);

    margin-bottom:20px;

}



.step h3 {

    font-size:22px;

}



.step p {

    font-size:17px;

    color:#4a5661;

}





/* ===================================
ABOUT
=================================== */


.trust {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.trust div {

    background:var(--gray-bg);

    padding:35px;

    border-radius:18px;

}



.trust strong {

    display:block;

    font-size:26px;

    color:var(--dark);

    margin-bottom:15px;

}





/* ===================================
FINAL
=================================== */


.final {

    background:

    linear-gradient(

    120deg,

    #061522,

    #15446c

    );

    text-align:center;

}



.final h2 {

    color:white;

}



.final p {

    color:white;

    font-size:22px;

    margin-bottom:35px;

}





/* ===================================
FOOTER
=================================== */


footer {

    background:#030b12;

    color:#aaa;

    text-align:center;

    padding:30px 0;

}





/* ===================================
MOBILE
=================================== */


@media(max-width:900px){


.header {

    position:absolute;

    padding:20px 0;

}



.header-inner {

    justify-content:center;

}



.logo img {

    width:140px;

}



nav {

    display:none;

}



.hero {

    min-height:820px;

    padding-top:120px;

    background-position:80% center;

}



.hero-content {

    padding-top:40px;

}



.hero h1 {

    font-size:42px;

    margin-top:20px;

}



.buttons {

    flex-direction:column;

}



.btn {

    justify-content:center;

}



.trust-line {

    flex-direction:column;

    gap:10px;

}



.columns,

.cards,

.audience-grid,

.trust,

.family-grid,

.steps {

    grid-template-columns:1fr;

}



section {

    padding:80px 0;

}



.family h2 {

    text-align:center;

}



.card img {

    height:230px;

}



}

/* ===== Blu-ray / M-DISC information page ===== */
:root{
  --bg:#fff;--bg2:#f5f7f9;--muted:#687785;
  --line:rgba(6,21,34,.12);--line-hover:rgba(6,21,34,.28);
  --white:#fff;
}
.header .nav-active{color:var(--gold)}
.header .header-button{display:inline-flex;align-items:center;padding:11px 20px;border:1px solid rgba(255,255,255,.45);border-radius:7px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;transition:.3s}
.header .header-button:hover{background:#fff;color:var(--dark)}

.knowledge-hero{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden;padding:150px 0 100px;background:radial-gradient(circle at 78% 45%,rgba(49,139,214,.16),transparent 34%),linear-gradient(135deg,#061522 0%,#0b1d2c 58%,#061522 100%)}
.knowledge-hero-inner{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}
.knowledge-hero-content{position:relative;z-index:2;max-width:650px}
.knowledge-label,.archive-label{display:inline-block;margin-bottom:24px;color:#75b5e8;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.knowledge-hero h1{max-width:700px;margin:0 0 28px;color:#fff;font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.045em}
.knowledge-hero h1 span{display:block;color:#75b5e8}
.knowledge-hero p{max-width:570px;margin:0;color:#d8e4ed;font-size:20px;line-height:1.65}

.hero-disc-illustration{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center}
.disc{position:absolute;width:360px;height:360px;border-radius:50%}
.disc-back{transform:translate(-45px,-25px);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 8%),radial-gradient(circle,#172735 0%,#0b1118 58%,#05080c 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.disc-main{transform:translate(35px,30px);background:radial-gradient(circle at 30% 25%,rgba(130,180,220,.28),transparent 12%),conic-gradient(from 20deg,#172534,#263c4d,#0c151e,#29465a,#101b26,#172534);border:1px solid rgba(150,190,220,.35);box-shadow:0 35px 100px rgba(0,0,0,.65),inset 0 0 50px rgba(120,170,210,.08)}
.disc-main:before{content:"";position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.disc-hole{position:absolute;width:58px;height:58px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#080d12;border:1px solid rgba(255,255,255,.2)}
.disc-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2}
.disc-text strong{display:block;color:rgba(255,255,255,.9);font-size:22px;letter-spacing:.12em}
.disc-text span{display:block;margin-top:5px;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:.25em}
.disc-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:rgba(80,145,195,.08);filter:blur(60px);z-index:0}

.knowledge-section{padding:110px 0;background:#fff}
.knowledge-dark{background:radial-gradient(circle at 80% 50%,rgba(80,140,190,.07),transparent 30%),#f5f7f9}
.knowledge-heading{max-width:850px;margin-bottom:60px;display:flex;align-items:flex-start;gap:24px}
.knowledge-heading h2{margin:0 0 16px;color:var(--dark);font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.035em;text-align:left}
.knowledge-heading p{max-width:700px;margin:0;color:#687785;font-size:18px;line-height:1.6;text-align:left}
.knowledge-text p,.bdxl-text p,.mdisc-text p{margin:0 0 24px;color:#394956;font-size:18px;line-height:1.75}
.knowledge-note{margin-top:32px;padding:22px 24px;border-left:3px solid var(--blue);background:#f5f7f9;color:#52616e;font-size:15px;line-height:1.65}
.knowledge-note strong{color:var(--dark)}

.knowledge-two-column,.bdxl-layout,.mdisc-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.capacity-card{padding:40px;background:#fff;border:1px solid #dfe6eb;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.capacity-title{margin-bottom:35px;color:var(--dark);font-size:16px;font-weight:700}
.capacity-item{display:grid;grid-template-columns:70px 45px 1fr;align-items:center;gap:8px;margin-bottom:24px}
.capacity-item span{color:var(--dark);font-size:32px;font-weight:700}
.capacity-item small{color:#687785;font-size:13px}
.capacity-bar{height:6px;overflow:hidden;background:#e6edf2;border-radius:10px}
.capacity-bar i{display:block;height:100%;background:var(--blue);border-radius:10px}
.capacity-footnote{margin:30px 0 0;padding-top:22px;border-top:1px solid #e1e7eb;color:#687785;font-size:13px}

.layers-illustration{display:flex;flex-direction:column;gap:12px}
.layer-disc{position:relative;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border:1px solid #dce4ea;border-radius:8px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.layer-disc span{color:#687785;font-size:13px}.layer-disc strong{color:var(--dark);font-size:22px}
.layer-highlight{border-color:rgba(18,103,177,.35);background:#f1f7fc}.layer-highlight strong{color:var(--blue)}

.mdisc-visual{min-height:380px;display:flex;align-items:center;justify-content:center}
.mdisc-disc{position:relative;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),transparent 7%),conic-gradient(from 0deg,#0e1820,#27465b,#101923,#31566e,#101820,#1f384a,#0d151c);border:1px solid rgba(49,139,214,.4);box-shadow:0 30px 90px rgba(0,0,0,.35),inset 0 0 70px rgba(120,170,210,.08)}
.mdisc-ring{position:absolute;inset:28px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.mdisc-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.mdisc-label strong{display:block;color:#fff;font-size:28px;letter-spacing:.12em}.mdisc-label span{display:block;margin-top:6px;color:#75b5e8;font-size:10px;letter-spacing:.25em}.mdisc-label small{display:block;margin-top:5px;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.2em}
.mdisc-hole{position:absolute;top:50%;left:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:#061522;border:1px solid rgba(255,255,255,.18)}
.mdisc-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:70px;background:#dfe6eb}
.mdisc-principle{min-height:210px;padding:32px;background:#fff}.mdisc-principle>span{display:block;margin-bottom:35px;color:var(--blue);font-size:12px;font-weight:700}.mdisc-principle strong{display:block;margin-bottom:12px;color:var(--dark);font-size:20px}.mdisc-principle p{margin:0;color:#687785;font-size:14px;line-height:1.65}

.comparison{display:grid;grid-template-columns:1fr 70px 1fr;gap:20px;align-items:stretch}
.comparison-card{padding:42px;background:#fff;border:1px solid #dfe6eb;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.05)}
.comparison-card-featured{border-color:rgba(18,103,177,.4);background:#f5f9fd}
.comparison-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;margin-bottom:28px;border-radius:50%;border:1px solid #cbd7df;color:var(--dark);font-size:13px;font-weight:700}.mdisc-icon{border-color:rgba(18,103,177,.45);color:var(--blue)}
.comparison-card h3{margin:0 0 8px;color:var(--dark);font-size:30px}.comparison-subtitle{margin:0 0 30px;color:#687785;font-size:14px}
.comparison-card ul{margin:0;padding:0;list-style:none}.comparison-card li{position:relative;padding:13px 0 13px 20px;border-top:1px solid #e2e8ec;color:#43515d;font-size:15px}.comparison-card li:before{content:"—";position:absolute;left:0;color:var(--blue)}
.comparison-vs{display:flex;align-items:center;justify-content:center}.comparison-vs span{color:#87939d;font-size:11px;letter-spacing:.15em}

.example-flow{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr 45px 1fr;align-items:center;gap:10px}
.example-step{min-height:190px;padding:28px;background:#fff;border:1px solid #dfe6eb;border-radius:12px}.example-number{margin-bottom:40px;color:var(--blue);font-size:12px;font-weight:700}.example-step strong{display:block;margin-bottom:8px;color:var(--dark);font-size:18px}.example-step span{color:#687785;font-size:13px;line-height:1.5}.example-arrow{color:var(--blue);font-size:24px;text-align:center}

.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.choice-card{min-height:380px;display:flex;flex-direction:column;padding:38px;background:#fff;border:1px solid #dfe6eb;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.05)}
.choice-card-accent{border-color:rgba(18,103,177,.4);background:#f5f9fd}
.choice-number{margin-bottom:65px;color:var(--blue);font-size:12px;font-weight:700}.choice-card h3{margin:0 0 18px;color:var(--dark);font-size:26px}.choice-card p{margin:0;color:#687785;font-size:15px;line-height:1.7}
.choice-bottom{margin-top:auto;padding-top:25px;border-top:1px solid #e1e7eb}.choice-bottom strong{display:block;color:var(--dark);font-size:18px}.choice-bottom span{display:block;margin-top:5px;color:#687785;font-size:12px}

.archive-banner{padding:100px 0;background:linear-gradient(120deg,#061522,#15446c);border-top:1px solid rgba(255,255,255,.1)}
.archive-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}
.archive-banner h2{max-width:750px;margin:0 0 20px;color:#fff;font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-.035em;text-align:left}
.archive-banner p{margin:0;color:#d7e4ee;font-size:17px}

.footer{background:#030b12;color:#aaa;padding:38px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand p{margin:12px 0 0;color:#88939c;font-size:13px}.footer-links{display:flex;flex-wrap:wrap;gap:22px}.footer-links a{color:#b8c2ca;text-decoration:none;font-size:13px}.footer-links a:hover{color:#fff}.footer-copy{color:#68737d;font-size:12px}

@media(max-width:1000px){
  .knowledge-hero-inner,.knowledge-two-column,.bdxl-layout,.mdisc-intro{grid-template-columns:1fr}
  .knowledge-hero{min-height:auto;padding:140px 0 80px}.hero-disc-illustration{min-height:400px}
  .comparison{grid-template-columns:1fr}.comparison-vs{min-height:30px}.comparison-vs span{transform:rotate(90deg)}
  .example-flow{grid-template-columns:1fr}.example-arrow{transform:rotate(90deg);padding:8px}
  .choice-grid{grid-template-columns:1fr}.choice-card{min-height:auto}
  .archive-banner-inner{flex-direction:column;align-items:flex-start}.footer-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
  .knowledge-section{padding:75px 0}.knowledge-heading{margin-bottom:42px;gap:14px}.knowledge-heading h2{font-size:32px}.knowledge-heading p{font-size:16px}
  .knowledge-hero h1{font-size:47px}.knowledge-hero p{font-size:17px}.hero-disc-illustration{min-height:330px}
  .disc{width:270px;height:270px}.disc-back{transform:translate(-25px,-15px)}.disc-main{transform:translate(25px,20px)}
  .capacity-card{padding:28px}.capacity-item{grid-template-columns:55px 35px 1fr}.capacity-item span{font-size:27px}
  .mdisc-disc{width:270px;height:270px}.mdisc-principles{grid-template-columns:1fr}.comparison-card{padding:30px}.choice-card{padding:30px}
  .archive-banner{padding:75px 0}.archive-banner h2{font-size:36px}.header .header-button{display:none}.footer-links{flex-direction:column;gap:10px}
}
@media(max-width:400px){
  .knowledge-hero h1{font-size:40px}.knowledge-heading h2{font-size:29px}.disc{width:230px;height:230px}.mdisc-disc{width:230px;height:230px}
  .disc-text strong,.mdisc-label strong{font-size:18px}
}