/* =============================
   Nyreth — Light UI (Cyan/Violet)
   Clean white + animated borders
   ============================= */

/* Brand palette + tokens */
:root{
  /* Brand core */
  --cyan-1:#00c3ff;
  --cyan-2:#68f5e6;
  --violet-1:#7f00ff;
  --violet-2:#e100ff;

  /* Neutrals */
  --bg:#ffffff;
  --bg-soft:#f7f8fb;
  --ink:#1f2937;
  --ink-muted:#586173;
  --ink-soft:#6b7280;
  --header-ink:#f6f7fb;
  --hairline:rgba(17,24,39,0.08);

  --radius:14px;
  --shadow:0 10px 28px rgba(17,24,39,0.06), 0 2px 8px rgba(17,24,39,0.04);

  /* animated border speed */
  --spin-dur:10s;
}

/* Animatable angle for conic gradients (supported in modern browsers) */
@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Global reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,195,255,0.06), transparent 60%),
    radial-gradient(1200px 600px at 120% 0%, rgba(225,0,255,0.05), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Header (rectangular gradient with subtle diagonal striping) ===== */
header{
  position:relative;
  isolation:isolate;
  text-align:center;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem 1.25rem;
  padding-right: 220px;
  background: var(--bg);
  overflow:hidden; /* keep overlays clipped */
}

/* Gradient text for the main title */
header h1{
  margin:0.25rem 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight:700;
  background: linear-gradient(90deg, var(--violet-1), var(--cyan-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Clearer muted color for subtitle */
header p{
  margin:0.5rem 0 0;
  color: var(--ink-muted); /* darker and more legible */
  font-weight:400;
}

/* Header hero controls */
:root{
  --hero-w: 120px;
  --hero-top: 12px;      /* move upward */
  --hero-right: 220px;    /* move rightward from edge */
  --hero-rotate: 0deg;
  --hero-opacity: 1;
}

.header-hero{
  position:absolute;
  top:var(--hero-top);
  right:var(--hero-right);
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-hero-btn{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  border-radius:14px;
}

.header-hero-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(127,0,255,.18),
    0 0 0 6px rgba(0,195,255,.14);
}
.header-hero-img{
  display:block;
  width:var(--hero-w);
  max-width:none;
  height:auto;
  border-radius:14px;
  border:1px solid var(--hairline);
  box-shadow:0 10px 24px rgba(17,24,39,0.08);
  background:#fff;
  opacity:var(--hero-opacity);
  transform:rotate(var(--hero-rotate));
}

.hero-blurb-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.22);
  backdrop-filter:blur(3px);
  z-index:1000;
}

.hero-blurb{
  position:fixed;
  top:110px;
  right:40px;
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(17,24,39,0.16);
  padding:1rem 1rem 1rem;
  z-index:1001;
}

.hero-blurb h3{
  margin:0 2rem .5rem 0;
  font-size:1.05rem;
  background:linear-gradient(90deg, var(--violet-1), var(--cyan-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-blurb-body{
  color:var(--ink);
  font-size:.92rem;
  line-height:1.5;
}

.hero-blurb-body p{
  margin:.65rem 0 0;
  color:var(--ink-soft);
}

.hero-blurb-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
}

.hero-blurb-close:hover{
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.hero-blurb-close:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(127,0,255,.18),
    0 0 0 6px rgba(0,195,255,.14);
}

/* Full-bleed color band */
header::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 75px; /* fixed strip height */
  z-index: -2;
  background: linear-gradient(
    115deg,
    var(--cyan-1) 0%,
    var(--violet-1) 35%,
    var(--violet-2) 65%,
    var(--cyan-2) 100%
  );
  border-radius: 0;
}

/* Logo pill in header (top-left), title/subtitle remain centered */
header .brand{
  position:absolute;
  top:12px;
  left:12px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--hairline);
  box-shadow:0 8px 18px rgba(0,0,0,0.04);
  text-decoration:none;
  color:#0b1220;
}
header .brand-badge{
  width:22px;
  height:22px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  background:conic-gradient(from 0deg, var(--cyan-1), var(--violet-1), var(--violet-2), var(--cyan-2), var(--cyan-1));
}
header .brand-badge::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:4px;
  background:#fff;
}
header .brand-text{
  font-weight:700;
  letter-spacing:.2px;
  font-size:.95rem;
}

/* Small-screen nudge so the logo doesn’t clash with centered text */
@media (max-width: 700px){
  header{
    padding-top: calc(1.5rem + 28px);
    padding-right: 1rem;
  }

  .header-hero{
    position:static;
    margin:.8rem auto .2rem;
    pointer-events:none;
  }

  .header-hero-img{
    width:min(100%, 110px);
  }
}



/* === Tunable stripe animation for the header band === */
:root{
  /* Speed & distance */
  --stripe-speed: 25s;         /* longer = slower */
  --stripe-shift: 320px;       /* how far the pattern slides */

  /* Look & direction */
  --stripe-angle: 128deg;      /* tilt of the stripes */
  --stripe-thickness: 12px;     /* bright line thickness */
  --stripe-gap: 22px;          /* gap between bright lines */
  --stripe-opacity: .75;       /* overall strength (0–1) */
}

header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:70px;
  z-index:-1; pointer-events:none;

  /* Layer 1: moving stripes (repeat) */
  /* Layer 2: static vertical fade (soft edges) */
  background-image:
    repeating-linear-gradient(
      var(--stripe-angle),
      rgba(255,255,255,0.045) 0 var(--stripe-thickness),
      rgba(255,255,255,0.00)  var(--stripe-thickness)
                              calc(var(--stripe-thickness) + var(--stripe-gap))
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.45) 18%,
      rgba(255,255,255,0.45) 82%,
      rgba(255,255,255,0.00) 100%
    );

  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;     /* animate only the first layer */
  background-blend-mode: soft-light, normal;

  opacity: var(--stripe-opacity);
  animation: stripesScroll var(--stripe-speed) linear infinite;
}

