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

    :root {
      --bg:         #0D1117;
      --bg-card:    #161B22;
      --bg-hover:   #1C2128;
      --border:     #30363D;
      --text:       #E6EDF3;
      --text-muted: #8B949E;
      --accent:     #58A6FF;
      --green:      #3FB950;
      --yellow:     #D29922;
      --red:        #F85149;
      --font:       'JetBrains Mono', 'Courier New', monospace;
      --wide:       1200px;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 19px;
      line-height: 1.6;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── CANVAS ── */
    #bg-canvas {
      position: fixed; top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0; pointer-events: none;
    }

    header, main, footer { position: relative; z-index: 1; }

    /* ── LAYOUT ── */
    .container { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }

    /* ── HEADER ── */
    header {
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
      position: sticky; top: 0;
      background: rgba(13,17,23,0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 100;
    }

    .header-inner {
      display: flex; align-items: center;
      justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    .header-left  { display: flex; align-items: center; gap: 14px; }
    .header-right { display: flex; align-items: center; gap: 10px; }

    .logo { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; }
    .logo span { color: var(--accent); }

    /* ── NAV ── */
    .main-nav { display: flex; align-items: center; gap: 4px; }
    .nav-btn {
      background: none; border: 1px solid transparent; cursor: pointer;
      font-family: var(--font); font-size: 16px; color: var(--text-muted);
      padding: 6px 12px; border-radius: 6px; letter-spacing: .02em;
      transition: color .2s, background .2s, border-color .2s;
    }
    .nav-btn:hover  { color: var(--text); background: var(--bg-hover); }
    .nav-btn.active { color: var(--accent); background: rgba(88,166,255,.08); border-color: rgba(88,166,255,.22); }
    @media (max-width: 720px){ .main-nav { order: 3; width: 100%; justify-content: center; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; } }

    .header-email {
      font-size: 16px; color: var(--text-muted);
      text-decoration: none; border: 1px solid var(--border);
      border-radius: 4px; padding: 3px 10px;
      transition: color .2s, border-color .2s;
    }
    .header-email:hover { color: var(--accent); border-color: var(--accent); }

    /* ── LANG FLAGS ── */
    .lang-switcher { display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .lang-switcher-label {
      font-size: 10px; color: var(--text-muted); letter-spacing: .07em;
      text-transform: uppercase; white-space: nowrap; min-width: 160px;
      text-align: center; min-height: 13px; transition: opacity .25s;
    }
    .lang-flags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
    .lang-btn {
      background: none; border: 2px solid transparent; border-radius: 5px;
      padding: 3px; cursor: pointer; line-height: 0;
      transition: border-color .2s, background .2s, transform .15s;
      display: flex; align-items: center;
    }
    .lang-btn:hover  { background: var(--bg-card); border-color: var(--border); transform: scale(1.15); }
    .lang-btn.active { background: var(--bg-card); border-color: var(--accent); }
    .lang-btn .flag  { width: 30px; height: 21px; display: block; border-radius: 2px; }

    /* ── STATUS PILL ── */
    .status-pill {
      display: flex; align-items: center; gap: 7px;
      font-size: 16px; color: var(--green);
      background: rgba(63,185,80,.08);
      border: 1px solid rgba(63,185,80,.25);
      border-radius: 20px; padding: 4px 12px; white-space: nowrap;
    }
    .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

    /* ── SECTION CHROME ── */
    .section { padding: 60px 0; border-bottom: 1px solid var(--border); }
    .section:last-of-type { border-bottom: none; }

    .section-label {
      font-size: 16px; color: var(--text-muted);
      letter-spacing: .1em; text-transform: uppercase; margin-bottom: 32px;
    }
    .section-label::before { content: '// '; color: var(--border); }

    h2 {
      font-size: clamp(18px, 2.5vw, 26px);
      font-weight: 700; color: var(--text);
      line-height: 1.3; letter-spacing: -.02em; margin-bottom: 12px;
    }
    h2 em { font-style: normal; color: var(--accent); }

    /* ── HERO — 2-col ── */
    .hero { padding: 64px 0 60px; border-bottom: 1px solid var(--border); }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px; align-items: center;
    }

    .hero-eyebrow {
      font-size: 16px; color: var(--text-muted);
      letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px;
    }
    .hero-eyebrow::before { content: '# '; color: var(--accent); }

    h1 {
      font-size: clamp(24px, 3vw, 40px);
      font-weight: 700; color: var(--text);
      line-height: 1.2; letter-spacing: -.025em; margin-bottom: 18px;
    }
    h1 em { font-style: normal; color: var(--accent); }

    .hero-desc {
      color: var(--text-muted); font-size: 19px;
      margin-bottom: 32px; line-height: 1.8; max-width: 480px;
    }

    .hero-badges {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
    }
    .badge {
      font-size: 15px; color: var(--accent);
      background: rgba(88,166,255,.08);
      border: 1px solid rgba(88,166,255,.22);
      border-radius: 20px; padding: 3px 11px;
      letter-spacing: .04em;
    }
    .badge.g { color: var(--green); background: rgba(63,185,80,.08); border-color: rgba(63,185,80,.22); }

    .btn-cta {
      display: inline-block;
      background: var(--accent); color: var(--bg);
      font-family: var(--font); font-size: 18px; font-weight: 700;
      text-decoration: none; padding: 12px 28px; border-radius: 6px;
      transition: opacity .2s, transform .15s; letter-spacing: .02em;
    }
    .btn-cta:hover { opacity: .88; transform: translateY(-1px); }

    /* ── TERMINAL ── */
    .terminal {
      background: rgba(22,27,34,.88);
      border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
      backdrop-filter: blur(8px);
    }
    .terminal-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 16px;
      background: rgba(48,54,61,.4);
      border-bottom: 1px solid var(--border);
    }
    .t-btn { width: 10px; height: 10px; border-radius: 50%; }
    .t-btn.r { background:#F85149; } .t-btn.y { background:#D29922; } .t-btn.g { background:#3FB950; }
    .terminal-title { font-size:15px; color:var(--text-muted); margin:0 auto; }
    .terminal-body  { padding:16px 20px; font-size:17px; line-height:2; }
    .t-line   { display:flex; gap:8px; }
    .t-prompt { color:var(--green); flex-shrink:0; }
    .t-cmd    { color:var(--text); }
    .t-out    { color:var(--text-muted); }
    .t-val    { color:var(--accent); }
    .t-ok     { color:var(--green); }
    .cursor {
      display:inline-block; width:8px; height:14px;
      background:var(--accent); vertical-align:middle;
      animation:blink 1.1s step-end infinite; margin-left:2px;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ── CARDS — 3-col ── */
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .card {
      background: rgba(22,27,34,.82);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 22px;
      transition: border-color .2s, background .2s;
      backdrop-filter: blur(6px);
    }
    .card:hover { border-color: var(--accent); background: rgba(28,33,40,.94); }
    .card-icon  { font-size:20px; margin-bottom:12px; display:block; }
    .card-title { font-size:18px; font-weight:600; color:var(--text); margin-bottom:7px; }
    .card-desc  { font-size:17px; color:var(--text-muted); line-height:1.65; }

    /* ── HERO-FEATURE (2-col alternating) ── */
    .feature-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: center;
      padding: 60px 0; border-bottom: 1px solid var(--border);
    }
    .feature-row.reverse .feature-text { order: 2; }
    .feature-row.reverse .feature-visual { order: 1; }
    .feature-row:last-child { border-bottom: none; }

    .feature-text .section-label { margin-bottom: 14px; }
    .feature-text p { color: var(--text-muted); font-size: 18px; line-height: 1.85; margin-top: 12px; max-width: 440px; }

    .feature-list {
      list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px;
    }
    .feature-list li {
      font-size: 17px; color: var(--text-muted); display: flex; gap: 10px; align-items: flex-start;
    }
    .feature-list li::before { content: '→'; color: var(--accent); flex-shrink: 0; }

    /* ── HOW IT WORKS — steps ── */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      counter-reset: step;
    }

    .step {
      padding: 28px 24px;
      border-right: 1px solid var(--border);
      position: relative;
    }
    .step:last-child { border-right: none; }

    .step-num {
      font-size: 16px; font-weight: 700;
      color: var(--accent); letter-spacing: .08em;
      margin-bottom: 12px; display: block;
    }
    .step-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .step-desc  { font-size: 17px; color: var(--text-muted); line-height: 1.65; }

    .step-connector {
      position: absolute; right: -1px; top: 38px;
      width: 20px; height: 2px;
      background: var(--border);
    }

    /* ── COMPARISON TABLE ── */
    .compare-wrap {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }

    .compare-col {
      background: rgba(22,27,34,.82);
      border: 1px solid var(--border);
      border-radius: 8px; overflow: hidden;
      backdrop-filter: blur(6px);
    }
    .compare-col.good { border-color: rgba(63,185,80,.35); }
    .compare-col.bad  { border-color: rgba(248,81,73,.25); }

    .compare-head {
      padding: 14px 20px;
      font-size: 16px; font-weight: 600; letter-spacing: .06em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
    }
    .compare-col.good .compare-head { color: var(--green); background: rgba(63,185,80,.06); }
    .compare-col.bad  .compare-head { color: var(--red);   background: rgba(248,81,73,.06); }

    .compare-item {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 20px; border-bottom: 1px solid rgba(48,54,61,.5);
      font-size: 17px; color: var(--text-muted); line-height: 1.55;
    }
    .compare-item:last-child { border-bottom: none; }
    .ci-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }

    /* ── SECTORS ── */
    .sector-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .sector-card {
      background: rgba(22,27,34,.82);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 22px;
      transition: border-color .2s;
      backdrop-filter: blur(5px);
    }
    .sector-card:hover { border-color: var(--accent); }
    .sector-icon  { font-size: 22px; margin-bottom: 10px; }
    .sector-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .sector-tags  { display: flex; flex-wrap: wrap; gap: 6px; }
    .sector-tag {
      font-size: 15px; color: var(--text-muted);
      background: rgba(48,54,61,.6);
      border: 1px solid var(--border);
      border-radius: 3px; padding: 2px 7px;
    }

    /* ── PAGES (SPA) ── */
