:root{
  --bg:#0f1115;
  --card:#151823;
  --muted:#aab1c3;
  --text:#e7ecff;
  --primary:#7c5cff;
  --secondary:#4bd6b5;
  --accent:#ff9f4a;
  --ring: rgba(124, 92, 255, .5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0f1115,#0b0d12);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;display:block}

.container{width:min(1200px,92%);margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(15,17,21,.8);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:.3px}
.logo img{border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.navbar .nav-links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.navbar a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px;transition:.2s}
.navbar a:hover,.navbar a.active{color:var(--text);background:rgba(255,255,255,.06)}
.nav-toggle{display:none;background:none;border:0;color:var(--text)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

.social{display:flex;gap:10px}
.s-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--muted);text-decoration:none;transition:.2s}
.s-icon:hover{color:var(--text);background:rgba(255,255,255,.12)}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:40px 0}
.hero-text h1{font-size:40px;line-height:1.15;margin:0 0 10px}
.hero-text p{color:var(--muted);margin:0 0 20px}
.hero-actions{display:flex;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--text);border:1px solid rgba(255,255,255,.12);transition:.2s;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--primary),#b86bff);border-color:transparent;box-shadow:0 8px 24px rgba(124,92,255,.25)}
.btn.secondary{background:linear-gradient(135deg,var(--secondary),#6cf0d2);border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;border-radius:10px}
.btn.xsmall{padding:6px 10px;border-radius:8px}

.hero-img{aspect-ratio:16/10;object-fit:cover}

.funky-frame{
  border:8px solid transparent;
  border-image: conic-gradient(from 0deg,var(--primary),var(--accent),var(--secondary),var(--primary)) 1;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  border-radius:20px;
  outline:1px dashed rgba(255,255,255,.12);
  outline-offset:6px;
}

.features .card,.info,.form-card,.post-card,.article,.team-card,.cta-box{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.card-img{height:240px;object-fit:cover;border-radius:16px}
.card h3{margin:12px 0 8px}
.card .link{color:var(--secondary);text-decoration:none;font-weight:600}

.mistakes{padding:20px 0}
.mistakes h2{margin-bottom:8px}
.mistakes-list{margin:0;padding-left:18px;color:var(--muted)}

.cta-wide .cta-box{display:flex;align-items:center;justify-content:space-between;gap:16px;border-left:6px solid var(--secondary)}
.info-cards .info{min-height:150px}

.blog-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:24px 0}
.post-cover{width:100%;height:auto;border-radius:16px}
.post-meta{color:var(--muted);font-size:.95rem;margin:12px 0}
.sidebar{position:sticky;top:90px;height:max-content}
.sidebar .post-links{list-style:none;margin:0;padding:0}
.sidebar .post-links li{margin:10px 0}
.sidebar .post-links a{text-decoration:none;color:var(--text)}
.sidebar .post-links a:hover{color:var(--secondary)}

.article{padding:24px;margin:24px 0}
.article-head h1{margin:12px 0}
.article .article-meta{color:var(--muted)}

.post-nav{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}

.about-hero{padding:24px 0}
.team{margin:12px 0}
.team-card img{border-radius:16px;object-fit:cover}

.contact .form-card label{display:block;margin-bottom:12px}
.form-card input,.form-card textarea{
  width:100%;padding:12px;border-radius:12px;background:#0d0f14;border:1px solid rgba(255,255,255,.12);color:var(--text);
}
.form-card input:focus,.form-card textarea:focus{outline:2px solid var(--ring);border-color:transparent}
.chk{display:flex;align-items:center;gap:10px}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:10px 0;color:var(--muted)}
.ico{display:inline-flex;width:18px;height:18px;vertical-align:middle;margin-right:8px}
.ico.pin{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/></svg>') center/contain no-repeat;mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/></svg>') center/contain no-repeat}
.ico.phone{background:linear-gradient(135deg,var(--secondary),var(--primary));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.31.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1c0 1.27.2 2.47.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z\'/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.31.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1c0 1.27.2 2.47.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z\'/></svg>') center/contain no-repeat}
.ico.mail{background:linear-gradient(135deg,var(--accent),var(--secondary));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M12 13 2 6.76V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.76L12 13zM12 11 22 4H2l10 7z\'/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23000\' d=\'M12 13 2 6.76V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.76L12 13zM12 11 22 4H2l10 7z\'/></svg>') center/contain no-repeat}

.site-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:20px;padding:24px 0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.foot-logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:8px 0}
.foot-links a{text-decoration:none;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.foot-links.legal a{color:#e7ecff}
.foot-links.legal a:hover{color:var(--secondary)}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#0b0d12;border-top:1px solid rgba(255,255,255,.12);padding:14px;display:none}
.cookie-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.cookie-link{color:var(--secondary);text-decoration:none}
.cookie-settings{width:100%;border-top:1px dashed rgba(255,255,255,.12);padding-top:10px;margin-top:6px}
.cookie-close{position:absolute;top:8px;right:12px;background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:100}
.modal .modal-content{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;min-width:300px;max-width:520px}

@media (max-width:980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr}
  .blog-layout{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .grid-2{grid-template-columns:1fr}
  .navbar .nav-links{display:none;position:absolute;right:16px;top:60px;background:#0d0f14;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;flex-direction:column}
  .nav-toggle{display:block}
  .navbar.open .nav-links{display:flex}
}