@keyframes stripesScroll{
  from { background-position:   0px 0, 0 0; }
  to   { background-position: var(--stripe-shift) 0, 0 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  header::after{ animation: none; }
}




/* ===== Tabs (role-based, matches your HTML) ===== */
nav[role="tablist"]{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  padding:.75rem 1rem 0;
  border-top:1px solid var(--hairline);
  background:transparent;
}
.tab{
  --pad-x:1.1rem;
  appearance:none; border:0; cursor:pointer;
  background: #fff;
  color: #334155;
  font-weight:600;
  padding:.7rem var(--pad-x);
  border-radius:999px;
  border:1px solid var(--hairline);
  box-shadow:0 6px 16px rgba(0,0,0,0.03);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.tab:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,0.06); }
.tab[aria-selected="true"]{
  background:linear-gradient(0deg, rgba(0,195,255,0.10), rgba(225,0,255,0.10));
  box-shadow:0 12px 28px rgba(0,195,255,0.12);
  color:#0b1220;
}

.tab-soon{
  color:#94a3b8;
  background:#f8fafc;
  border:1px solid rgba(17,24,39,0.10);
  box-shadow:none;
  opacity:.85;
}

.tab-soon:hover{
  transform:none;
  box-shadow:none;
  background:#f1f5f9;
}

.soon-msg{
  margin:.55rem auto 0;
  text-align:center;
  font-size:.88rem;
  color:var(--ink-soft);
  opacity:.9;
}



/* ===== Container ===== */
.container{ max-width: 1100px; margin: 1.25rem auto 5rem; padding: 0 1rem 4rem; }

