/* Launcher — identitate SymData */
:root{
  --navy:#0b1220; --accent:#1668c9; --ink:#0b1220; --body:#4b5666;
  --muted:#6b7688; --line:#e2e7ee; --bg:#f5f7fa; --dim:#a8b4c3;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:#0f4d99}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.sym-header{background:var(--navy)}
.sym-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:20px 32px}
.sym-header img{height:34px;width:auto;display:block}
.sym-nav{display:flex;align-items:center;gap:28px;font-size:15px}
.sym-nav a{color:#c3ccd8}
.sym-nav a:hover{color:#fff}
.sym-nav .sep{width:1px;height:20px;background:rgba(255,255,255,.16)}
.sym-nav .lang{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#8d9aab}
.btn-accent{padding:10px 20px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;border-radius:2px}
.btn-accent:hover{color:#fff;background:#0f4d99}

.hero{background:var(--navy);border-top:1px solid rgba(255,255,255,.08)}
.hero .wrap{padding:72px 32px 88px;display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#5f9fe8}
.hero h1{margin:0;font-size:46px;font-weight:600;line-height:1.14;letter-spacing:-.02em;color:#fff;max-width:860px;text-wrap:balance}
.hero p{margin:0;font-size:18px;line-height:1.65;color:var(--dim);max-width:720px;text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:#8d9aab}
.tags span{padding:7px 14px;border:1px solid rgba(255,255,255,.16)}

.cards{max-width:1160px;margin:-48px auto 0;padding:0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:3px;color:inherit;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:0 12px 32px rgba(11,18,32,.1);color:inherit}
.card .preview{padding:26px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;justify-content:center}
.card .preview svg{display:block}
.card .meta{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .tag{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.card h2{margin:0;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.card p{margin:0;font-size:15px;line-height:1.65;text-wrap:pretty}
.card .open{margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--accent)}

.note{max-width:1160px;margin:40px auto 0;padding:28px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:3px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.note h3{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--ink)}
.note p{margin:0;font-size:15px;line-height:1.6;max-width:720px;text-wrap:pretty}
.btn-dark{padding:12px 22px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;border-radius:2px;white-space:nowrap}
.btn-dark:hover{color:#fff;background:#16203a}
.spacer{height:96px}

.sym-footer{background:var(--navy);color:var(--dim);padding:56px 0 28px;font-size:15px}
.sym-footer a{color:var(--dim)}
.sym-footer a:hover{color:#fff}
.sym-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:48px}
.sym-footer img{height:30px;width:auto;display:block}
.sym-footer .about{margin:14px 0 0;line-height:1.65;max-width:420px;text-wrap:pretty}
.sym-footer h4{margin:0 0 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sym-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sym-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--muted)}
.sym-bottom a{color:var(--muted)}
.sym-bottom .legal{display:flex;flex-wrap:wrap;gap:18px}

@media (max-width:900px){
  .hero h1{font-size:32px}
  .hero .wrap{padding:56px 32px 72px}
  .sym-header .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .sym-nav{flex-wrap:wrap;gap:16px}
  .sym-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .sym-footer .cols{grid-template-columns:1fr} }