/* ==========================================================================
   Sensecast — design tokens, reset, typography, primitives
   Palette and type are taken from the app itself: lib/presentation/theme/
   app_theme.dart (#0F172A ground, #06B6D4 cyan) and the gold of the app icon.
   ========================================================================== */

:root{
  /* ground */
  --ink:#060A12;
  --ink2:#0A1120;
  --slate:#0F172A;        /* AppTheme.darkBackground */
  --slate2:#16213A;
  --line:#22304C;
  --line-soft:#1A2740;

  /* text */
  --paper:#E6EDF9;
  --haze:#8FA4C4;
  --haze-dim:#64789A;

  /* accents — the two halves of the app mark */
  --signal:#35D9F0;       /* the broadcast arcs */
  --signal-deep:#0E9FBA;
  --solar:#F5B93B;        /* the sun rays */
  --solar-deep:#C98A18;

  /* semantic */
  --alert:#F97316;
  --danger:#EF4444;
  --good:#4ADE80;

  /* type */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Archivo","Outfit",-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* fixed atmospheric ground: a low sun and a signal glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(53,217,240,.16), transparent 62%),
    radial-gradient(760px 520px at 6% 104%, rgba(245,185,59,.13), transparent 60%),
    linear-gradient(180deg,#0A1424 0%, var(--ink) 46%, var(--ink) 100%);
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--solar);outline-offset:3px;border-radius:3px}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

.disp{
  font-family:var(--disp);
  font-weight:700;
  font-variation-settings:"wdth" 115;
  letter-spacing:-.022em;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
}
.h1{font-size:clamp(40px,7.1vw,80px)}
.h2{font-size:clamp(30px,4.6vw,50px)}
.h3{font-size:clamp(24px,3.4vw,34px)}

.mono{font-family:var(--mono);font-weight:400}

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--signal);
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.eyebrow{flex-wrap:wrap;row-gap:6px}
.eyebrow.solar{color:var(--solar)}
.eyebrow.warn{color:var(--alert)}

.lede{color:var(--haze);font-size:clamp(17px,1.9vw,20px);line-height:1.66;margin:22px 0 0}
.prose{max-width:60ch}
.note{
  margin:16px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--haze-dim);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 22px;
  border-radius:10px;
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .16s,box-shadow .2s,background .2s,border-color .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--signal),var(--signal-deep));
  color:#04121A;
  box-shadow:0 6px 26px rgba(53,217,240,.24);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(53,217,240,.34)}
.btn-ghost{border-color:var(--line);color:var(--paper);background:rgba(22,33,58,.5)}
.btn-ghost:hover{border-color:var(--signal);background:rgba(22,33,58,.9)}
.btn-solar{background:linear-gradient(135deg,var(--solar),var(--solar-deep));color:#1A1204;box-shadow:0 6px 26px rgba(245,185,59,.22)}
.btn-solar:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(245,185,59,.3)}
.btn-sm{padding:9px 16px;font-size:11.5px}
.btn[disabled]{opacity:.55;pointer-events:none}

.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}

/* --------------------------------------------------------------------------
   Small shared bits
   -------------------------------------------------------------------------- */

.pro-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(53,217,240,.14);
  border:1px solid rgba(53,217,240,.35);
  color:var(--signal);
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  vertical-align:middle;
}
.free-tag{
  background:rgba(74,222,128,.12);
  border-color:rgba(74,222,128,.32);
  color:var(--good);
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.rv{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}