:root {
      --ink: #f6f8fc;
      --muted: #aab8c9;
      --muted-strong: #d3deeb;
      --night: #07111f;
      --night-2: #0b1829;
      --panel: #102237;
      --line: #27415c;
      --blue: #38a6ff;
      --blue-deep: #0878d1;
      --orange: #ff9d3d;
      --orange-soft: #ffc078;
      --shadow: 0 24px 70px rgba(0, 0, 0, .32);
      --radius: 18px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--night);
      color: var(--ink);
      font-family: "Trebuchet MS", "Segoe UI", sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        linear-gradient(rgba(56,166,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,166,255,.035) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, black, transparent 82%);
    }
    body::after {
      content: "";
      position: fixed;
      width: 42rem;
      height: 42rem;
      right: -18rem;
      top: 4rem;
      z-index: -1;
      border-radius: 50%;
      background: rgba(8,120,209,.18);
      filter: blur(90px);
      pointer-events: none;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    :focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 4px; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 15px max(22px, calc((100% - 1180px) / 2));
      background: rgba(7, 17, 31, .88);
      border-bottom: 1px solid rgba(117, 166, 211, .2);
      backdrop-filter: blur(16px);
    }
    body.admin-bar .topbar { top: 32px; }
    @media (max-width: 782px) { body.admin-bar .topbar { top: 46px; } }
    .brand { display: inline-flex; align-items: baseline; gap: 7px; letter-spacing: .04em; font-size: 1.12rem; }
    .brand strong { color: var(--ink); }
    .brand span { color: var(--orange); font-weight: 800; }
    .brand small { display: block; position: absolute; margin-top: 25px; color: var(--muted); font-size: .52rem; letter-spacing: .18em; white-space: nowrap; }
    .topbar nav { display: flex; align-items: center; gap: 25px; color: var(--muted-strong); font-size: .88rem; }
    .topbar nav ul { display: flex; align-items: center; gap: 25px; margin: 0; padding: 0; list-style: none; }
    .topbar nav a { transition: color .2s ease; }
    .topbar nav a:hover { color: var(--orange-soft); }
    .menu { display: none; color: var(--ink); background: transparent; border: 0; font-size: 1.65rem; cursor: pointer; }

    .hero, .section { width: min(1180px, 100%); margin: 0 auto; padding-left: 22px; padding-right: 22px; }
    .hero { min-height: 720px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; padding-top: 82px; padding-bottom: 82px; }
    .eyebrow { margin-bottom: 13px; color: var(--orange); font-size: .72rem; font-weight: 900; letter-spacing: .2em; }
    .hero h1 { max-width: 700px; font-family: Georgia, serif; font-size: clamp(3.35rem, 7vw, 6.35rem); line-height: .98; letter-spacing: -.055em; }
    .hero h1 em { color: var(--blue); font-style: normal; }
    .lead { max-width: 650px; margin-top: 26px; color: var(--muted); font-size: 1.12rem; }
    .actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 19px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-weight: 800; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
    .btn:hover { transform: translateY(-2px); }
    .primary { background: var(--blue-deep); border-color: var(--blue); box-shadow: 0 8px 25px rgba(8,120,209,.22); }
    .primary:hover { background: #0b91ee; }
    .ghost { background: rgba(16,34,55,.54); }
    .ghost:hover { border-color: var(--orange); color: var(--orange-soft); }

    .hero-card { min-height: 400px; display: grid; place-items: center; position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(16,34,55,.95), rgba(7,17,31,.92)); box-shadow: var(--shadow); }
    .hero-card::before, .hero-card::after { content: ""; position: absolute; border: 1px solid rgba(255,157,61,.45); transform: rotate(45deg); }
    .hero-card::before { width: 260px; height: 260px; top: -145px; left: -110px; }
    .hero-card::after { width: 180px; height: 180px; right: -90px; bottom: -95px; border-color: rgba(56,166,255,.4); }
    .fake-pc { width: 190px; height: 270px; position: relative; border: 5px solid #1d354c; border-radius: 16px; background: linear-gradient(145deg, #102840, #040a12); box-shadow: 0 0 0 1px #426887, 0 0 60px rgba(56,166,255,.3); }
    .rgb { position: absolute; inset: 12px; border-radius: 8px; box-shadow: inset 0 0 26px rgba(56,166,255,.62); }
    .fan { position: absolute; width: 52px; height: 52px; border: 3px solid var(--blue); border-radius: 50%; background: repeating-conic-gradient(from 30deg, rgba(56,166,255,.18) 0deg 20deg, transparent 20deg 45deg); box-shadow: 0 0 14px rgba(56,166,255,.45); }
    .f1 { top: 26px; right: 24px; } .f2 { top: 99px; right: 24px; } .f3 { top: 172px; right: 24px; }
    .hero-card p { position: absolute; bottom: 47px; color: var(--orange); font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
    .hero-card strong { position: absolute; bottom: 22px; color: var(--muted-strong); font-size: .95rem; }

    .section { padding-top: 104px; padding-bottom: 104px; }
    .dark { width: 100%; max-width: none; border-top: 1px solid rgba(117,166,211,.16); border-bottom: 1px solid rgba(117,166,211,.16); background: rgba(11,24,41,.72); }
    .dark > * { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }
    .section-head { margin-bottom: 46px; text-align: center; }
    .section-head h2 { margin-bottom: 11px; font-family: Georgia, serif; font-size: clamp(2.1rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; }
    .section-head > p:last-child { max-width: 690px; margin: auto; color: var(--muted); }

    .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .card, .build, .config-box, .result, .form { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16,34,55,.72); }
    .card { overflow: hidden; padding-bottom: 24px; transition: transform .2s ease, border-color .2s ease; }
    .card:hover { transform: translateY(-5px); border-color: rgba(56,166,255,.75); }
    .card > *:not(.photo) { margin-left: 24px; margin-right: 24px; }
    .photo { display: grid; height: 145px; place-items: center; background: linear-gradient(135deg, #143a5f, #0a1727 65%); color: var(--orange-soft); font-size: .75rem; font-weight: 900; letter-spacing: .2em; }
    .card h3 { margin-top: 20px; font-size: 1.25rem; }
    .card p { min-height: 68px; margin-top: 8px; margin-bottom: 16px; color: var(--muted); font-size: .88rem; }
    .card a { color: var(--blue); font-size: .88rem; font-weight: 900; }
    .card a:hover { color: var(--orange-soft); }

    .config { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .config-box, .result, .form { padding: 26px; }
    .config-box { display: grid; gap: 17px; }
    label { color: var(--muted-strong); font-size: .9rem; font-weight: 800; }
    select, input, textarea { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid #34516d; border-radius: 8px; background: #081525; color: var(--ink); }
    input[type="range"] { padding: 0; accent-color: var(--orange); }
    output { display: block; margin-top: 7px; color: var(--orange-soft); font-size: 1.04rem; font-weight: 900; }
    .result { display: flex; flex-direction: column; justify-content: center; min-height: 330px; }
    .result h3 { margin-bottom: 9px; font-family: Georgia, serif; font-size: 1.8rem; }
    .result p:not(.eyebrow) { color: var(--muted); }
    .result strong { color: var(--muted-strong); }

    .builds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .build { padding: 26px; }
    .build span { color: var(--orange); font-size: .7rem; font-weight: 900; letter-spacing: .16em; }
    .build h3 { margin: 8px 0 18px; font-family: Georgia, serif; font-size: 1.8rem; }
    .build ul, .checks { list-style: none; color: var(--muted); margin-bottom: 25px; }
    .build li { padding: 8px 0; border-bottom: 1px solid rgba(117,166,211,.16); }
    .featured { border-color: var(--blue); box-shadow: 0 0 40px rgba(8,120,209,.17); }

    .about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
    .about h2 { margin-bottom: 15px; font-family: Georgia, serif; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.05; }
    .about > div > p:not(.eyebrow) { color: var(--muted); }
    .checks { margin-top: 25px; }
    .checks li { margin: 10px 0; }
    .checks li::before { content: "✓"; margin-right: 10px; color: var(--orange); font-weight: 900; }
    .atelier-placeholder { height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #4b6b88; border-radius: 22px; background: linear-gradient(135deg, rgba(20,58,95,.55), rgba(8,21,37,.72)); color: var(--blue); font-size: .78rem; font-weight: 900; letter-spacing: .18em; text-align: center; }
    .atelier-placeholder small { margin-top: 9px; color: var(--muted); font-size: .77rem; font-weight: 400; letter-spacing: 0; }

    .form { max-width: 900px; margin-left: auto; margin-right: auto; }
    .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
    .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form label { display: block; margin-bottom: 15px; }
    textarea { min-height: 150px; resize: vertical; }
    .formmsg { margin-top: 13px; color: var(--orange-soft); }
    footer { padding: 36px 20px; border-top: 1px solid rgba(117,166,211,.16); background: #040b14; color: var(--muted); text-align: center; }
    footer strong { color: var(--ink); } footer span { color: var(--orange); } footer p { margin-top: 8px; font-size: .78rem; }
    .social-links { display: flex; justify-content: center; gap: 18px; margin-top: 12px; font-size: .84rem; }
    .standard-page { min-height: 58vh; }

    @media (max-width: 900px) {
      .hero, .config, .about { grid-template-columns: 1fr; }
      .hero { min-height: auto; gap: 45px; padding-top: 75px; }
      .hero-card { min-height: 360px; }
      .grid4 { grid-template-columns: repeat(2, 1fr); }
      .builds { grid-template-columns: 1fr; }
      .topbar nav { display: none; }
      .menu { display: block; }
      .topbar.nav-open { align-items: flex-start; flex-wrap: wrap; }
      .topbar.nav-open nav { display: flex; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; padding-top: 12px; }
      .topbar.nav-open nav ul { display: flex; width: 100%; flex-direction: column; gap: 0; }
      .topbar.nav-open nav li { width: 100%; }
      .topbar.nav-open nav a { padding: 12px 0; border-top: 1px solid rgba(117,166,211,.18); }
    }
    @media (max-width: 600px) {
      .hero, .section { padding-left: 18px; padding-right: 18px; }
      .hero { padding-top: 62px; padding-bottom: 74px; }
      .hero h1 { font-size: 3.35rem; }
      .hero-card { min-height: 335px; }
      .grid4, .two { grid-template-columns: 1fr; }
      .section { padding-top: 76px; padding-bottom: 76px; }
      .section-head h2 { font-size: 2.25rem; }
      .brand { font-size: 1rem; }
      .brand small { font-size: .46rem; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
  
    .brand { align-items: center; gap: 8px; }
    .brand strong { letter-spacing: .02em; }
    .brand span { color: var(--muted-strong); font-size: .78em; }
    .brand small { position: static; margin: 0 0 0 4px; padding-left: 12px; border-left: 1px solid var(--line); font-size: .48rem; letter-spacing: .13em; }
    .hero h1 { font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-weight: 800; }
    .section-head h2, .about h2, .result h3, .build h3 { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
    .service-grid { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin: auto; }
    .photo { min-height: 160px; font-size: .85rem; background: radial-gradient(circle at 50% 50%, rgba(56,166,255,.24), transparent 52%), linear-gradient(135deg,#143a5f,#0a1727 65%); }
    .build li { min-height: 48px; }
    .form a, footer a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 900px) { .service-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } .brand small { display:none; } }