/* coteki static site v5 – professional IT-service look with real light/dark toggle */

:root{
  --radius: 16px;
  --radius2: 22px;
  --container: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Default: LIGHT */
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface2: #f0f3fa;
  --text: #0b1220;
  --muted: #55607a;
  --line: rgba(11,18,32,.10);
  --shadow: 0 10px 28px rgba(11,18,32,.08);
  --brand: #1d4ed8;
  --brand2: #0ea5e9;
  --brandText: #ffffff;
  --focus: 0 0 0 3px rgba(29,78,216,.22);
  --heroOverlay: rgba(246,247,251,.84);
  --headerBg: rgba(246,247,251,.78);
  --chip: rgba(29,78,216,.08);
}

/* DARK */
:root[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f1a2e;
  --surface2: #0c1628;
  --text: #e9eefc;
  --muted: #aab6d6;
  --line: rgba(233,238,252,.14);
  --shadow: 0 14px 46px rgba(0,0,0,.40);
  --brand: #38bdf8;
  --brand2: #a78bfa;
  --brandText: #07101f;
  --focus: 0 0 0 3px rgba(56,189,248,.28);
  --heroOverlay: rgba(11,18,32,.84);
  --headerBg: rgba(11,18,32,.68);
  --chip: rgba(56,189,248,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
    var(--bg);
  line-height:1.55;
}

a{color:inherit}
a:hover{opacity:.92}
img{max-width:100%;height:auto}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 12px;background:var(--surface);border-radius:12px;outline:none;box-shadow:var(--focus);z-index:9999}

.header{
  position:sticky;top:0;z-index:50;
  background: var(--headerBg);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand__mark{width:auto;height:40px;filter: drop-shadow(0 6px 18px rgba(0,0,0,.15))}

.nav-wrap{display:flex;align-items:center;gap:10px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--muted);text-decoration:none;font-weight:800}
.nav a:hover{color:var(--text)}

.nav__toggle{display:none;align-items:center;justify-content:center;gap:6px;flex-direction:column;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;opacity:.85}
.nav__toggle:focus{outline:none;box-shadow:var(--focus)}

/* Theme toggle (sun/moon) */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  cursor:pointer;
}
.theme-toggle:focus{outline:none;box-shadow:var(--focus)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: var(--brandText) !important;
  text-decoration:none;font-weight:950;
  box-shadow: 0 12px 22px rgba(0,0,0,.14);
  letter-spacing:.2px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btn--ghost{
  background: var(--surface);
  color: var(--text) !important;
  border:1px solid var(--line);
  box-shadow:none;
}
.btn--sm{padding:10px 12px;border-radius:12px;font-weight:950}

/* Hero */
.hero{padding:86px 0 62px}
.hero--image{position:relative}
.hero--image::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), var(--heroOverlay) 74%),
    var(--hero) center/cover no-repeat;
}
.hero--image > .container{position:relative}
.hero__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.hero__copy h1{font-size: clamp(34px, 4.1vw, 58px);line-height:1.03;margin:12px 0 14px;max-width:19ch}
.lead{font-size: clamp(16px, 1.65vw, 19px);color:var(--muted);max-width:68ch}
.pill{
  display:inline-flex;gap:10px;align-items:center;
  border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-weight:900;
}
.pill code{font-family:var(--mono);font-weight:900;background:var(--chip);padding:2px 8px;border-radius:999px;color:var(--text)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 16px}
.hero__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.meta-pill{
  font-size:12.5px;
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight:850;
}
.hero__visual{
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.hero__visual img{display:block;width:100%;height:440px;object-fit:cover}
.hero__visual .cap{padding:14px 16px;border-top:1px solid var(--line);color:var(--muted);font-weight:800}

/* Sections */
.section{padding:76px 0}
.section--alt{background: var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.section__head h2{margin:0;font-size:30px}
.muted{color:var(--muted)}
.tiny{font-size:12.5px}

.card, .tile{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:22px;
}
.tile{border-radius: var(--radius)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 18%, transparent), color-mix(in oklab, var(--brand2) 18%, transparent));
  border:1px solid color-mix(in oklab, var(--brand) 28%, var(--line));
  margin-bottom:12px;
}
.icon svg{width:20px;height:20px}
.card h3{margin:0 0 6px 0}
.card p{margin:0;color:var(--muted)}

.checks{margin:18px 0 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--muted)}
.checks--compact{gap:8px}
.checks li{position:relative;padding-left:28px}
.checks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background: var(--chip);border:1px solid color-mix(in oklab, var(--brand) 24%, var(--line));color:var(--brand);font-weight:950}

.kv{margin:14px 0 0 0;border-top:1px solid var(--line)}
.kv__row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.kv__k{min-width:120px}
.kv__k{color:var(--muted);font-weight:850}
.kv__v a{text-decoration:none;font-weight:950}

.split{
  display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch
}
.media{
  border-radius: var(--radius2);
  overflow:hidden;border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.media img{display:block;width:100%;height:380px;object-fit:cover}
.media .cap{padding:14px 16px;border-top:1px solid var(--line);color:var(--muted);font-weight:800}

.logorow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;opacity:.95}
.logorow img{height:34px;width:auto;filter: drop-shadow(0 8px 18px rgba(0,0,0,.10))}

.footer{padding:28px 0 40px;border-top:1px solid var(--line);background: var(--surface2)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer__left{display:flex;align-items:center;gap:12px}
.footer__logo{height:28px;width:auto;opacity:.95}
.footer__right{display:flex;gap:16px}
.footer a{color:var(--muted);text-decoration:none;font-weight:850}
.footer a:hover{color:var(--text)}

.prose{max-width:820px}
.prose h1{margin-top:0}
.prose h2{margin-top:26px}

@media (max-width: 980px){
  .hero{padding:70px 0 50px}
  .hero__grid{grid-template-columns:1fr}
  .hero__visual img{height:320px}
  .split{grid-template-columns:1fr}
  .media img{height:300px}
  .section__head{flex-direction:column;align-items:flex-start}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav__toggle{display:flex}
  .nav{
    position:fixed;right:16px;top:90px;
    width:min(360px, calc(100vw - 32px));
    flex-direction:column;align-items:stretch;
    padding:14px;
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity:0;pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav a{padding:10px 12px;border-radius:12px}
  .nav a.btn{margin-top:6px}
  .nav.is-open{opacity:1;pointer-events:auto;transform: translateY(0)}
  .brand__mark{height:36px}
}