/* /public/ti.css  — Global styles (Black/White/#8f00ff) */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600;700&family=Staatliches&display=swap');

/* Color + spacing tokens */
:root{
  --black:#0a0a0a;         /* main site background */
  --ink:#e9eaf1;           /* body text on dark */
  --white:#ffffff;
  --muted:#a7acb7;         /* secondary text */
  --line:#1b1b1f;          /* borders on dark */
  --line-2:#24242a;
  --panel:#0f0f13;         /* cards on dark */
  --panel-2:#121217;
  --brand:#8f00ff;         /* purple */
  --brand-ink:#ffffff;

  --w:1920px;
  --r:.9rem; --r-sm:.6rem;

  --h1:clamp(2.6rem,4.5vw,4.2rem);
  --h2:clamp(1.7rem,3.2vw,2.5rem);
  --h3:1.25rem;

  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:var(--black);color:var(--ink)}
body{
  font-family:"Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:100%; object-fit:cover; display:block}
a{color:var(--brand)}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}

/* Headings */
.h1,.h2{
  font-family:"Staatliches", system-ui;
  letter-spacing:.015em;
}
.h1{font-size:var(--h1);line-height:1.02}
.h2{font-size:var(--h2);line-height:1.08}
.h3{font-size:var(--h3);font-weight:700}

/* Containers */
.wrap{max-width:var(--w);margin:0 auto;padding:2.2rem 1rem}
.band{background:var(--panel);border-block:1px solid var(--line); border-radius:24px;overflow:hidden;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}

/* Copy */
.copy{font-size:1.08rem;line-height:1.75;color:var(--ink);}
.muted{color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.25rem;border-radius:.8rem;
  text-decoration:none;border:2px solid transparent;
  font-weight:800;letter-spacing:.01em;transition:.18s ease;
}
.btn.primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 8px 22px rgba(143,0,255,.25)}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.ghost:hover{background:color-mix(in srgb, var(--brand) 12%, transparent)}
.btn.lg{padding:1.1rem 1.35rem}