.tool-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); text-align: center; }
    .tool-hero h1 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 14px; }
    .tool-hero p { color: var(--text-muted); font-size: 18px; max-width: 620px; margin: 0 auto; line-height: 1.7; }

    /* ── SEO / SPEED FORM ── */
    .tool-form {
      display: flex; gap: 10px; max-width: 640px; margin: 32px auto 0; flex-wrap: wrap;
      justify-content: center;
    }
    .url-prefix-wrap {
      display: flex; flex: 1 1 340px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 6px; overflow: hidden; transition: border-color .2s;
    }
    .url-prefix-wrap:focus-within { border-color: var(--accent); }
    .url-prefix {
      background: rgba(48,54,61,.6); color: var(--text-muted);
      font-family: var(--font); font-size: 17px;
      padding: 12px 10px 12px 16px; white-space: nowrap;
      border-right: 1px solid var(--border); user-select: none; cursor: default;
    }
    .url-suffix-input {
      flex: 1; background: transparent; border: none;
      color: var(--text); font-family: var(--font); font-size: 17px;
      padding: 12px 16px 12px 10px; outline: none; min-width: 0;
    }
    .url-suffix-input::placeholder { color: var(--text-muted); opacity: .55; }
      flex: 1 1 340px; background: var(--bg-card); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 17px;
      padding: 12px 16px; border-radius: 6px; outline: none;
      transition: border-color .2s;
    }
    .tool-input:focus { border-color: var(--accent); }
    .btn-primary {
      background: var(--accent); color: var(--bg); border: none;
      font-family: var(--font); font-size: 17px; font-weight: 700;
      padding: 12px 24px; border-radius: 6px; cursor: pointer;
      transition: opacity .2s, transform .15s; white-space: nowrap;
    }
    .btn-primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
    .tool-error {
      max-width: 640px; margin: 16px auto 0; text-align: center;
      color: var(--red); font-size: 16px; display: none;
    }
    .tool-error.show { display: block; }
    .tool-loading {
      max-width: 640px; margin: 24px auto 0; text-align: center;
      color: var(--text-muted); font-size: 16px; display: none;
    }
    .tool-loading.show { display: block; }
    .dot-flash::after { content: '⏳'; display: inline-block; animation: pulse 1.2s ease-in-out infinite; margin-left: 6px; }

    /* ── SEO SCORE ── */
    .seo-results { display: none; }
    .seo-results.show { display: block; }
    .score-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0 20px; }
    .score-ring { position: relative; width: 160px; height: 160px; }
    .score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
    .score-ring circle { fill: none; stroke-width: 10; }
    .score-ring .bg { stroke: var(--border); }
    .score-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s ease, stroke .3s; }
    .score-num {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      flex-direction: column;
    }
    .score-num .n { font-size: 40px; font-weight: 700; color: var(--text); line-height: 1; }
    .score-num .l { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
    .score-url { color: var(--text-muted); font-size: 16px; word-break: break-all; text-align: center; max-width: 500px; }

    .checks-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
      gap: 10px; margin-top: 24px;
    }
    .check-item {
      background: rgba(22,27,34,.82); border: 1px solid var(--border); border-radius: 8px;
      padding: 14px 16px; font-size: 16px; display: flex; gap: 10px; align-items: flex-start;
    }
    .check-item.pass { border-color: rgba(63,185,80,.3); }
    .check-item.fail { border-color: rgba(248,81,73,.25); }
    .check-item.warn { border-color: rgba(210,153,34,.3); }
    .check-icon { flex-shrink: 0; }
    .check-label { color: var(--text); font-weight: 600; margin-bottom: 3px; font-size: 15px; }
    .check-detail { color: var(--text-muted); font-size: 14px; line-height: 1.5; }

    /* ── SEO CTA ── */
    .seo-cta {
      margin-top: 40px; border-radius: 10px; padding: 2px;
      background: linear-gradient(135deg, rgba(88,166,255,.35), rgba(63,185,80,.25));
    }
    .seo-cta-inner {
      background: var(--bg-card); border-radius: 9px;
      padding: 28px 32px; display: flex; align-items: center;
      gap: 20px; flex-wrap: wrap;
    }
    .seo-cta.ok   { background: linear-gradient(135deg, rgba(63,185,80,.35), rgba(63,185,80,.15)); }
    .seo-cta.warn { background: linear-gradient(135deg, rgba(210,153,34,.35), rgba(210,153,34,.15)); }
    .seo-cta.fail { background: linear-gradient(135deg, rgba(248,81,73,.35), rgba(88,166,255,.25)); }
    .seo-cta-icon { font-size: 36px; flex-shrink: 0; }
    .seo-cta-text { flex: 1 1 240px; }
    .seo-cta-text strong { font-size: 19px; color: var(--text); display: block; margin-bottom: 6px; }
    .seo-cta-text p { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0; }
    .seo-cta-btn { flex-shrink: 0; font-size: 16px; padding: 11px 22px; text-decoration: none; }

    /* ── SPEED TEST ── */
    .speed-gauges { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
    .speed-gauge {
      background: rgba(22,27,34,.82); border: 1px solid var(--border); border-radius: 10px;
      padding: 28px 18px; text-align: center;
    }
    .speed-gauge .g-icon { font-size: 24px; margin-bottom: 10px; }
    .speed-gauge .g-val { font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
    .speed-gauge .g-unit { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
    .speed-gauge .g-label { font-size: 15px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; }
    .speed-bar-track { height: 6px; background: var(--border); border-radius: 3px; margin-top: 14px; overflow: hidden; }
    .speed-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width .3s ease; }
    .speed-status { text-align: center; color: var(--text-muted); font-size: 16px; margin-top: 20px; }
    @media (max-width: 640px){ .speed-gauges { grid-template-columns: 1fr; } .checks-grid { grid-template-columns: 1fr 1fr; } }

    /* ── METRICS ── */
    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .metric {
      background: rgba(22,27,34,.82);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 22px;
      backdrop-filter: blur(6px);
    }
    .metric-label { font-size:15px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
    .metric-value { font-size:22px; font-weight:700; color:var(--accent); letter-spacing:-.02em; }
    .metric-value.ok   { color:var(--green); }
    .metric-value.warn { color:var(--yellow); }
    .metric-sub  { font-size:15px; color:var(--text-muted); margin-top:4px; }

    /* ── NOTICE ── */
    .notice {
      display: flex; gap: 14px;
      background: rgba(88,166,255,.06);
      border: 1px solid rgba(88,166,255,.2);
      border-left: 3px solid var(--accent);
      border-radius: 6px; padding: 20px 24px; margin-top: 32px;
      backdrop-filter: blur(4px);
    }
    .notice-icon { font-size:19px; flex-shrink:0; padding-top:2px; }
    .notice-text { font-size:18px; color:var(--text-muted); line-height:1.75; }
    .notice-text strong { color:var(--text); }
    .notice-text a { color:var(--accent); text-decoration:none; }
    .notice-text a:hover { text-decoration:underline; }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid var(--border); padding: 24px 0;
      background: rgba(13,17,23,.78); backdrop-filter: blur(10px);
    }
    .footer-inner {
      display: flex; align-items: center;
      justify-content: space-between; flex-wrap: wrap; gap: 12px;
    }
    .footer-left   { font-size:16px; color:var(--text-muted); }
    .footer-left span { color:var(--green); }
    .footer-center { font-size:16px; }
    .footer-email  { color:var(--accent); text-decoration:none; }
    .footer-email:hover { text-decoration:underline; }
    .footer-right  { font-size:16px; color:var(--border); }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .grid-4  { grid-template-columns: repeat(2, 1fr); }
      .steps   { grid-template-columns: repeat(2, 1fr); }
      .step    { border-right: none; border-bottom: 1px solid var(--border); }
      .step:nth-child(2n) { border-right: none; }
      .metrics { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .container { padding: 0 20px; }
      .hero-grid     { grid-template-columns: 1fr; }
      .feature-row   { grid-template-columns: 1fr; gap: 32px; }
      .feature-row.reverse .feature-text, .feature-row.reverse .feature-visual { order: unset; }
      .grid-3        { grid-template-columns: 1fr; }
      .sector-grid   { grid-template-columns: repeat(2, 1fr); }
      .compare-wrap  { grid-template-columns: 1fr; }
      .steps         { grid-template-columns: 1fr; }
      .header-email  { display: none; }
      .footer-inner  { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 480px) {
      .sector-grid { grid-template-columns: 1fr; }
      .metrics     { grid-template-columns: repeat(2, 1fr); }
    }

    @media (prefers-reduced-motion: reduce) {
      .dot, .cursor { animation: none; }
      .btn-cta { transition: none; }
      #bg-canvas { display: none; }
    }