:root {
  color-scheme: dark;
  --bg: #03101f;
  --panel: rgba(6, 25, 48, .92);
  --panel-2: rgba(8, 34, 64, .78);
  --line: rgba(93, 160, 255, .18);
  --line-strong: rgba(75, 154, 255, .36);
  --text: #f6f9ff;
  --muted: #9aaac0;
  --blue: #0b7cff;
  --cyan: #14b8ff;
  --green: #1ed17d;
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 20%, rgba(0, 123, 255, .17), transparent 28rem),
    radial-gradient(circle at 20% 0%, rgba(22, 184, 255, .12), transparent 24rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.site-shell {
  width: min(1220px, calc(100% - 40px));
  margin: 24px auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(0, 123, 255, .06) 1px, transparent 1px),
    linear-gradient(rgba(0, 123, 255, .04) 1px, transparent 1px),
    linear-gradient(135deg, #020b16 0%, #061a31 48%, #020b16 100%);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 74px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(1, 10, 22, .78);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  color: white; font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase;
  border: 4px solid var(--cyan); border-right-color: var(--blue); border-radius: 10px 10px 12px 4px;
  box-shadow: 0 0 22px rgba(20,184,255,.3), inset 0 0 0 4px rgba(3,16,31,.95);
}
.nav-links { display: flex; justify-content: center; gap: 28px; color: #cbd6e6; font-size: 14px; }
.nav-links a:hover { color: white; }
.menu-toggle { display: none; margin-left: auto; color: white; background: transparent; border: 0; font-size: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px; border: 0; border-radius: 8px;
  color: white; font-weight: 800; cursor: pointer;
}
.btn-primary { background: linear-gradient(180deg, #1688ff, #0667f0); box-shadow: 0 12px 28px rgba(0, 110, 255, .28); }
.hero { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 520px; padding: 42px 36px 18px; position: relative; }
.hero::after, .form-shell::after {
  content: ""; position: absolute; inset: 78px 0 auto auto; width: 58%; height: 390px; opacity: .42; pointer-events: none;
  background: radial-gradient(circle, rgba(25,140,255,.8) 1px, transparent 2px), linear-gradient(135deg, transparent 45%, rgba(0,119,255,.35) 46%, transparent 47%);
  background-size: 34px 34px, 100% 100%; mask-image: linear-gradient(90deg, transparent, black 30%, transparent 95%);
}
.eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid rgba(30,209,125,.35); border-radius: 999px; color: var(--green); background: rgba(30,209,125,.09); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.hero h1, .config-panel h1 { margin: 18px 0 18px; font-size: clamp(46px, 6vw, 68px); line-height: .95; letter-spacing: -2.2px; }
.hero h1 span, .config-panel h1 span { color: var(--blue); }
.hero p, .config-panel > p { max-width: 510px; color: #c4cfdd; font-size: 17px; line-height: 1.7; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-row span, .reassurance-list span {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(7, 28, 53, .76);
}
.trust-row small, .reassurance-list small { display: block; color: var(--muted); font-weight: 500; }
.hero-visual { position: relative; min-height: 430px; z-index: 1; }
.pc-case {
  position: absolute; right: 20px; top: 20px; width: min(520px, 100%); height: 360px;
  border: 6px solid #102845; border-radius: 20px 8px 18px 6px;
  background: linear-gradient(135deg, rgba(2,11,22,.98), rgba(9,33,61,.88)), linear-gradient(90deg, transparent 62%, rgba(0,128,255,.2));
  box-shadow: inset 0 0 0 2px rgba(75,154,255,.18), 0 0 60px rgba(0,116,255,.35);
}
.pc-case::before { content: ""; position: absolute; inset: 26px 150px 28px 26px; border: 2px solid rgba(0,126,255,.35); border-radius: 12px; background: linear-gradient(140deg, rgba(17,87,160,.35), transparent 45%); }
.fan { position: absolute; right: 34px; width: 82px; height: 82px; border-radius: 50%; border: 10px solid #065fc5; box-shadow: inset 0 0 22px #18b7ff, 0 0 25px #057cff; }
.fan::after { content:""; position: absolute; inset: 20px; border-radius: 50%; background: #17c5ff; box-shadow: 0 0 18px #17c5ff; }
.fan-a { top: 32px; } .fan-b { top: 138px; } .fan-c { top: 244px; }
.gpu { position: absolute; left: 68px; bottom: 88px; width: 240px; height: 36px; background: #071f3b; border: 2px solid rgba(20,184,255,.45); box-shadow: 0 0 18px rgba(20,184,255,.5); }
.ram { position: absolute; left: 250px; top: 90px; width: 18px; height: 170px; border-radius: 8px; background: linear-gradient(#0bf, #073b7a); box-shadow: 24px 0 #0a67c9, 48px 0 #0e9dff; }
.glow-line { position: absolute; left: 42px; right: 120px; bottom: 54px; height: 4px; background: #098cff; box-shadow: 0 0 22px #098cff; }
.plant { position: absolute; left: 18px; bottom: 22px; width: 58px; height: 88px; border-bottom: 38px solid #16312c; border-left: 14px solid transparent; border-right: 14px solid transparent; filter: drop-shadow(0 0 18px rgba(30,209,125,.35)); }
.mouse { position: absolute; right: 0; bottom: 18px; width: 86px; height: 38px; border: 2px solid rgba(20,184,255,.4); border-radius: 50%; background: #061a31; }
.usage-section, .builder-section { padding: 30px 36px; text-align: center; }
.usage-section h2, .builder-section h2 { margin: 0; font-size: 34px; letter-spacing: -.6px; }
.usage-section > p, .builder-section p { margin: 8px 0 26px; color: var(--muted); }
.usage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.usage-card, .part-card, fieldset, .card, .text-field {
  border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, rgba(10, 38, 72, .78), rgba(5, 21, 42, .82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.usage-card { min-height: 280px; padding: 12px; text-align: center; transition: transform .2s, border-color .2s; }
.usage-card:hover { transform: translateY(-4px); border-color: rgba(20,184,255,.75); }
.usage-visual { height: 120px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(16,126,255,.55), transparent 40%), linear-gradient(135deg, #0b1d35, #07111f); }
.usage-visual span { font-size: 48px; filter: drop-shadow(0 0 18px #008cff); }
.usage-card h3 { margin: 16px 0 8px; } .usage-card p { min-height: 54px; margin: 0 0 10px; color: #c4cfdd; font-size: 14px; line-height: 1.45; } .usage-card strong { color: white; }
.section-heading { display: flex; justify-content: center; align-items: start; position: relative; }
.link-button { position: absolute; right: 0; top: 12px; color: var(--cyan); background: transparent; border: 0; cursor: pointer; font-weight: 800; }
.parts-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.part-card { padding: 22px 12px; } .part-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; color: var(--cyan); font-size: 34px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(0, 119, 255, .08); }
.part-card h3 { margin: 14px 0 4px; } .part-card p { min-height: 36px; margin: 0 0 12px; color: #d7e0ee; }
.part-card button { width: 100%; min-height: 36px; color: #50a9ff; font-weight: 800; border: 0; border-radius: 6px; background: rgba(18, 80, 145, .48); cursor: pointer; }
.part-card button.is-selected { color: white; background: var(--blue); }
.estimate-bar { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.7fr; align-items: center; gap: 18px; padding: 22px 36px; border-top: 1px solid var(--line-strong); background: rgba(3, 14, 28, .88); }
.estimate-total small, .response-time { color: var(--muted); } .estimate-total strong { display: block; margin: 3px 0; font-size: 38px; } .estimate-total span { font-size: 14px; }
.footer-benefit { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; color: white; } .footer-benefit:first-letter { color: var(--cyan); } .footer-benefit small { color: var(--muted); }
.response-time { grid-column: 5; justify-self: center; margin-top: -8px; }
.form-shell { position: relative; }
.config-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(310px, .8fr); gap: 24px; padding: 34px 28px; }
.config-panel { position: relative; z-index: 1; } .config-panel h1 { max-width: 820px; font-size: clamp(36px, 4.6vw, 52px); }
.quote-form { display: grid; gap: 16px; margin-top: 26px; }
fieldset, .text-field { margin: 0; padding: 22px; text-align: left; }
legend, .text-field { font-weight: 800; } legend small { color: var(--muted); font-weight: 500; }
.choice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .icon-row { grid-template-columns: repeat(5, 1fr); }
.choice-row label { cursor: pointer; } .choice-row input { position: absolute; opacity: 0; }
.choice-row span { display: grid; place-items: center; min-height: 66px; gap: 6px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; color: #dbe7f6; background: rgba(3, 18, 35, .62); text-align: center; }
.choice-row b { display: block; color: var(--cyan); font-size: 26px; } .choice-row input:checked + span { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; margin-top: 14px; color: #d6e0ee; } input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }
.text-field { display: grid; gap: 12px; }
input { width: 100%; min-height: 46px; padding: 0 14px; color: white; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(2, 13, 26, .82); outline: none; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(20,184,255,.14); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .consent { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #d9e4f2; } .consent input { width: auto; min-height: auto; }
.submit-btn { width: 100%; min-height: 60px; flex-direction: column; } .submit-btn small { color: #b9d7ff; font-weight: 600; }
.process-panel { display: grid; gap: 18px; align-content: start; } .card { padding: 24px; } .card h2 { margin: 0 0 6px; } .card p { margin: 0 0 22px; color: var(--muted); }
.process-card ol { list-style: none; padding: 0; margin: 0; counter-reset: steps; } .process-card li { position: relative; min-height: 86px; padding-left: 48px; counter-increment: steps; }
.process-card li::before { content: counter(steps); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); font-weight: 900; }
.process-card li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 10px; width: 1px; background: var(--line-strong); } .process-card span { display: block; margin-top: 8px; color: var(--muted); line-height: 1.5; }
.reassurance-list { display: grid; gap: 12px; } .reassurance-list span { padding: 8px 0; border: 0; background: transparent; }
.contact-card a { display: block; margin-top: 14px; color: #4db0ff; font-weight: 800; }
.thank-you { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; text-align: center; background: var(--bg); }
.thank-you p { max-width: 620px; color: var(--muted); }
@media (max-width: 900px) {
  body { background: #020b16; }
  .site-shell { width: min(430px, 100%); min-height: 100vh; margin: 0 auto; border-radius: 0; }
  .topbar { grid-template-columns: auto auto; min-height: 84px; padding: 20px 22px; } .brand span:last-child { font-size: 15px; }
  .menu-toggle { display: block; } .nav-cta { display: none; } .nav-links { display: none; grid-column: 1 / -1; flex-direction: column; align-items: start; gap: 14px; padding: 16px 0 4px; } .nav-links.is-open { display: flex; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 34px 22px 18px; } .hero::after { width: 100%; height: 320px; inset: 170px 0 auto; }
  .hero h1 { font-size: 42px; } .hero p { font-size: 15px; }
  .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; } .trust-row span { padding: 10px 6px; font-size: 10px; text-align: center; display: block; } .trust-row small { font-size: 9px; }
  .hero-visual { order: 2; min-height: 190px; margin-top: 14px; } .pc-case { left: 50%; right: auto; top: 0; width: 255px; height: 170px; transform: translateX(-50%); border-width: 4px; } .pc-case::before { inset: 16px 76px 18px 18px; } .fan { right: 18px; width: 40px; height: 40px; border-width: 5px; } .fan::after { inset: 9px; } .fan-a { top: 18px; } .fan-b { top: 66px; } .fan-c { top: 114px; } .gpu { left: 34px; bottom: 42px; width: 116px; height: 20px; } .ram { left: 124px; top: 42px; width: 8px; height: 82px; box-shadow: 12px 0 #0a67c9, 24px 0 #0e9dff; } .glow-line { left: 24px; right: 62px; bottom: 24px; } .plant, .mouse { display: none; }
  .usage-section, .builder-section { padding: 20px 22px; text-align: left; } .usage-section h2, .builder-section h2 { font-size: 22px; }
  .usage-grid { grid-template-columns: 1fr; gap: 9px; } .usage-card { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; min-height: 76px; padding: 8px 12px; text-align: left; } .usage-visual { width: 62px; height: 58px; } .usage-visual span { font-size: 24px; } .usage-card h3, .usage-card p { margin: 0; } .usage-card p { min-height: 0; font-size: 12px; } .usage-card strong { grid-column: 2; color: white; font-size: 13px; } .usage-card::after { content: "›"; grid-column: 3; grid-row: 1 / span 3; font-size: 32px; color: #9fcaff; }
  .builder-section, .estimate-bar { display: none; }
  .config-layout { grid-template-columns: 1fr; padding: 24px 18px; } .config-panel h1 { font-size: 34px; } .choice-row, .icon-row, .checkbox-grid, .contact-grid { grid-template-columns: 1fr; } .process-panel { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) { .usage-grid { grid-template-columns: repeat(3, 1fr); } .parts-grid { grid-template-columns: repeat(3, 1fr); } .estimate-bar { grid-template-columns: 1fr 1fr; } .response-time { grid-column: auto; } }
/* Services & tarifs — mobile mockup */
.mobile-showcase-page { background: radial-gradient(circle at 50% 0%, rgba(20, 184, 255, .16), transparent 22rem), #f6fbff; }
.phone-shell {
  width: min(430px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  color: var(--text);
  background: linear-gradient(160deg, #020b16 0%, #061a31 58%, #03101f 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line-strong);
  overflow: hidden;
}
.phone-header {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 58px 24px 20px;
  background: linear-gradient(180deg, rgba(2, 11, 22, .98), rgba(2, 11, 22, .78));
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.phone-header::before {
  content: "9:41"; position: absolute; top: 16px; left: 50px; color: white; font-weight: 800; font-size: 14px;
}
.phone-header::after {
  content: "▴ ))) ▰"; position: absolute; top: 16px; right: 30px; color: white; font-size: 12px; letter-spacing: 2px;
}
.phone-header .brand-mark { width: 34px; height: 34px; font-size: 20px; border-width: 3px; }
.phone-header .brand span:last-child { font-size: 16px; }
.phone-header .menu-toggle { display: block; }
.phone-header .nav-links { display: none; grid-column: 1 / -1; flex-direction: column; gap: 12px; padding-top: 16px; }
.phone-header .nav-links.is-open { display: flex; }
.mobile-services { padding: 0 20px 22px; }
.mobile-hero { padding: 28px 0 18px; }
.mobile-hero h1 { margin: 14px 0 10px; font-size: 28px; line-height: 1.1; letter-spacing: -.8px; }
.mobile-hero p { margin: 0; color: #c4cfdd; line-height: 1.55; }
.mini-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.mini-trust-row span { min-height: 48px; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(7, 28, 53, .76); font-size: 10px; }
.mini-trust-row strong, .mini-trust-row small { display: block; } .mini-trust-row small { color: var(--muted); }
.mobile-services h2 { margin: 26px 0 12px; font-size: 20px; }
.service-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.small-service-card { min-height: 172px; padding: 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: linear-gradient(180deg, rgba(10,38,72,.82), rgba(5,21,42,.86)); color: white; }
.small-service-card.wide { min-height: 108px; }
.small-service-card strong, .small-service-card small { display: block; }
.small-service-card strong { margin: 10px 0 8px; font-size: 13px; line-height: 1.35; }
.small-service-card small { color: #c4cfdd; line-height: 1.35; }
.service-illu { display: block; height: 58px; border-radius: 8px; background: radial-gradient(circle, rgba(20,184,255,.65), transparent 35%), linear-gradient(135deg, #061a31, #0b2443); position: relative; }
.service-illu::after { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cyan); font-size: 30px; filter: drop-shadow(0 0 12px var(--blue)); }
.pc-mini::after { content: "▣"; } .component-mini::after { content: "◈"; } .repair-mini::after { content: "⌕"; } .software-mini::after { content: "▤"; } .data-mini::after { content: "◎"; }
.packages { margin-top: 14px; padding: 14px 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(7, 28, 53, .58); }
.packages-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.packages-head h2 { margin: 0 0 12px; }
.packages-head span { padding: 5px 8px; border-radius: 7px; background: #ff7a00; color: white; font-weight: 900; font-size: 11px; }
.packages-head small { color: white; font-weight: 600; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.price-card { padding: 12px 8px; min-height: 224px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(3, 18, 35, .72); }
.price-card.featured { background: linear-gradient(180deg, #147fff, #0756ce); transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0, 110, 255, .34); }
.price-card h3 { margin: 0 0 8px; text-align: center; font-size: 14px; } .price-card strong { display: block; text-align: center; font-size: 24px; }
.price-card strong small { display: block; color: #bde1ff; font-size: 9px; text-transform: uppercase; }
.price-card ul { padding: 0; margin: 18px 0 10px; list-style: none; } .price-card li { margin: 8px 0; color: #d8e4f3; font-size: 10px; } .price-card li::before { content: "✓ "; color: var(--green); }
.price-card > small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.diagnostic-card { margin-top: 16px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(135deg, rgba(10,38,72,.78), rgba(5,21,42,.84)); }
.diagnostic-card .target-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--cyan); font-size: 34px; border: 1px solid var(--line-strong); border-radius: 50%; }
.diagnostic-card h2 { margin: 16px 0 8px; line-height: 1.2; } .diagnostic-card p { color: #c4cfdd; } .diagnostic-card .btn { width: 100%; }
/* Shared service desktop mockups */
.service-page { width: min(1120px, calc(100% - 40px)); }
.service-desktop-layout { padding: 28px 36px 34px; }
.breadcrumb { margin-bottom: 34px; color: #8fa1b8; font-size: 13px; }
.service-hero { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; gap: 28px; align-items: center; min-height: 350px; }
.service-hero h1 { margin: 0 0 18px; font-size: clamp(46px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -1.7px; }
.service-hero p { max-width: 410px; color: #c4cfdd; font-size: 19px; line-height: 1.5; }
.check-list { padding: 0; margin: 22px 0 0; list-style: none; color: #d8e4f3; }
.check-list li { margin: 13px 0; line-height: 1.4; } .check-list li::before { content: "✓"; margin-right: 10px; color: var(--green); font-weight: 900; }
.data-visual { position: relative; min-height: 320px; background: radial-gradient(circle at 48% 50%, rgba(20,184,255,.32), transparent 48%); }
.hard-drive { position: absolute; left: 70px; top: 108px; width: 230px; height: 130px; transform: rotate(-15deg); border: 3px solid rgba(20,184,255,.5); border-radius: 22px; background: linear-gradient(135deg, #0a1b31, #102f55); box-shadow: 0 0 48px rgba(0,126,255,.5); }
.hard-drive::before { content: ""; position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; transform: translate(-50%, -50%); border-radius: 50%; border: 16px solid #5fb8ff; background: #08172a; box-shadow: inset 0 0 22px #0b7cff; }
.shield-visual, .security-visual { display: grid; place-items: center; color: white; border: 2px solid rgba(20,184,255,.6); background: rgba(0,119,255,.16); clip-path: polygon(50% 0, 90% 16%, 82% 74%, 50% 100%, 18% 74%, 10% 16%); }
.shield-visual { position: absolute; right: 110px; top: 60px; width: 150px; height: 180px; font-size: 48px; box-shadow: 0 0 50px rgba(0,126,255,.45); }
.data-visual i { position: absolute; width: 34px; height: 34px; border: 1px solid rgba(20,184,255,.6); border-radius: 9px; background: rgba(0,119,255,.22); box-shadow: 0 0 18px rgba(20,184,255,.5); }
.data-visual i:nth-child(3){left:20%;top:20%;}.data-visual i:nth-child(4){right:18%;top:18%;}.data-visual i:nth-child(5){left:48%;bottom:10%;}.data-visual i:nth-child(6){right:10%;bottom:30%;}
.security-panel, .cta-ribbon, .stats-strip, .offer-row > article, .approach-grid article, .step-grid article, .case-grid article, .audience-row span {
  border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, rgba(10,38,72,.74), rgba(5,21,42,.8));
}
.security-panel { display: grid; grid-template-columns: 1fr 170px; gap: 18px; align-items: center; padding: 24px; margin: 12px 0 28px; }
.security-panel h2, .cta-ribbon h2 { margin: 0 0 8px; } .security-panel p, .cta-ribbon p { margin: 0; color: #c4cfdd; }
.security-visual { width: 150px; height: 160px; font-size: 50px; justify-self: center; }
.security-badges { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.security-badges span { padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(3,18,35,.56); color: #dbe7f6; font-weight: 800; } .security-badges small { color: var(--muted); font-weight: 500; }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 12px 0 26px; } .step-grid article { min-height: 150px; padding: 20px; } .step-grid b { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); } .step-grid h3 { margin: 18px 0 8px; } .step-grid p { color: #c4cfdd; line-height: 1.45; }
.case-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 12px 0 26px; } .case-grid article { display: grid; place-items: center; min-height: 116px; padding: 12px; text-align: center; color: var(--cyan); font-size: 30px; } .case-grid span { margin-top: 8px; color: white; font-size: 13px; line-height: 1.25; }
.cta-ribbon { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 24px; margin: 18px 0 26px; } .cta-ribbon > span { color: var(--cyan); font-size: 44px; }
.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 18px 20px; } .stats-strip span { display: flex; align-items: center; gap: 8px; color: var(--cyan); } .stats-strip strong, .stats-strip small { display: block; color: white; } .stats-strip small { color: var(--muted); }
.build-hero { grid-template-columns: .78fr 1.22fr; min-height: 370px; } .service-pc-visual { min-height: 330px; } .service-pc-visual .pc-case { top: 0; right: 0; width: 510px; height: 330px; }
.offer-row { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin: 10px 0 34px; } .price-offer { padding: 28px; } .price-offer > strong { display: block; margin: 6px 0 8px; font-size: 58px; } .price-offer p { color: #c4cfdd; line-height: 1.55; } .price-offer .btn { width: 100%; margin: 12px 0; }
.included-panel { padding: 28px; } .included-panel h2 { margin: 0 0 12px; } .included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.center-title { text-align: center; } .approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0 26px; } .approach-grid article { min-height: 178px; padding: 22px; color: var(--cyan); font-size: 36px; } .approach-grid h3 { margin: 14px 0 8px; color: white; font-size: 18px; } .approach-grid p { color: #c4cfdd; font-size: 14px; line-height: 1.45; }
.audience-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 26px; } .audience-row span { padding: 14px; color: #dbe7f6; text-align: center; }
@media (max-width: 900px) {
  .service-page { width: min(430px, 100%); margin: 0 auto; border-radius: 0; }
  .service-desktop-layout { padding: 22px 18px; }
  .service-hero, .build-hero, .offer-row, .security-panel, .cta-ribbon { grid-template-columns: 1fr; }
  .service-hero h1 { font-size: 38px; }
  .data-visual, .service-pc-visual { min-height: 230px; }
  .hard-drive { left: 35px; top: 82px; width: 180px; height: 98px; } .shield-visual { right: 28px; top: 40px; width: 110px; height: 132px; }
  .security-badges, .step-grid, .case-grid, .approach-grid, .audience-row, .stats-strip, .included-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .service-pc-visual .pc-case { left: 50%; right: auto; width: 255px; height: 170px; transform: translateX(-50%); }
  .price-offer > strong { font-size: 48px; }
}
.mobile-config-cta { display: none; }
@media (max-width: 900px) {
  .mobile-config-cta {
    display: flex;
    width: calc(100% - 44px);
    margin: 24px 22px 26px;
    min-height: 58px;
    border-radius: 8px;
    font-size: 15px;
  }
}