:root {
      --bg: #050606;
      --bg-soft: #0a0c0d;
      --panel: rgba(12, 14, 15, 0.86);
      --panel-2: rgba(18, 20, 22, 0.72);
      --line: rgba(255, 52, 52, 0.18);
      --line-strong: rgba(255, 52, 52, 0.55);
      --red: #ff2d2d;
      --red-2: #c90f18;
      --text: #f4f5f6;
      --muted: #9aa0a6;
      --green: #39e785;
      --max: 1320px;
      --radius: 18px;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--text);
      font-family: "Segoe UI", Arial, sans-serif;
      background:
        radial-gradient(circle at 50% 0%, rgba(145, 0, 0, 0.17), transparent 32%),
        linear-gradient(rgba(255, 45, 45, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 45, 45, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, #080909 0%, #030404 60%, #070505 100%);
      background-size: auto, 34px 34px, 34px 34px, auto;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 30;
      background: linear-gradient(to bottom, transparent 0%, rgba(255, 40, 40, 0.018) 50%, transparent 100%);
      background-size: 100% 260px;
      animation: scan 11s linear infinite;
      opacity: .42;
    }

    @keyframes scan {
      from { background-position: 0 -260px; }
      to { background-position: 0 100vh; }
    }

    img { max-width: 100%; }
    a { color: inherit; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid var(--line);
      background: rgba(4, 5, 5, 0.86);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .nav {
      width: min(var(--max), calc(100% - 32px));
      min-height: 78px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex: 0 0 auto;
    }

    .brand-logo {
      display: block;
      width: clamp(220px, 22vw, 310px);
      height: 62px;
      object-fit: contain;
      object-position: left center;
      filter: drop-shadow(0 0 10px rgba(255, 0, 0, .20));
      transition: filter .2s ease;
    }


    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    .nav-links a {
      padding: 10px 13px;
      border-radius: 8px;
      text-decoration: none;
      color: #cdd1d4;
      font-size: 12px;
      letter-spacing: .8px;
      text-transform: uppercase;
      transition: .2s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: #fff;
      background: rgba(255, 45, 45, .10);
      outline: 1px solid rgba(255, 45, 45, .22);
    }

    .nav-links .nav-contact {
      border: 1px solid rgba(255, 45, 45, .52);
      color: #fff;
    }

    .section,
    .hero {
      scroll-margin-top: 92px;
    }

    .wrap {
      width: min(var(--max), calc(100% - 32px));
      margin: 0 auto;
    }

    .hero {
      min-height: 0;
      display: block;
      padding: 54px 0 58px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
      gap: 44px;
      align-items: center;
    }

    .hero-copy {
      text-align: left;
      max-width: 790px;
    }

    .eyebrow {
      margin-bottom: 14px;
      color: var(--red);
      font-family: Consolas, monospace;
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      max-width: 820px;
      font-size: clamp(42px, 5.2vw, 70px);
      line-height: .98;
      letter-spacing: -2px;
      text-transform: uppercase;
    }

    h1 .red { color: var(--red); }

    .hero-lead {
      max-width: 760px;
      margin: 22px 0 0;
      color: #c7ccd0;
      font-size: clamp(16px, 1.7vw, 19px);
      line-height: 1.65;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 9px;
      margin-top: 24px;
    }

    .tag {
      border: 1px solid rgba(255, 55, 55, .22);
      border-radius: 999px;
      background: rgba(255, 45, 45, .055);
      padding: 8px 12px;
      color: #d8dcdf;
      font-size: 12px;
      letter-spacing: .5px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 28px;
    }


    .hero-side {
      display: grid;
      gap: 12px;
    }

    .hero-mini {
      min-height: 92px;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 34%),
        rgba(10, 12, 13, .78);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .30);
    }

    .hero-mini-label {
      margin-bottom: 7px;
      color: var(--red);
      font-family: Consolas, monospace;
      font-size: 9px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }

    .hero-mini strong {
      display: block;
      font-size: 16px;
      margin-bottom: 4px;
    }

    .hero-mini span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .btn {
      min-height: 46px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 55, 55, .45);
      background: rgba(255, 45, 45, .06);
      color: #fff;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      font-size: 12px;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      background: rgba(255, 45, 45, .13);
      box-shadow: 0 0 28px rgba(255, 0, 0, .12);
    }

    .btn-primary {
      background: linear-gradient(180deg, rgba(255, 55, 55, .34), rgba(135, 0, 8, .32));
      border-color: #ff3b3b;
      box-shadow: 0 0 28px rgba(255, 0, 0, .15);
    }

    .section {
      padding: 72px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
      align-items: end;
      gap: 40px;
      margin-bottom: 28px;
    }

    .section-kicker {
      color: var(--red);
      font-family: Consolas, monospace;
      font-size: 10px;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .section h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: -.8px;
      text-transform: uppercase;
    }

    .section-desc {
      max-width: 560px;
      color: var(--muted);
      line-height: 1.65;
      font-size: 14px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .card,
    .panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 30%),
        linear-gradient(180deg, rgba(15, 17, 18, .93), rgba(6, 7, 8, .88));
      box-shadow: var(--shadow);
    }

    .card::after,
    .panel::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 55, 55, .56), transparent);
    }

    .service-card {
      padding: 24px;
      min-height: 206px;
    }

    .service-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border: 1px solid rgba(255, 55, 55, .38);
      border-radius: 12px;
      background: rgba(255, 45, 45, .055);
      color: var(--red);
      font-size: 21px;
      box-shadow: inset 0 0 20px rgba(255, 0, 0, .04);
    }

    .service-card h3 {
      margin: 0 0 10px;
      font-size: 17px;
      letter-spacing: .2px;
    }

    .service-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.58;
      font-size: 13px;
    }

    .price-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(310px, .6fr);
      gap: 18px;
    }

    .price-table {
      padding: 8px 24px;
    }

    .price-row {
      min-height: 62px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, .055);
    }

    .price-row:last-child { border-bottom: 0; }
    .price-name { color: #e5e8ea; font-size: 14px; }
    .price-value { color: var(--red); font-weight: 800; font-size: 13px; white-space: nowrap; }

    .price-note {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-self: start;
      gap: 14px;
    }

    .price-note strong {
      color: #fff;
      font-size: 20px;
      line-height: 1.25;
    }

    .price-note p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      font-size: 13px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .contact-card {
      padding: 26px;
    }

    .contact-label {
      color: var(--red);
      font-family: Consolas, monospace;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .contact-card strong {
      display: block;
      margin-bottom: 7px;
      font-size: 18px;
    }

    .contact-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      font-size: 13px;
    }

    footer {
      padding: 32px 0 42px;
      border-top: 1px solid rgba(255, 55, 55, .10);
      color: #797f84;
      font-size: 11px;
      letter-spacing: 1px;
      text-align: center;
    }


    /* Wizualizacje systemów Android: w całości osadzone w HTML/CSS */
    .rom-showcase { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px; }
    .rom-panel { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:28px 24px 0;min-height:340px; }
    .rom-info { align-self:center;max-width:250px;padding-bottom:26px;position:relative;z-index:1; }
    .rom-overline {color:var(--red);font:10px Consolas,monospace;letter-spacing:1.5px;}
    .rom-info h3 {font-size:27px;margin:12px 0;letter-spacing:-.5px;}
    .rom-info p {font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:19px;}
    .rom-info a {font-size:12px;text-decoration:none;color:#fff;border-bottom:1px solid var(--red);padding-bottom:5px;}
    .phone { flex:0 0 160px;width:160px;height:305px;border:5px solid #303338;border-bottom:0;border-radius:29px 29px 0 0;padding:5px 5px 0;box-shadow:0 0 0 1px #6a6e75,0 10px 50px #000;overflow:hidden;align-self:end; }
    .phone-inner {height:100%;position:relative;border-radius:19px 19px 0 0;overflow:hidden;padding:11px 10px;background:radial-gradient(circle at 45% 27%,#253442,transparent 55%),linear-gradient(165deg,#11171c,#060809);}
    .phone-lineage .phone-inner {background:radial-gradient(ellipse at 70% 30%,#165763,transparent 55%),linear-gradient(160deg,#12272e,#061318);}
    .phone-status {display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:#fafafa;}
    .phone-clock {margin-top:58px;text-align:center;font-size:32px;font-weight:300;letter-spacing:-1px;}
    .phone-date {text-align:center;font-size:9px;color:#ccd1d5;margin-top:4px;}
    .phone-icons {display:flex;gap:7px;justify-content:center;position:absolute;bottom:50px;left:6px;right:6px;}
    .phone-icons span {width:27px;height:27px;border-radius:10px;background:#303c43;display:grid;place-items:center;color:#edf7fa;font-size:15px;}
    .phone-lineage .phone-icons span {background:#247381;}
    .phone-search {position:absolute;bottom:17px;left:12px;right:12px;border-radius:16px;background:#343d43;padding:6px 9px;font-size:8px;color:#ddd;}
    .phone-line {position:absolute;bottom:5px;width:44px;height:3px;background:#ddd;border-radius:10px;left:calc(50% - 22px);}
    .lineage-mark {text-align:center;position:absolute;top:35px;left:0;right:0;color:#70d5df;font-size:38px;opacity:.45;}
    .rom-disclaimer {font-size:11px;color:var(--muted);margin:10px 0 0;}
    @media(max-width:900px) { .rom-showcase {grid-template-columns:1fr;} .rom-panel {min-height:310px;} .rom-info {max-width:55%;} }
    @media(max-width:420px) {.rom-panel{padding:18px 12px 0;gap:8px;} .rom-info{max-width:54%;} .rom-info h3{font-size:21px;} .rom-info p{font-size:12px;} .phone{flex-basis:132px;width:132px;height:270px;} .phone-clock{margin-top:45px;} }

    /* Dodatkowe usługi Android — dopasowane do wizualnego stylu RedCell */
    .android-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .android-card { padding: 26px; min-height: 230px; }
    .android-card h3 { margin: 0 0 12px; font-size: 18px; }
    .android-card p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
    .android-note {
      margin-top: 18px;
      padding: 22px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 18px;
    }
    .android-note p { margin: 0; max-width: 850px; color: var(--muted); font-size: 13px; line-height: 1.7; }
    .android-note strong { color: var(--text); }

    @media (max-width: 1050px) {
      .hero-grid { grid-template-columns: 1fr; gap: 28px; }
      .hero-copy { max-width: 860px; }
      .hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .android-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .nav { min-height: 70px; }
      .brand-logo { width: 210px; height: 54px; }
      .nav-links { gap: 2px; }
      .nav-links a { padding: 8px 9px; font-size: 10px; }
      .hero { padding: 38px 0 46px; }
      .hero-side { grid-template-columns: 1fr; }
      .section { padding: 58px 0; }
      .section-head { grid-template-columns: 1fr; gap: 12px; }
      .section-desc { margin-top: 0; }
      .price-layout { grid-template-columns: 1fr; }
      .android-grid { grid-template-columns: 1fr; }
      .android-card { min-height: auto; }

      /* Mobilny układ sekcji kontaktowej */
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .contact-card {
        width: 100%;
        padding: 24px;
      }

      .contact-card strong,
      .contact-card p,
      .contact-card a {
        word-break: normal;
        overflow-wrap: anywhere;
      }
    }

    @media (max-width: 560px) {
      .wrap, .nav { width: min(100% - 20px, var(--max)); }
      .site-header { position: static; }
      .nav { padding: 10px 0; align-items: center; flex-direction: column; gap: 8px; }
      .brand-logo { width: min(330px, 88vw); height: 58px; }
      .nav-links { justify-content: center; }
      .nav-links a:nth-child(1) { display: none; }
      h1 { font-size: 39px; letter-spacing: -1px; }
      .cards { grid-template-columns: 1fr; }
      .price-row { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
      .service-card { min-height: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
      }
    }

    /* Formularz kontaktowy RedCell */
    .inquiry-panel { margin: 26px 0 0; padding: clamp(24px, 4vw, 42px); width: 100%; max-width: none; }
    .inquiry-heading { margin: 0 0 9px; font-size: clamp(22px, 3vw, 30px); text-transform: uppercase; }
    .inquiry-intro { margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .inquiry-form { display: grid; gap: 20px; }
    .inquiry-fields { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
    .inquiry-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
    .inquiry-field label { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: #e5e8ea; }
    .inquiry-field input, .inquiry-field select, .inquiry-field textarea {
      width:100%; min-width:0; border:1px solid rgba(255,255,255,.16); border-radius:9px;
      background:#0c0e10; color:var(--text); padding:13px 15px; font:inherit; font-size:14px;
      transition: border-color .2s, box-shadow .2s;
    }
    .inquiry-field select { color-scheme: dark; }
    .inquiry-field textarea { resize:vertical; min-height:140px; }
    .inquiry-field input:focus, .inquiry-field select:focus, .inquiry-field textarea:focus {
      outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,45,45,.13);
    }
    .inquiry-privacy { color:var(--muted); font-size:12px; line-height:1.65; margin:0; }
    .inquiry-consent { display:flex; gap:11px; align-items:flex-start; font-size:13px; line-height:1.6; color:#d9dddf; }
    .inquiry-consent input { width:17px; height:17px; flex:0 0 17px; margin-top:2px; accent-color:var(--red); }
    .inquiry-form .btn { justify-self:start; cursor:pointer; font-family:inherit; padding-inline:26px; }
    .inquiry-message { display:none; padding:14px 18px; border-radius:9px; font-size:14px; line-height:1.6; margin-bottom:20px; }
    .inquiry-message.visible { display:block; }
    .inquiry-message.ok { border:1px solid rgba(57,231,133,.4); background:rgba(57,231,133,.08); color:#b5f6cf; }
    .inquiry-message.error { border:1px solid rgba(255,75,75,.45); background:rgba(255,45,45,.07); color:#ffc2c2; }
    .inquiry-trap { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
    .inquiry-form .inquiry-field textarea { min-height: 170px; line-height: 1.6; }
    @media(max-width:640px) { .inquiry-fields { grid-template-columns:1fr; } .inquiry-form .btn { width:100%; } .inquiry-panel { padding:22px 18px; } }