/* ===== Panels with animated border aura ===== */
.panel{
  position:relative; margin:1rem auto 1rem; border-radius:var(--radius);
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              conic-gradient(from var(--angle),
                var(--cyan-1), var(--violet-1), var(--violet-2), var(--cyan-2), var(--cyan-1)
              ) border-box;
  border:2px solid transparent; box-shadow:var(--shadow);
  animation: spin var(--spin-dur) linear infinite;
  overflow:hidden;
}
.panel-inner{ padding:1.5rem 1.5rem 1.75rem; }
.panel h2{
  margin:0 0 .4rem;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  background: linear-gradient(90deg, var(--violet-1), var(--cyan-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.panel p{ margin:.35rem 0 0; color:var(--ink-soft); }

/* ===== Cards ===== */
.cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); margin-top:1rem; }
.card{
  background:#fff; border:1px solid var(--hairline); border-radius:12px; padding:1rem 1.1rem;
  box-shadow:0 10px 20px rgba(0,0,0,0.03);
}
.card strong{
  background: linear-gradient(90deg, var(--cyan-1), var(--violet-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Summary: only the "Summary" heading uses gradient color */
.summary-title{
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(90deg, var(--cyan-1), var(--violet-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.summary-body{
  margin-top: 8px;
  font-size: .92rem;
  color: var(--ink);
}

/* Summary metadata headings – darker, less distracting gradient */
.summary-body .sh{
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #1e3a8a,   /* deep blue */
    #5b21b6    /* deep violet */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.summary-body .mono{
  font-variant-numeric: tabular-nums;}

.summary-body .box{
  white-space: pre-wrap;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-soft);
  margin-top: 6px;
}


/* ===== Dropzone (optional utility classes) ===== */
.dropzone{
  position:relative;
  padding:28px 20px;
  border-radius:16px;
  border:2px dashed var(--hairline);
  background:var(--bg-soft);
  text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease, background .25s ease;
  cursor:pointer;
  outline:none;
}
.dropzone:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.dropzone:focus-visible{
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(127,0,255,.18), 0 0 0 6px rgba(0,195,255,.15);
}
.dropzone.active,
.dropzone:focus-within{
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    linear-gradient(90deg, var(--cyan-1), var(--violet-2)) border-box;
}
.dz-icon{ width:36px;height:36px;margin-bottom:8px; color:#6b7280; }
.dropzone.active .dz-icon{ color:#5b21b6; }
.dz-title{ margin:0; font-weight:700; color:#0b1220; }
.dz-sub{ margin:6px 0 10px; color:var(--ink-soft); }
.dz-browse{
  display:inline-block; padding:.6rem 1rem; border-radius:999px; font-weight:700;
  background:linear-gradient(90deg, var(--cyan-1), var(--violet-2)); color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.08); user-select:none;
}
.dz-browse:active{ transform:translateY(1px); }
.dz-hint{ margin:10px 0 0; font-size:.9rem; color:var(--ink-soft); }

/* ===== Helpers ===== */
.hidden{ display:none; }

/* ===== Animations ===== */
@keyframes spin { to { --angle:360deg; } }
@keyframes shift { to { background-position:200% 0%; } }
@keyframes bannerDrift { to { background-position:140px 0; } }

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  .panel{ animation:none !important; }
  header::after{ animation:none !important; }
}

/* ===== Responsive niceties ===== */

/* ===== Footer atmosphere ===== */

.footer-atmosphere{
  height: 280px;
  margin: 1.5rem 0 .25rem;
  background-image: url("/static/branding/123e2(s).png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 360px auto;
  opacity: .74;
  filter: grayscale(10%) blur(1px);
  pointer-events: none;
}


/* ===== Footer ===== */

.site-footer{
  position: relative;
  text-align:center;
  padding: 2.2rem 1rem 2.8rem;
  font-size:.5rem;
  color: var(--ink-soft);
  overflow:hidden;
  isolation:isolate;
}



.footer-inner{
  max-width: 900px;
  margin:0 auto;
  line-height:1.4;
  position:relative;
  padding-top: 1.1rem;
}

.footer-inner::before{
  content:"";
  display:block;
  width:min(1220px, 42vw);
  height:2px;
  margin:0 auto 1rem;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(0,195,255,0),
    rgba(0,195,255,.75),
    rgba(127,0,255,.78),
    rgba(225,0,255,.72),
    rgba(225,0,255,0)
  );
  box-shadow:
    0 0 10px rgba(0,195,255,.18),
    0 0 14px rgba(127,0,255,.10);
}

@media (max-width: 820px){
  .panel-inner{ padding:1.25rem; }
}

/* =========================
   Nyreth Demo (tab only)
   Scoped styles
   ========================= */
#tab-demo .demo-card strong{
  /* keep your brand feel but calmer than full gradient */
  background: linear-gradient(90deg, rgba(127,0,255,0.85), rgba(0,195,255,0.80));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#tab-demo .demo-summary{
  margin-top: .75rem;
  color: var(--ink);
  line-height: 1.55;
}

#tab-demo .demo-summary p{
  margin: .65rem 0 0;
  color: var(--ink-soft);
}

#tab-demo .demo-kicker{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  margin-right: 6px;
}

#tab-demo .demo-links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#tab-demo .demo-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .6rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: linear-gradient(90deg, rgba(0,195,255,0.10), rgba(225,0,255,0.10));
  color: #0b1220;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.03);
  transition: transform .12s ease, box-shadow .2s ease;
}

#tab-demo .demo-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

#tab-demo .demo-steps{
  margin: .65rem 0 0 1.2rem;
  color: var(--ink-soft);
}

#tab-demo .demo-steps li{
  margin: .3rem 0;
}

#tab-demo .demo-stage{
  margin-top: 8px;
  min-height: 180px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-soft);
}

.card small {
  font-size: 0.75rem;
  opacity: 0.8;
}