:root {
  --bg: #070912;
  --bg-soft: #0c1020;
  --surface: rgba(17, 22, 42, .72);
  --surface-strong: #11172b;
  --line: rgba(255,255,255,.09);
  --text: #f5f7ff;
  --muted: #9ca7bd;
  --blue: #3697ff;
  --cyan: #4ee6d5;
  --violet: #8b5cf6;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 14% -5%, rgba(54,151,255,.16), transparent 32rem),
    radial-gradient(circle at 90% 24%, rgba(139,92,246,.14), transparent 34rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.ambient { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; z-index: -1; }
.ambient-one { width: 420px; height: 420px; background: var(--blue); left: -250px; top: 40%; }
.ambient-two { width: 360px; height: 360px; background: var(--violet); right: -220px; top: 68%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.site-header.scrolled { background: rgba(7,9,18,.78); border-color: var(--line); backdrop-filter: blur(20px); }
.header-inner { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 21px; letter-spacing: -.5px; }
.brand img { display: block; object-fit: cover; border-radius: 14px; box-shadow: 0 0 25px rgba(92,116,255,.22); }
.brand span { font-weight: 500; }
.brand b { font-weight: 820; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 650; transition: color .2s; }
.main-nav a:hover { color: var(--text); }
.main-nav .admin-link { color: #9fd5ff; }
.main-nav .nav-contact { color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; background: rgba(255,255,255,.035); }
.admin-link[hidden] { display: none !important; }
.menu-toggle { display: none; width: 42px; height: 42px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; }
.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: white; }

.hero { min-height: 690px; padding-block: 82px 110px; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(390px,.94fr); align-items: center; gap: 62px; }
.eyebrow, .section-number { color: #9fc7ff; font-size: 12px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(78,230,213,.2); background: rgba(78,230,213,.055); color: #b6fff2; }
.eyebrow i, .principle-status i, .online i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.hero h1 { max-width: 710px; margin: 25px 0 22px; font-size: clamp(48px, 6.1vw, 78px); line-height: 1.02; letter-spacing: -.055em; font-weight: 780; }
.hero h1 span { color: transparent; background: linear-gradient(110deg, #76c5ff 5%, #9886ff 48%, #66ead7 96%); background-clip: text; -webkit-background-clip: text; }
.hero-lead { max-width: 660px; margin: 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 50px; padding: 13px 20px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; text-decoration: none; font-weight: 720; font-size: 14px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #06101b; background: linear-gradient(135deg, #69c8ff, #67ead8); box-shadow: 0 12px 34px rgba(54,151,255,.2); }
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.hero-tags { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags span, .card-tags span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: #aab5ca; background: rgba(255,255,255,.025); font: 650 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }

.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.visual-card { position: relative; width: min(390px, 88vw); aspect-ratio: .84; padding: 22px; border: 1px solid rgba(124,177,255,.25); border-radius: 30px; background: linear-gradient(150deg, rgba(26,35,66,.9), rgba(11,14,28,.82)); box-shadow: 0 40px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(20px); overflow: hidden; transform: rotate(2deg); }
.visual-card::before { content:""; position:absolute; width:240px; height:240px; border-radius:50%; top:19%; left:19%; background: radial-gradient(circle, rgba(54,151,255,.3), rgba(139,92,246,.12) 42%, transparent 70%); filter: blur(9px); }
.visual-card::after { content:""; position:absolute; inset:0; background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.045) 50%, transparent 66%); transform: translateX(-100%); animation: sheen 7s infinite 1s; }
.visual-topline { display:flex; justify-content:space-between; color:#7e8ba6; font:700 10px ui-monospace,monospace; letter-spacing:.14em; }
.visual-topline b { color:var(--cyan); }
.visual-card > img { position:relative; z-index:2; display:block; width:190px; height:190px; object-fit:cover; border-radius:43px; margin:42px auto 28px; box-shadow:0 0 52px rgba(94,75,246,.28); }
.signal-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:5px; opacity:.75; }
.signal-grid i { height:3px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); animation:pulse 2.3s infinite alternate; }
.signal-grid i:nth-child(3n) { opacity:.35; animation-delay:.4s; }
.signal-grid i:nth-child(2n) { animation-delay:.9s; }
.visual-caption { margin-top:26px; display:flex; flex-direction:column; }
.visual-caption span { color:#70809f; font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.visual-caption strong { margin-top:4px; font-size:17px; }
.orbit { position:absolute; border:1px solid rgba(112,164,255,.16); border-radius:50%; animation:spin 24s linear infinite; }
.orbit::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); top:18%; right:12%; }
.orbit-large { width:500px; height:500px; }
.orbit-small { width:430px; height:430px; animation-direction:reverse; animation-duration:18s; }
.float-chip { position:absolute; z-index:3; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(9,12,24,.82); color:#b7c1d4; backdrop-filter:blur(12px); font:700 10px ui-monospace,monospace; letter-spacing:.08em; box-shadow:0 12px 30px rgba(0,0,0,.26); }
.chip-one { left:-7px; top:22%; }.chip-two { right:-18px; top:49%; }.chip-three { left:10px; bottom:13%; }

.trust-strip { border-block:1px solid var(--line); background:rgba(255,255,255,.018); }
.trust-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#838fa7; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.trust-inner i { width:4px; height:4px; border-radius:50%; background:#3c4860; }
.section { padding-block:120px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:42px; }
.section-heading h2, .principles-copy h2, .company-main h2 { margin:10px 0 0; font-size:clamp(35px,5vw,56px); line-height:1.08; letter-spacing:-.045em; }
.section-heading > p { max-width:470px; margin:0; color:var(--muted); }
.direction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.direction-card { min-height:340px; padding:30px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(150deg,rgba(18,24,46,.74),rgba(10,13,26,.72)); position:relative; overflow:hidden; transition:transform .25s,border-color .25s; }
.direction-card:hover { transform:translateY(-4px); border-color:rgba(103,193,255,.28); }
.direction-card.featured { background:linear-gradient(150deg,rgba(25,49,83,.8),rgba(15,23,45,.78)); }
.direction-card::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-120px; bottom:-120px; background:var(--blue); opacity:.07; filter:blur(20px); }
.card-index { position:absolute; top:28px; right:28px; color:#536077; font:700 11px ui-monospace,monospace; }
.card-icon { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(103,193,255,.22); border-radius:15px; color:#7cceff; background:rgba(54,151,255,.08); font-size:25px; }
.direction-card h3 { margin:55px 0 10px; font-size:25px; letter-spacing:-.025em; }
.direction-card p { max-width:500px; margin:0; color:var(--muted); }
.card-tags { position:absolute; left:30px; bottom:30px; display:flex; flex-wrap:wrap; gap:7px; }

.principles-section { border-block:1px solid var(--line); background:linear-gradient(135deg,rgba(17,25,49,.76),rgba(8,11,22,.88)); }
.principles-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.principles-copy p { max-width:535px; color:var(--muted); font-size:18px; }
.principle-status { margin-top:32px; display:inline-flex; align-items:center; gap:10px; color:#b9c5d9; font-size:13px; }
.principle-list { border-top:1px solid var(--line); }
.principle-item { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:27px 0; border-bottom:1px solid var(--line); }
.principle-item > span { color:#60708e; font:700 11px ui-monospace,monospace; padding-top:6px; }
.principle-item h3 { margin:0 0 5px; font-size:21px; }
.principle-item p { margin:0; color:var(--muted); }

.company-card { display:grid; grid-template-columns:1.35fr .65fr; gap:70px; padding:56px; border:1px solid rgba(102,181,255,.18); border-radius:28px; background:linear-gradient(135deg,rgba(19,39,69,.75),rgba(16,18,38,.8)); box-shadow:0 25px 80px rgba(0,0,0,.25); }
.company-main p { max-width:640px; color:var(--muted); font-size:18px; }
.text-link { display:inline-flex; gap:18px; align-items:center; margin-top:12px; color:#79d9ff; text-decoration:none; font-weight:700; }
.company-meta { display:flex; flex-direction:column; justify-content:center; }
.company-meta > div { padding:19px 0; border-bottom:1px solid var(--line); }
.company-meta > div:last-child { border-bottom:0; }
.company-meta span { display:block; margin-bottom:4px; color:#6f7d96; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.company-meta strong { font-size:14px; }
.company-meta .online { display:flex; align-items:center; gap:8px; color:#b5f8e9; }

.social-section { padding-top:20px; }
.section-heading.compact h2 { font-size:clamp(32px,4vw,48px); }
.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.social-card { min-height:112px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:15px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.social-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#131b31; color:#8acfff; font-size:13px; font-weight:850; }
.social-card div { display:flex; flex-direction:column; }
.social-card small { color:var(--muted); }
.social-card em { padding:5px 8px; border-radius:999px; color:#77849d; background:rgba(255,255,255,.04); font-size:10px; font-style:normal; font-weight:750; text-transform:uppercase; }

.site-footer { margin-top:50px; border-top:1px solid var(--line); padding:34px 0 calc(34px + env(safe-area-inset-bottom)); }
.footer-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.footer-brand { font-size:17px; }.footer-brand img { border-radius:10px; }
.footer-inner p { color:#727f96; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.footer-right { display:flex; justify-content:flex-end; align-items:center; gap:14px; color:#657188; font-size:12px; }
.footer-right a { color:#657188; text-decoration:none; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity:1; transform:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { to { opacity:.25; transform:scaleX(.45); } }
@keyframes sheen { 55%,100% { transform:translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .js .reveal { opacity:1; transform:none; }
}

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .main-nav { position:absolute; left:20px; right:20px; top:76px; padding:16px; border:1px solid var(--line); border-radius:18px; background:rgba(9,12,24,.96); backdrop-filter:blur(20px); flex-direction:column; align-items:stretch; gap:4px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s; }
  .main-nav.open { opacity:1; visibility:visible; transform:none; }
  .main-nav a { padding:11px 12px; }
  .hero { grid-template-columns:1fr; padding-top:65px; text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero-visual { min-height:440px; margin-top:-20px; }
  .trust-inner { padding-block:20px; flex-wrap:wrap; justify-content:center; }
  .trust-inner i { display:none; }
  .principles-layout { grid-template-columns:1fr; gap:45px; }
  .company-card { grid-template-columns:1fr; gap:30px; }
  .social-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .shell { width:min(calc(100% - 28px),var(--shell)); }
  .header-inner { height:72px; }
  .brand img { width:42px; height:42px; }
  .hero { min-height:auto; padding-block:55px 75px; gap:35px; }
  .hero h1 { font-size:clamp(42px,14vw,60px); }
  .hero-actions { width:100%; flex-direction:column; }
  .button { width:100%; }
  .hero-tags { justify-content:center; }
  .hero-visual { min-height:400px; }
  .visual-card { width:min(330px,88vw); border-radius:24px; }
  .visual-card > img { width:155px; height:155px; margin-top:34px; border-radius:35px; }
  .orbit-large { width:390px; height:390px; }.orbit-small { width:340px; height:340px; }
  .float-chip { font-size:8px; }.chip-one{left:0}.chip-two{right:0}.chip-three{left:7px}
  .section { padding-block:82px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .direction-grid { grid-template-columns:1fr; }
  .direction-card { min-height:330px; padding:25px; }
  .card-tags { left:25px; bottom:25px; }
  .company-card { padding:30px 24px; border-radius:22px; }
  .footer-inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-right { justify-content:center; }
}