/* nitze.ai theme "default"
   Based on the Refero style "Default" (default.com): dark control room, frosted-glass cards,
   hairline borders, light headlines, one clear primary action.
   Brand accent (logo + status dot) stays orange; primary buttons are blue.
   To switch the design, add another file in /themes and point index.html at it. */

:root{
  /* surfaces */
  --void:#0b0c0e;          /* page canvas */
  --graphite:#131416;      /* cards, panels */
  --charcoal:#1f1f21;      /* nested surfaces */
  --soft:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --footer:#171717;

  /* text */
  --snow:#ffffff;
  --chalk:#cececf;
  --ash:#9d9e9f;
  --fog:#858687;
  --steel:#71717a;

  /* accents */
  --primary:#2563eb;       /* primary button */
  --primary-hover:#1d4ed8;
  --blue:#3b82f6;          /* mockup accents */
  --arc:#60a5fa;           /* links, icons, hover text */
  --ring:#93c5fd;          /* focus ring, card hover ring */
  --mint:#4ade80;          /* "Live" badge */
  --brand:#ff5900;         /* logo chevron, cursor, status dot */

  /* type */
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--snow);font-family:var(--f-body);font-size:15px;line-height:1.5;letter-spacing:-0.023em;font-feature-settings:"ss01","ss03","cv11";-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}

/* notice bar */
.notice{border-bottom:.5px solid var(--line);font-size:14px;color:var(--chalk)}
.notice .wrap{padding-block:10px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}
.notice a{color:var(--arc);text-decoration:none}
.notice a:hover{color:var(--ring)}

/* navigation */
.nav{position:sticky;top:0;z-index:10;background:rgba(11,12,14,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:.5px solid var(--line)}
.nav .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:8px;background:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 .5px var(--line-strong);color:var(--snow);border-radius:10px;padding:8px 13px 8px 11px;text-decoration:none;font-family:var(--f-mono);font-weight:700;font-size:16px;line-height:1;letter-spacing:-0.02em}
.logo svg{color:var(--brand);flex:none}
.logo i{font-style:normal;color:var(--fog)}
.logo b{width:8px;height:15px;background:var(--brand);border-radius:2px}
@media (prefers-reduced-motion:no-preference){.logo b{animation:blink 1.1s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}
.links{display:flex;align-items:center;gap:2px;font-size:14px}
.links a:not(.btn){text-decoration:none;color:var(--ash);padding:8px 12px;border-radius:10px;transition:color .15s,background-color .15s}
.links a:not(.btn):hover{color:var(--snow);background:var(--soft)}
.links a.path{font-family:var(--f-mono);font-size:13px;letter-spacing:0}

/* buttons: plain, flat, crisp. No gradients, no blurred shadows. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:8px;font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.btn.primary{background:var(--primary);color:#ffffff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.ghost{background:var(--soft);color:var(--snow);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}

/* hero */
.hero .wrap{padding-block:clamp(64px,10vw,120px) clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px 48px;align-items:end}
.kicker{grid-column:1/-1;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--fog);display:flex;align-items:center;gap:8px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(255,89,0,.18)}
.hero h1{font-size:clamp(42px,6vw,64px);line-height:.98;letter-spacing:-0.025em}
.hero h1 span{color:var(--fog)}
.hero .side{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero .lead{font-size:17px;line-height:1.5;color:var(--chalk);letter-spacing:-0.02em}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px}

/* sections */
section.block{padding-block:48px}
section.block + section.block{border-top:.5px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.sec-head .idx{font-family:var(--f-mono);font-size:12px;color:var(--fog);letter-spacing:.04em}
.sec-head h2{font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-0.021em;max-width:24ch}
.grid{display:grid;gap:12px}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* cards: glass edge instead of shadows */
.card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--graphite);border-radius:12px;padding:24px;text-decoration:none;color:var(--snow);min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 .5px var(--line);transition:box-shadow .2s ease,background-color .2s ease}
a.card:hover{background:#16171a;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 .5px rgba(147,197,253,.55),0 0 0 4px rgba(59,130,246,.12)}
.card h3{font-size:17px;line-height:1.3;font-weight:500;letter-spacing:-0.025em}
.card p{color:var(--ash);font-size:14px;line-height:1.5}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;color:var(--fog);letter-spacing:0;min-width:0}
.card .meta span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .go{margin-top:auto;padding-top:10px;font-size:13px;color:var(--chalk);display:inline-flex;align-items:center;gap:6px}
a.card:hover .go{color:var(--arc)}
.card .go svg{transition:transform .15s ease}
a.card:hover .go svg{transform:translateX(3px)}
a.card[aria-disabled="true"]{cursor:default}
.ph{color:var(--steel);font-style:italic}
.tile{width:40px;height:40px;border-radius:9px;background:var(--soft);box-shadow:inset 0 0 0 .5px var(--line-strong);display:grid;place-items:center;color:var(--arc);margin-bottom:6px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:5px;padding:2px 7px;font-family:var(--f-body);font-size:11px;font-weight:500;letter-spacing:0;color:var(--chalk);box-shadow:inset 0 0 0 .5px var(--line-strong)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--fog)}
.badge.live{color:var(--mint);box-shadow:inset 0 0 0 .5px rgba(74,222,128,.45);background:rgba(34,197,94,.08)}
.badge.live::before{background:var(--mint)}
.badge.beta::before{background:var(--arc)}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--arc)}

/* screenshot frame (placeholder mock or real image) */
.shot{border-radius:8px;background:var(--void);aspect-ratio:16/10;overflow:hidden;display:flex;flex-direction:column;margin:-10px -10px 6px;box-shadow:0 0 0 .5px var(--line-strong),0 12px 24px -12px rgba(0,0,0,.8)}
.shot .bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:.5px solid var(--line);font-family:var(--f-mono);font-size:10px;color:var(--steel);flex:none}
.shot .bar i{width:6px;height:6px;border-radius:50%;background:var(--charcoal)}
.shot .bar span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .body{flex:1;min-height:0;padding:12px;display:flex;flex-direction:column;gap:7px;transition:transform .5s ease;transform-origin:top center}
.shot.has-image .body{padding:0}
.shot.has-image img{width:100%;height:100%;object-fit:cover;object-position:top center}
a.card:hover .shot .body{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){a.card:hover .shot .body{transform:none}}
.l{height:6px;border-radius:3px;background:var(--charcoal)}
.l.hi{background:var(--chalk);opacity:.6;height:8px}
.l.blue{background:var(--blue);opacity:.75}
.row{display:flex;gap:7px}
.blk{flex:1;border-radius:5px;background:var(--graphite);box-shadow:inset 0 0 0 .5px var(--line);min-height:30px}
.blk.blue{background:rgba(59,130,246,.18);box-shadow:inset 0 0 0 .5px rgba(96,165,250,.45)}

/* contact + footer */
.cta{margin-block:24px 72px;background:var(--graphite);border-radius:16px;padding:clamp(28px,5vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 .5px var(--line-strong)}
.cta h2{font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-0.024em;max-width:18ch}
.cta .actions{display:flex;flex-wrap:wrap;gap:10px}
.foot{background:var(--footer);border-top:.5px solid var(--line)}
.foot .wrap{padding-block:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:12px;color:var(--fog)}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--snow)}

/* responsive */
@media (max-width:980px){
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .links a.hide-s{display:none}
}
@media (max-width:560px){
  .grid.four,.grid.three{grid-template-columns:1fr}
  .grid.three > :last-child{grid-column:auto}
}