:root {
  --bg: #050914;
  --panel: rgba(11, 18, 31, 0.9);
  --panel-strong: rgba(16, 24, 40, 0.96);
  --line: rgba(120, 168, 255, 0.14);
  --line-strong: rgba(120, 168, 255, 0.26);
  --text: #f5f8ff;
  --muted: #b0bfd8;
  --accent: #82b0ff;
  --success: #6fe08d;
  --warning: #ffd667;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --sans: "Segoe UI", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  background:
    radial-gradient(circle at top center, rgba(58, 93, 180, 0.18), transparent 35%),
    linear-gradient(180deg, #070c16 0%, #03060c 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%);
}

a, button, input, textarea {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 48px; }
.mode-switch { position: sticky; top: 18px; z-index: 20; display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.mode-switch button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(10,16,30,.84); color: #dbe7ff; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); }
.mode-switch button:hover { border-color: rgba(120,168,255,.24); transform: translateY(-1px); }
.mode-switch button.active { background: linear-gradient(180deg,#4778d1 0%,#2a4c8f 100%); border-color: rgba(150,190,255,.32); color: #fff; box-shadow: 0 12px 24px rgba(48,85,157,.28); }
.mode-panel[hidden] { display: none; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:10px 0 18px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #a4d0ff, #4273c8 62%, #1f3158 100%); box-shadow: 0 0 18px rgba(120,168,255,.45); }
.brand-logo { height:44px; width:auto; display:block; filter: brightness(0) invert(1); opacity:.92; }
.brand-name { font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#dce8ff; line-height:1; }
.brand-labs { color: var(--accent); opacity:.7; letter-spacing:.22em; }
.nav { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nav a { color: rgba(245,248,255,.9); text-decoration:none; font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid transparent; }
.nav a:hover { border-color: rgba(120,168,255,.22); background: rgba(255,255,255,.03); }

/* Language Dropdown */
.lang-dropdown { position:relative; }
.lang-btn { display:inline-flex; align-items:center; gap:5px; color: rgba(245,248,255,.9); font-size:13px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); cursor:pointer; white-space:nowrap; }
.lang-btn:hover { border-color: rgba(120,168,255,.22); background: rgba(255,255,255,.05); }
.lang-btn .arrow { font-size:10px; opacity:.7; transition: transform 0.2s; }
.lang-dropdown.open .arrow { transform: rotate(180deg); }
.lang-menu { position:absolute; top:calc(100% + 6px); right:0; background: rgba(10,16,30,.96); border:1px solid rgba(120,168,255,.16); border-radius:12px; padding:6px; z-index:100; box-shadow: 0 16px 40px rgba(0,0,0,.6); backdrop-filter:blur(16px); display:none; }
.lang-dropdown.open .lang-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.lang-menu a { display:flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:8px; color:rgba(220,235,255,.85); font-size:13px; text-decoration:none; white-space:nowrap; }
.lang-menu a:hover { background: rgba(120,168,255,.1); color:#fff; }
.lang-menu a.active { color:#82b0ff; font-weight:700; background: rgba(120,168,255,.08); }

.hero { position:relative; overflow:hidden; margin-top:30px; padding:28px 28px 26px; border-radius:24px; background: linear-gradient(180deg,rgba(18,29,53,.7),rgba(8,13,24,.97)), radial-gradient(circle at 75% 26%,rgba(116,168,255,.28),transparent 24%); border:1px solid rgba(120,168,255,.12); box-shadow: var(--shadow); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 82% 24%,rgba(143,192,255,.28),transparent 10%), radial-gradient(circle at 76% 58%,rgba(119,168,255,.12),transparent 20%), linear-gradient(90deg,transparent 38%,rgba(114,160,240,.1) 75%,transparent 100%); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.02fr 1fr; gap:24px; align-items:center; min-height:430px; }
.linux-badge { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:8px 12px; border-radius:999px; background:rgba(7,13,24,.76); border:1px solid rgba(120,168,255,.16); color:#bfd8ff; font-family:var(--mono); font-size:12px; }
.linux-badge::before { content:"$"; color:#7fb1ff; }
.hero-copy h1 { margin:0 0 22px; max-width:560px; font-size:clamp(38px,5vw,62px); line-height:1.02; letter-spacing:-.055em; font-weight:800; text-wrap:balance; }
.bullet-list { margin:0; padding:0; list-style:none; }
.bullet-list li { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:#dde7f7; font-size:15px; }
.bullet-list li::before { content:""; width:11px; height:11px; border-radius:50%; border:1px solid rgba(129,178,255,.65); background:rgba(65,108,184,.15); box-shadow:0 0 0 4px rgba(120,168,255,.05); }
.cta-row { display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; border:1px solid rgba(120,168,255,.16); text-decoration:none; font-size:14px; font-weight:700; color:#eef4ff; background:rgba(255,255,255,.035); cursor:pointer; }
.btn:hover { transform:translateY(-1px); border-color:rgba(120,168,255,.28); }
.btn-primary { background:linear-gradient(180deg,#4f82dc 0%,#2c4f93 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 26px rgba(43,76,137,.34); }
.hero-visual { position:relative; min-height:320px; border-radius:18px; background:linear-gradient(180deg,rgba(8,14,26,.96),rgba(5,9,20,.99)); border:1px solid rgba(120,168,255,.10); overflow:hidden; display:flex; flex-direction:column; }
.hero-visual-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid rgba(120,168,255,.08); flex-shrink:0; }
.hero-visual-bar span { width:11px; height:11px; border-radius:50%; }
.hero-visual-bar span:nth-child(1) { background:#ff5f57; }
.hero-visual-bar span:nth-child(2) { background:#febc2e; }
.hero-visual-bar span:nth-child(3) { background:#28c840; }
.hero-visual-bar .bar-title { margin-left:8px; font-family:var(--mono); font-size:11px; color:rgba(120,168,255,.5); }
.hero-term { flex:1; padding:18px 20px; font-family:var(--mono); font-size:13px; line-height:1.9; overflow:hidden; }
.hero-term .t-prompt { color:rgba(120,168,255,.6); }
.hero-term .t-cmd { color:#c8deff; }
.hero-term .t-ok { color:#6fe08d; }
.hero-term .t-muted { color:rgba(180,200,230,.45); }
.hero-term .t-cursor { display:inline-block; width:8px; height:1em; background:#82b0ff; vertical-align:text-bottom; animation:termBlink .8s step-end infinite; }
@keyframes termBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-foot { position:relative; z-index:1; margin-top:14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); text-align:center; }
.hero-foot strong { display:block; margin-bottom:6px; font-size:15px; color:#f4f8ff; }
.hero-step { white-space:nowrap; }
.hero-step::before { content:"●"; margin-right:4px; color:#4e9eff; font-size:10px; vertical-align:middle; }
.hero-step-last::before { content:"★"; color:#f5c518; }
.hero-arrow { margin:0 4px; color:rgba(255,255,255,.3); }
.hero-foot p { margin:0; color:var(--muted); font-size:13px; }
.section-title { margin:28px 0 16px; text-align:center; font-size:30px; letter-spacing:-.035em; line-height:1.1; }
.products { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.8fr); gap:12px; align-items:start; }
.product-list,.detail-panel,.contact-card,.contact-form { border-radius:22px; background:linear-gradient(180deg,rgba(12,19,34,.88),rgba(9,15,27,.98)); border:1px solid rgba(120,168,255,.12); box-shadow:var(--shadow); }
.product-list { padding:10px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.card { display:flex; flex-direction:column; min-width:0; padding:18px; border-radius:14px; background:linear-gradient(180deg,rgba(54,78,119,.16),rgba(20,29,49,.32)), var(--panel-strong); border:1px solid var(--line); min-height:172px; }
.card:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.card h3 { margin:0 0 8px; font-size:24px; letter-spacing:-.04em; line-height:1.08; }
.name-wise { color:rgba(120,168,255,.5); }
.card p { margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.62; min-height:44px; }
.card-footer { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; margin-top:auto; }
.tag { display:inline-flex; align-items:center; align-self:flex-start; gap:8px; max-width:100%; flex:1 1 160px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); color:#d8e1f3; font-size:12px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.tag::before { content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#b7dbff,#4d88e5); box-shadow:0 0 8px rgba(120,168,255,.7); }
.view-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); color:#eef4ff; font-size:14px; background:rgba(255,255,255,.03); cursor:pointer; flex:0 0 auto; margin-left:auto; }
.view-btn:hover { border-color:rgba(120,168,255,.28); background:rgba(120,168,255,.08); }
.detail-panel { position:sticky; top:74px; padding:22px; }
.detail-panel.panel-updating { animation:panelFadeIn .28s ease forwards; }
@keyframes panelFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.detail-title.cursor-active::after { content:"|"; color:var(--accent); margin-left:2px; animation:cursorBlink .18s step-end 5; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.detail-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#cfe1ff; font-size:12px; margin-bottom:16px; }
.detail-title { margin:0 0 10px; font-size:34px; letter-spacing:-.045em; line-height:1.04; }
.detail-body { margin:0; color:#b9c7de; font-size:15px; line-height:1.76; }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.detail-meta { margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:13px; line-height:1.7; }
.detail-actions .btn[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.workflow { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 8px 10px; color:var(--muted); font-size:12px; }
.workflow span { padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.workflow i { font-style:normal; color:rgba(255,255,255,.26); }
.contact-section { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:12px; margin-top:24px; }
.contact-card,.contact-form { padding:22px; }
.contact-card h3,.contact-form h3 { margin:0 0 10px; font-size:28px; letter-spacing:-.035em; line-height:1.08; }
.contact-copy { margin:0 0 18px; color:#b7c5dd; line-height:1.75; }
.contact-list { display:grid; gap:10px; }
.contact-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.contact-item-icon { flex-shrink:0; width:32px; height:32px; border-radius:8px; background:rgba(120,168,255,.08); border:1px solid rgba(120,168,255,.12); display:flex; align-items:center; justify-content:center; color:rgba(120,168,255,.7); margin-top:2px; }
.contact-item-icon svg { width:15px; height:15px; }
.contact-item-body { min-width:0; }
.contact-label { display:block; margin-bottom:4px; color:#cfe1ff; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.contact-value,.contact-value a { color:var(--text); text-decoration:none; line-height:1.6; }
.contact-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.contact-form-grid .full { grid-column:1 / -1; }
.field { display:grid; gap:7px; }
.field label { color:#d7e3fa; font-size:13px; }
.input-group { position:relative; display:flex; align-items:center; }
.input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:rgba(120,168,255,.55); pointer-events:none; display:flex; align-items:center; }
.input-icon svg { width:16px; height:16px; }
.input-group input { padding-left:42px !important; }
.input-group-textarea { align-items:flex-start; }
.input-icon-textarea { top:14px; transform:none; }
.input-group-textarea textarea { padding-left:42px !important; }
.field input,.field textarea,.field select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--text); font:inherit; }
.field select { padding-left:42px !important; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(120,168,255,0.55)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 14px) center; padding-right:36px; }
.field select option { background:#0c1524; color:var(--text); }
.field textarea { min-height:124px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { outline:0; border-color:rgba(120,168,255,.32); box-shadow:0 0 0 3px rgba(120,168,255,.08); }
.input-group:focus-within .input-icon { color:rgba(120,168,255,.85); }
.field-invalid .input-group input,
.field-invalid .input-group textarea,
.field-invalid .input-group select { border-color:rgba(255,90,90,.55) !important; box-shadow:0 0 0 3px rgba(255,60,60,.1) !important; }
.field-invalid .input-icon { color:rgba(255,100,100,.7); }
.field-error { display:block; font-size:12px; color:rgba(255,110,110,.9); min-height:16px; }
.honeypot { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.form-actions { margin-top:18px; }
.btn svg { margin-right:7px; }
.form-note { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.6; }
.form-status { min-height:20px; margin-top:12px; color:#bfd8ff; font-size:13px; }
.form-status.success { color:var(--success); }
.form-status.error { color:rgba(255,110,110,.9); }
.btn-sending { opacity:.7; cursor:not-allowed; pointer-events:none; }
.btn-sending .btn-label { display:none; }
.btn-spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; flex-shrink:0; }
.btn-sending .btn-spinner { display:block; }
.btn-sending svg.btn-icon { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.social-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.social-link { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#dbe8ff; text-decoration:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.social-link:hover { border-color:rgba(120,168,255,.28); background:rgba(120,168,255,.08); transform:translateY(-1px); }
.social-link svg { width:18px; height:18px; fill:currentColor; }
.footer { margin-top:28px; padding:22px 0 8px; text-align:center; color:var(--muted); font-size:13px; line-height:1.7; }
.footer-title { display:block; margin-bottom:6px; color:#edf4ff; font-size:18px; font-weight:700; letter-spacing:-.03em; }
.footer-copy { display:block; max-width:360px; margin:0 auto; color:#adc0db; }
.footer-social { justify-content:center; margin-top:16px; }
.footer-social .social-link { width:38px; height:38px; background:rgba(255,255,255,.024); }
.footer-year { display:block; margin-top:14px; color:rgba(193,208,231,.68); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.linux-layout { margin-top:24px; border-radius:22px; background:linear-gradient(180deg,rgba(8,13,24,.98),rgba(5,9,18,.99)); border:1px solid rgba(120,168,255,.12); box-shadow:var(--shadow); overflow:hidden; }
.terminal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); font-family:var(--mono); font-size:12px; }
.term-dots { display:flex; gap:8px; }
.term-dots span { width:10px; height:10px; border-radius:50%; }
.term-dots span:nth-child(1){background:#ff5f57}.term-dots span:nth-child(2){background:#febc2e}.term-dots span:nth-child(3){background:#28c840}
.terminal-head .hint { color:#afc0da; text-align:right; }
.terminal-console { min-height:420px; max-height:60vh; overflow:auto; padding:20px 18px 14px; font-family:var(--mono); font-size:13px; line-height:1.72; color:#e4eeff; }
.line { margin:0 0 6px; white-space:pre-wrap; word-break:break-word; }
.line.prompt{color:#97c2ff}.line.muted{color:#aebdd6}.line.success{color:var(--success)}.line.warning{color:var(--warning)}
.input-row { display:flex; align-items:center; gap:10px; padding:14px 18px 10px; border-top:1px solid rgba(255,255,255,.06); font-family:var(--mono); }
.input-prompt { color:#97c2ff; white-space:nowrap; font-size:13px; }
.input-wrap { position:relative; flex:1; min-width:120px; }
.input-row input { width:100%; border:0; outline:0; background:transparent; color:#eff5ff; font:inherit; padding:0; caret-color:transparent; }
.fake-cursor { position:absolute; top:1px; left:0; width:9px; height:18px; background:rgba(121,169,255,.9); pointer-events:none; animation:none; opacity:0; border-radius:1px; }
.fake-cursor.active { animation:blink 1s step-end infinite; opacity:1; }
.suggestions,.terminal-helper { padding:0 18px 14px; color:#aebdd6; font-family:var(--mono); font-size:12px; }
.suggestions { min-height:18px; padding-bottom:6px; }
.suggestions strong { color:#bfd8ff; font-weight:600; }
.terminal-helper { padding-top:0; }
@keyframes blink { 50% { opacity:0; } }
.quick-commands { display:flex; flex-wrap:wrap; gap:10px; padding:0 18px 18px; }
.quick-commands button { padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#dbe8ff; font-family:var(--mono); font-size:12px; cursor:pointer; }
.quick-commands button:hover { border-color:rgba(120,168,255,.24); background:rgba(120,168,255,.08); }
@media (max-width:1100px){.products,.contact-section{grid-template-columns:1fr}.detail-panel{position:static}}
@media (max-width:980px){.hero-grid,.product-grid{grid-template-columns:1fr}.hero{padding:22px}.hero-copy h1{max-width:none}}
@media (max-width:640px){.page{width:min(100% - 24px,1180px);padding-top:14px}.topbar,.terminal-head{flex-wrap:wrap}.nav{width:100%;justify-content:flex-start}.hero-copy h1{font-size:40px}.hero-visual{min-height:180px}.hero-visual::before,.hero-visual::after{opacity:.7}.card h3{font-size:20px}.card-footer{flex-direction:column;align-items:stretch}.tag{flex:none;align-self:flex-start}.view-btn{width:100%;margin-left:0}.mode-switch{position:static;justify-content:flex-start}.detail-title{font-size:28px}.contact-form-grid{grid-template-columns:1fr}}

/* Bottom Sheet */
.sheet-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; backdrop-filter:blur(4px); }
.sheet-overlay.open { display:block; }
.bottom-sheet { position:fixed; bottom:0; left:0; right:0; z-index:201; background:linear-gradient(180deg,rgba(14,22,42,.98),rgba(8,13,24,.99)); border:1px solid rgba(120,168,255,.16); border-bottom:none; border-radius:22px 22px 0 0; padding:0 20px 32px; max-height:82vh; overflow-y:auto; transform:translateY(100%); transition:transform .32s cubic-bezier(.32,1,.4,1); }
.bottom-sheet.open { transform:translateY(0); }
.sheet-handle-row { display:flex; justify-content:center; padding:14px 0 8px; }
.sheet-handle { width:40px; height:4px; border-radius:999px; background:rgba(120,168,255,.28); }
.sheet-close { position:absolute; top:14px; right:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#cfe1ff; border-radius:999px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; line-height:1; }
.sheet-close:hover { background:rgba(120,168,255,.15); }
@media (max-width:1100px) { .detail-panel { display:none; } }