/* Gekko Desktop — link launcher. Built on Spectra DS tokens (indigo/azure/steel, light theme). */

@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap");

@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --indigo-600:#2b2c82;
  --indigo-100:#e4e5f7;
  --azure-600:#0084c8;
  --azure-500:#009fe3;
  --azure-100:#dcf1fc;
  --gold-700:#a9761c;
  --gold-100:#faf1d9;

  --paper:#f6f8fb;
  --white:#ffffff;
  --mist:#eef1f6;
  --steel-200:#cdd5e0;
  --steel-300:#aab4c4;
  --steel-400:#7e8aa0;
  --steel-500:#576078;
  --ink:#0e1324;

  --text-strong:var(--ink);
  --text-body:#252b3b;
  --text-muted:var(--steel-500);
  --text-faint:var(--steel-400);

  --font-display:"Exo 2","Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;

  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-pill:999px;

  --shadow-sm:0 1px 3px rgba(14,19,36,.08),0 1px 2px rgba(14,19,36,.04);
  --shadow-md:0 4px 12px rgba(14,19,36,.08),0 2px 4px rgba(14,19,36,.05);

  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;--dur-base:200ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.is-booting{overflow:hidden}

/* ---- boot sequence overlay ---- */
.boot-overlay{
  position:fixed;inset:0;
  z-index:1000;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  opacity:1;
  transition:opacity .65s var(--ease-standard);
}
.boot-overlay.is-hiding{opacity:0}
.boot-overlay__video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

.wrap{max-width:1200px;margin:0 auto;padding:var(--sp-2) var(--sp-6) var(--sp-2);min-height:100vh;display:flex;flex-direction:column}

/* ---- header ---- */
.header{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);
  padding-bottom:6px;
  border-bottom:1px solid var(--steel-200);
  margin-bottom:6px;
}
.header__brand{display:flex;align-items:center;gap:var(--sp-3)}
.header__logo-link{display:block;line-height:0}
.header__logo{height:65px;width:auto;display:block}
.header__meta{display:flex;align-items:center;gap:var(--sp-3)}
.header__clockwrap{text-align:right}
.header__greeting{font-size:.8125rem;color:var(--text-muted);margin:0 0 2px}
.header__clock{
  font-family:var(--font-display);
  font-variant-numeric:tabular-nums;
  font-size:1.125rem;
  font-weight:600;
  color:var(--gold-700);
  margin:0;
}

/* ---- tooltip (data-tooltip attr) ---- */
[data-tooltip]{position:relative}
[data-tooltip]:hover,
[data-tooltip]:focus-visible{z-index:100}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:100%;left:50%;
  transform:translate(-50%,6px);
  background:var(--white);
  color:var(--text-strong);
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:500;
  line-height:1.35;
  padding:6px 10px;
  border:1px solid var(--steel-200);
  border-radius:var(--r-sm);
  white-space:normal;
  width:max-content;
  max-width:200px;
  text-align:left;
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s var(--ease-standard), transform .15s var(--ease-standard);
  transition-delay:0s;
  z-index:100;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after{
  opacity:1;
  transform:translate(-50%,10px);
  transition-delay:.3s;
}

/* ---- category sections ---- */
.section{margin-bottom:4px}
.section__label{
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 var(--sp-1);
}

.icon-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}

.tile{
  width:82px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:4px var(--sp-1);
  border-radius:var(--r-md);
  border:1px solid transparent;
  text-decoration:none;
  color:inherit;
  text-align:center;
  transition:background var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.tile:hover{
  background:var(--white);
  border-color:var(--steel-200);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.tile:active{transform:translateY(0)}

.tile__icon{
  width:46px;height:46px;
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--azure-100);
  color:var(--azure-600);
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.tile__icon svg{width:23px;height:23px}
.tile__icon--brand{
  background:var(--white);
  padding:8px;
}
.tile__icon--brand svg{width:100%;height:100%}
.tile__icon--brand img{width:100%;height:100%;object-fit:contain;display:block}
.tile__title{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.6875rem;
  line-height:1.25;
  color:var(--text-strong);
}

/* footer */
.footer{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--steel-200);
  font-size:.75rem;
  color:var(--text-faint);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.footer a{color:var(--text-muted);text-decoration:none}
.footer a:hover{color:var(--text-strong)}