/* UCOTIGA terminal interface — compact, readable and deliberately low-noise. */
:root {
  --ink: #e6ffe9;
  --muted: #9ab9a0;
  --dim: #5f7a63;
  --line: rgba(112, 255, 145, .18);
  --panel: rgba(4, 12, 7, .82);
  --blue: #8aff9e;
  --violet: #82ffb2;
  --magenta: #b7ff65;
  --green: #78ff9d;
  --radius: 14px;
}

body {
  color: var(--ink);
  background: #030704;
  font-family: "Space Grotesk", Arial, sans-serif;
}

.backdrop {
  background:
    radial-gradient(circle at 77% 8%, rgba(61, 255, 113, .14), transparent 26rem),
    radial-gradient(circle at 5% 67%, rgba(20, 138, 61, .13), transparent 31rem),
    linear-gradient(135deg, #020402 0%, #061108 49%, #030804 100%);
}

.backdrop::before {
  opacity: .4;
  background-image:
    repeating-linear-gradient(180deg, rgba(135, 255, 160, .09) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(110, 255, 142, .06) 0 1px, transparent 1px 48px);
  background-size: auto, 48px auto;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.backdrop::after {
  opacity: .28;
  background:
    linear-gradient(115deg, transparent 30%, rgba(111, 255, 148, .15) 30.05%, transparent 30.2%),
    linear-gradient(294deg, transparent 74%, rgba(170, 255, 107, .1) 74.05%, transparent 74.2%);
}

.grid {
  opacity: .22;
  background-image:
    linear-gradient(rgba(123, 255, 151, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 255, 151, .14) 1px, transparent 1px);
  background-size: 38px 38px;
}

.orb { filter: blur(112px); opacity: .12; }
.orb-one, .orb-two, .orb-three { background: #29db66; }
.beam { opacity: .42; background: linear-gradient(transparent, #72ff9a, transparent); }

.site-header {
  min-height: 60px;
  margin-top: 12px;
  padding-inline: 13px;
  border-color: rgba(119, 255, 149, .2);
  border-radius: 10px;
  background: rgba(3, 11, 6, .76);
  box-shadow: inset 0 1px rgba(213, 255, 218, .06), 0 13px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px);
}

.brand img {
  border-color: rgba(126, 255, 159, .43);
  border-radius: 9px;
  background: rgba(77, 255, 114, .06);
  box-shadow: 0 0 18px rgba(84, 255, 122, .12);
}

.brand strong { color: #eaffea; }
.brand small { color: #75a37c; }
.site-header nav { border-color: rgba(115, 255, 146, .16); border-radius: 8px; background: rgba(0, 0, 0, .2); }
.site-header nav a { border-radius: 6px; }
.site-header nav a:hover { color: #cbffd4; background: rgba(85, 255, 121, .1); }
.header-link {
  border-color: rgba(122, 255, 156, .4);
  border-radius: 8px;
  color: #dfffe5;
  background: rgba(80, 255, 116, .07);
  box-shadow: inset 0 0 18px rgba(92, 255, 127, .05), 0 0 18px rgba(71, 255, 111, .08);
}
.header-link span { color: #82ff9f; }

/* Desktop hero: deliberately narrower and shallower than the card catalogue. */
main > .hero.shell {
  width: min(900px, calc(100% - 48px));
  grid-template-columns: minmax(0, 1.12fr) minmax(190px, .5fr);
  min-height: 242px;
  gap: 28px;
  padding: 14px 0 16px;
}

.hero h1 {
  max-width: 11ch;
  color: #eaffed;
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.07em;
  text-shadow: 0 0 22px rgba(99, 255, 128, .13);
}

.hero em, .about em {
  color: #82ff9f;
  text-shadow: 0 0 20px rgba(94, 255, 129, .27);
}

.kicker { margin-bottom: 8px; color: #9fcdaa; font-size: 9px; }
.kicker i { background: #70ff96; box-shadow: 0 0 12px #64ff8d, 0 0 24px rgba(100, 255, 141, .34); }
.intro { max-width: 500px; margin-top: 11px; color: #a5c1aa; font-size: .84rem; line-height: 1.48; }
.hero-actions { margin-top: 15px; }
.button { min-height: 39px; border-color: rgba(113, 255, 147, .25); border-radius: 8px; font-size: 11px; }
.button::before { background: linear-gradient(110deg, transparent, rgba(112, 255, 145, .17), transparent); }
.button-primary { color: #051008; background: linear-gradient(110deg, #6fff95, #c8ff86); box-shadow: 0 8px 27px rgba(81, 255, 115, .16); }
.button-primary span, .button-quiet span { color: #4bc96f; }
.button-quiet { color: #cbf8d3; background: rgba(82, 255, 116, .045); }

.signal-panel {
  min-height: 166px;
  padding: 12px;
  border-color: rgba(121, 255, 153, .31);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(11, 43, 20, .85), rgba(2, 11, 6, .89));
  box-shadow: 0 19px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(223, 255, 227, .08);
}

.signal-panel::before {
  opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(128, 255, 156, .13) 0 1px, transparent 1px 4px);
}

.signal-panel::after {
  right: -27px;
  bottom: -31px;
  width: 132px;
  height: 132px;
  border-color: rgba(129, 255, 157, .26);
  box-shadow: 0 0 0 20px rgba(105, 255, 139, .045), 0 0 0 40px rgba(105, 255, 139, .025);
}

.panel-top { color: #a6d5b0; font-size: 8px; }
.panel-top b { color: #82ffa0; }
.panel-mark { border-color: #7dff9c; box-shadow: 0 0 11px rgba(108, 255, 141, .45); }
.signal-number { margin-top: 17px; color: #eaffeb; font-size: clamp(3.2rem, 4.1vw, 3.9rem); text-shadow: 0 0 27px rgba(95, 255, 128, .22); }
.signal-panel > p { margin-top: 5px; color: #a6c4ac; font-size: 10px; }
.signal-lines { right: 14px; bottom: 26px; height: 40px; gap: 4px; }
.signal-lines span { width: 4px; background: linear-gradient(#d8ffb0, #65ff91 53%, #19a847); box-shadow: 0 0 13px rgba(101, 255, 139, .48); }
.panel-foot { right: 12px; bottom: 9px; left: 12px; padding-top: 7px; border-color: rgba(119, 255, 149, .17); color: #5c8264; font-size: 7px; }
.panel-foot span:first-child { color: #9ecba7; }

.project-section { padding-top: 24px; }
.section-heading h2, .about h2 { color: #e8ffe9; }
.section-heading > p, .about > div p { color: #9ebba4; }
.project-card {
  --accent: #7fff9e;
  border-color: rgba(110, 255, 144, .19);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(7, 27, 13, .87), rgba(2, 10, 5, .9));
  box-shadow: inset 0 1px rgba(225, 255, 229, .055), 0 18px 42px rgba(0, 0, 0, .14);
}

.project-card::before { opacity: .17; background: radial-gradient(circle at var(--pointer-x, 48%) var(--pointer-y, 48%), #65ff8d 0, transparent 60%); }
.project-card::after { background: linear-gradient(155deg, rgba(168, 255, 182, .055), rgba(2, 11, 5, .03) 46%, rgba(174, 255, 104, .035)); }
.project-card:hover {
  border-color: rgba(132, 255, 161, .6);
  background: linear-gradient(145deg, rgba(10, 43, 20, .92), rgba(3, 14, 7, .94));
  box-shadow: 0 24px 55px rgba(0, 0, 0, .3), 0 0 31px rgba(80, 255, 117, .11), inset 0 1px rgba(225, 255, 229, .11);
}
.project-card:hover::before { opacity: .35; }
.feature-card { background: linear-gradient(145deg, rgba(10, 49, 23, .92), rgba(3, 15, 8, .95) 68%); border-color: rgba(121, 255, 153, .35); }
.feature-card .card-glow { background: rgba(84, 255, 122, .34); }
.index { color: #9ac7a3; }
.state { color: #94ffac; }
.state i { background: #70ff94; box-shadow: 0 0 11px #55f37b; }
.visual { border-color: rgba(123, 255, 155, .15); border-radius: 10px; background: rgba(0, 9, 4, .58); box-shadow: inset 0 0 30px rgba(88, 255, 120, .035); }
.card-copy h3 { color: #e6ffe8; }
.card-copy p { color: #a8c2ac; }
.card-copy li { border-color: rgba(104, 255, 141, .23); color: #d5ffdc; background: rgba(77, 255, 114, .07); }
.open-link { border-color: rgba(111, 255, 146, .24); border-radius: 8px; color: #e3ffe7; background: rgba(82, 255, 117, .04); }
.open-link:hover { background: linear-gradient(110deg, rgba(73, 255, 110, .16), rgba(195, 255, 108, .1)); }
.open-link span { color: #83ff9f; }
.crown, .worldcup, .wdv, .resume, .timer, .wienerlinien, .tigascore, .downloader, .gameoflife { --accent: #7fff9e; }

.about { border-color: rgba(116, 255, 149, .2); border-radius: 12px; background: linear-gradient(125deg, rgba(8, 39, 18, .66), rgba(2, 10, 5, .73)); box-shadow: inset 0 1px rgba(211, 255, 218, .05); }
.site-footer { color: #5c7b63; }
.site-footer a { color: #9bffaf; }

@media (max-width: 680px) {
  .shell { width: min(100% - 30px, 560px); }
  .site-header { min-height: 58px; margin-top: 8px; padding-inline: 10px; }
  .header-link { padding: 8px 10px; font-size: 10px; }

  main > .hero.shell {
    width: min(100% - 30px, 560px);
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 13px;
    padding: 15px 0 18px;
  }

  .hero h1 { max-width: 12ch; font-size: clamp(2rem, 8.7vw, 2.55rem); line-height: .96; }
  .kicker { margin-bottom: 7px; font-size: 8px; }
  .intro { max-width: 36ch; margin-top: 9px; font-size: .82rem; line-height: 1.46; }
  .hero-actions { margin-top: 13px; }
  .button { min-height: 41px; font-size: 10px; }
  .signal-panel { min-height: 133px; padding: 11px; }
  .signal-number { margin-top: 12px; font-size: 3.3rem; }
  .signal-panel > p { font-size: 9px; }
  .signal-lines { right: 13px; bottom: 23px; height: 34px; }
  .panel-foot { bottom: 8px; font-size: 6px; }

  .project-section { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-panel::after { animation: none; }
}