/* Language toggle (use inside hero header) */
.toggle{display:inline-flex;border:1px solid #ffffff30;border-radius:.6rem;overflow:hidden}
.toggle button{padding:.45rem .85rem;background:transparent;border:none;color:#fff;cursor:pointer}
.toggle button.active{background:#ffffff1a}
.toggle button:hover{background:#ffffff12}

/* HERO */
.hero{position:relative;color:#fff}
.hero__media{width:100%;height:70vh;min-height:520px;background:#000;display:grid;place-items:center;overflow:hidden}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 50% 20%, #8f00ff26 0%, transparent 60%),
  linear-gradient(180deg, #00000090 0%, #000 70%)}
.hero__inner{position:absolute;inset:0;display:grid;align-content:end;padding-bottom:1.6rem}
.hero__title,.hero__kicker,.hero__copy,.hero__cta,.hero__note{max-width:var(--w);margin:0 auto;padding:0 1rem; text-align:center;}
.hero__kicker{margin-top:.4rem;font-weight:700}
.hero__copy{margin-top:.6rem;color:#e7e7ef;max-width:90ch}
.hero__cta{margin-top:1rem;display:flex;gap:.85rem;flex-wrap:wrap}
.hero__note{margin-top:.75rem;color:#b9bdc8}

/* Top bar inside hero */
.brandline{
  max-width:var(--w);margin:0 auto;padding:1rem 1rem 0 1rem;
  display:flex;justify-content:space-between;align-items:center;color:#fff
}
.brandName{font-weight:900;letter-spacing:.02em}

/* Features (Why) */
.featuregrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:0;margin:0;     margin-top: 50px;}
.feature{
  display:flex;gap:.9rem;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:.7rem;padding:1rem;list-style:none;box-shadow:var(--shadow);
}
.feature__icon{flex:0 0 34px;height:34px;border-radius:.4rem;background:
  linear-gradient(135deg, var(--brand), #5c00b8)}
.feature__text{line-height:1.6;color:#d7d8dd}

/* Product stack (not a grid) */
.prodstack{display:grid;gap:5rem}
.prod{
  display:grid;gap:0;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--panel);
}
.prod__media{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--line-2); overflow:hidden;}
.prod__media .ph{aspect-ratio:16/9;background:#111}
.prod__media img{width:100%;height:110%;object-fit:cover}
.prod__body{display:grid;gap:.6rem;padding:1.1rem 1.2rem}
.prod__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.prod__title{margin:0}
.prod__use{margin:.2rem 0 0;color:var(--muted)}
.prod__sum{display:grid;gap:.4rem;margin-top:.4rem}
.prod__details{margin-top:.6rem;border-top:1px dashed var(--line-2);padding-top:.8rem;display:grid;gap:.35rem}
.prod__details ul{margin:.2rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem}
.prod__details li{list-style:disc}

/* Small “More” affordance */
.more{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--brand);cursor:pointer}
.more:hover{text-decoration:underline}

/* Mosaic blocks for lower sections */
.mosaic{display:grid;gap:0.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mosaic figure{margin:0;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;background:var(--panel)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic .ph{aspect-ratio:4/3;background:#131318}
.mosaic figcaption{padding:.65rem .8rem;font-size:.95rem;color:#cfd2db}

/* Tech list / config list */
.list{display:grid;gap:.45rem;margin:.6rem 0 0;padding-left:1.2rem}
.list li{list-style:disc}

/* Form */
.addr{font-style:normal;color:#e4e6ee; display:flex; justify-content: space-between;}
.lead{display:grid;gap:.7rem;max-width:560px}
.lead input,.lead textarea{
  padding:.95rem;border:1px solid var(--line);border-radius:.7rem;background:#0c0c0f;color:#fff
}
.lead input::placeholder,.lead textarea::placeholder{color:#7b7f88}
.lead input:focus,.lead textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.lead button{background:var(--brand);color:#fff;border:none;padding:1rem 1.1rem;border-radius:.7rem;font-weight:800}

/* Footer */
.foot{border-top:1px solid var(--line);background:#000; display:flex;}
.foot .inner{max-width:var(--w);margin:0 auto;padding:1.2rem;color:#7f8490}

/* Utility for missing media */
.is-missing{background:#0e0e10;display:grid;place-items:center;color:#777;font-size:.9rem;     border-radius: 12px;
    overflow: hidden;}
.hero {
  position: relative;
  overflow: hidden;
}
.hero__media {
  width: 100%;
  height: 60vh;
  min-height: 400px;
}
.hero__slider {
  display: grid;
  grid-template-columns: repeat(3, 100%);
  height: 100%;
      width: 100%;
    position: absolute;
    bottom: 0;
}
.hero__slider figure {
  margin: 0;
  position: relative;
}
.hero__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.2));
}
.hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem;
  max-width: 1100px;
      height: 60dvh;
  margin: 0 auto;
  color: #fff;
}
.brandline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align:center;
}
.brandName {
  font-weight: 800;
}
/* Collapsible details animation */
.prod__details {
  overflow: hidden;
  max-height: 0;
  opacity: .0;
  transition: max-height .32s ease, opacity .25s ease;
  will-change: max-height, opacity;
}
.prod__details.is-open {
  max-height: 1200px; /* large enough for content */
  opacity: 1;
}

/* Toggle button */
.more {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width:300px;
  font-weight: 700;
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
  border-radius: .5rem;
  padding: .55rem .85rem;
  cursor: pointer;
}
.more:hover { background: #e6f0f8; }
.more[aria-expanded="true"] { color:#fff; border-color:#ffffff; }

  /* Collapsible details animation */
  .prod__details{overflow:hidden;max-height:0;opacity:0;transition:max-height .32s ease, opacity .25s ease;will-change:max-height,opacity;}
  .prod__details.is-open{max-height:1200px;opacity:1;}

  /* === REVEAL ANIMATIONS (fade + slide) === */
  [data-reveal]{
    opacity:0; transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease;
    will-change:opacity, transform;
  }
  [data-reveal].is-revealed{
    opacity:1; transform:none;
  }

  .logo-link {
    position: fixed; left: 24px; top: 12px; z-index: 5;
    display: inline-grid; place-items:center; width: 40px; height: max-content;
    border-radius: 10px; 
    transition: transform .16s ease, background .16s ease;
  }
  .logo-link:hover { transform: scale(1.03); }
  .logo-link img { width: 40px; height: auto; display:block; }

  /* ===== Purple CTA band ===== */
.cta-band{
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
      height: 300px;
    display: flex
;
}
.cta-band__inner{
  max-width: var(--w);
  margin: 0 auto;
  padding: 1.6rem 1.2rem;
  display: grid;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 860px){
  .cta-band__inner{
    grid-template-columns: 3fr 2fr;
  }
}
.cta-band .h2{ color: var(--brand-ink); margin: 0; }
.cta-band .copy{ color: var(--brand-ink); margin: .3rem 0 0; }

/* Buttons on purple background */
.btn.on-purple{
  background: #ffffff;
  color: #111;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.btn.on-purple:hover{ filter: brightness(.97); }
.btn.on-purple.ghost{
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-ink);
  box-shadow: none;
}
.btn.on-purple.ghost:hover{
  background: color-mix(in srgb, #ffffff 14%, transparent);
}

/* CTA actions layout */
.cta-band__actions{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 859px){
  .cta-band__actions{ justify-content: center; }
  .cta-band__text{ text-align: center; }
}