/* ============================================================
   citu.ai landing — base styles
   Structure:
     1. Reset & body
     2. Layout (hero grid)
     3. Brand block (Geist)
     4. Phone (WhatsApp-faithful chat)
     5. Language toggle
   The waitlist component lives in waitlist.css.
   ============================================================ */

/* ---------- 1. Reset & body ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100svh}
body{
  font-family:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,40px);
  padding-top:max(clamp(40px,8vw,56px), env(safe-area-inset-top));
  padding-bottom:max(clamp(40px,8vw,56px), env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(37,99,235,.18) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(29,78,216,.10) 0%, rgba(29,78,216,0) 70%),
    var(--surface-base);
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:radial-gradient(circle at 30% 30%, rgba(59,130,246,.08), transparent 40%),
             radial-gradient(circle at 70% 70%, rgba(29,78,216,.06), transparent 40%);
  animation:drift 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(2%,-2%)}}

/* ---------- 2. Layout ---------- */
main{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1120px;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
  justify-items:center;
}
@media (min-width:920px){
  main{
    /* Two columns sized to their content, centered together as a unit. */
    grid-template-columns:auto auto;
    justify-content:center;
    gap:clamp(3rem,7vw,6rem);
  }
  .brand{justify-self:end;text-align:right;align-items:flex-end}
  .phone{justify-self:start}
}

/* ---------- 3. Brand block ---------- */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(.75rem,2.5vw,1.25rem);
  max-width:min(92vw,520px);
  text-align:center;
}
.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:stretch;        /* let byline span the full column width (= CITU width) */
  gap:.35rem;
}
h1{
  font-size:clamp(2.75rem,9vw,3.75rem);
  font-weight:600;
  letter-spacing:.12em;       /* roomy tracking on the all-caps wordmark */
  line-height:1.05;
  display:block;
  text-align:center;
  background:linear-gradient(180deg,var(--text-bright) 0%, var(--brand-lightest) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(37,99,235,.18));
}
.brand-byline{
  font-size:clamp(.7rem,1.5vw,.82rem);
  font-weight:400;
  color:var(--text-dim);
  /* Tracked uppercase that approaches but never exceeds CITU's width.
     The pyramid taper (CITU wider than byline) is intentional and reads
     as a refined wordmark + attribution pair. */
  letter-spacing:.18em;
  line-height:1.2;
  text-transform:uppercase;
  text-align:center;
  /* Tracked uppercase leaves a visual right-padding equal to the
     letter-spacing on the trailing letter; offset to recenter optically. */
  padding-left:.18em;
}
.brand-byline strong,
.brand-byline-link{
  font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .15s ease;
}
.brand-byline-link:hover,
.brand-byline-link:focus-visible{
  color:var(--brand-lighter);
  outline:none;
}
.pulse{
  position:relative;
  display:inline-block;
  width:.48em;
  height:.48em;
  border-radius:50%;
  background:var(--brand-primary);
  box-shadow:0 0 18px rgba(37,99,235,.7), 0 0 4px rgba(147,197,253,.9) inset;
  flex-shrink:0;
}
.pulse::after,.pulse::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(59,130,246,.6);
  animation:halo 2.6s cubic-bezier(.2,.6,.2,1) infinite;
}
.pulse::before{animation-delay:1.3s}
@keyframes halo{
  0%{transform:scale(1);opacity:.9}
  80%{opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
.divider{
  width:clamp(40px,8vw,72px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.7),transparent);
  opacity:.85;
}
.tagline{
  font-size:clamp(1.1rem,3vw,1.3rem);
  font-weight:400;
  color:var(--text-secondary);
  letter-spacing:.005em;
  line-height:1.45;
}
.tagline em{
  font-style:normal;
  color:var(--brand-lighter);
  font-weight:500;
  white-space:nowrap;
}

/* ---------- 4. Phone (WhatsApp-faithful) ---------- */
.phone{
  /* WhatsApp dark-mode palette is defined in tokens.css :root. */
  width:min(360px,92vw);
  height:min(620px,76svh);
  min-height:480px;
  background:var(--wa-bg-app);
  border:1px solid rgba(96,165,250,.12);
  border-radius:28px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:
    0 40px 100px -25px rgba(37,99,235,.35),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 60px rgba(37,99,235,.05);
  font-family:var(--wa-font);
}

.wa-header{
  flex-shrink:0;
  height:59px;
  background:var(--wa-bg-header);
  border-bottom:1px solid var(--wa-divider);
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 12px 0 10px;
  color:var(--wa-text);
}
.wa-back{width:24px;height:24px;color:var(--wa-text-secondary);flex-shrink:0}
.wa-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background-color:var(--surface-base);
  /* Official Citu mark — same SVG used as the favicon. */
  background-image:url('../favicon.svg');
  background-size:cover;
  background-position:center;
  box-shadow:0 0 10px rgba(37,99,235,.35), inset 0 0 0 1px rgba(96,165,250,.08);
}
.wa-id{display:flex;flex-direction:column;gap:1px;line-height:1.2;flex:1;min-width:0}
.wa-id .name{font-size:16px;font-weight:500;color:var(--wa-text);letter-spacing:-.005em}
.wa-id .status{font-size:13px;color:var(--wa-text-secondary);transition:color .2s ease}
.wa-id .status.typing{color:var(--wa-accent)}
.wa-actions{display:flex;align-items:center;gap:18px;color:#AEBAC1}
.wa-actions svg{width:22px;height:22px}

.wa-chat{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 7px 12px;
  display:flex;
  flex-direction:column;
  scroll-behavior:smooth;
  background-color:var(--wa-bg-chat);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='%23182229' fill-opacity='0.55'><circle cx='14' cy='14' r='1.5'/><circle cx='56' cy='32' r='1'/><circle cx='32' cy='58' r='1.2'/><circle cx='70' cy='70' r='1'/><circle cx='42' cy='10' r='.8'/><path d='M68 18l3 0 -1.5 -3z'/><path d='M10 70l3 0 -1.5 -3z'/></g></svg>");
  background-repeat:repeat;
}
.wa-chat::-webkit-scrollbar{width:0;background:transparent}
.wa-chat{scrollbar-width:none}

.row{display:flex;margin-top:2px}
.row.first{margin-top:10px}
.row.first:first-child{margin-top:0}
.row.in{justify-content:flex-start;padding-left:8px}
.row.out{justify-content:flex-end;padding-right:8px}

.bubble{
  position:relative;
  max-width:78%;
  padding:6px 9px 8px;
  border-radius:7.5px;
  font-size:14.2px;
  line-height:19px;
  color:var(--wa-text);
  box-shadow:var(--wa-shadow);
  word-wrap:break-word;
  animation:msgIn .15s ease-out both;
}
.row.in .bubble{background:var(--wa-bubble-in)}
.row.out .bubble{background:var(--wa-bubble-out)}
.row.in.first .bubble{border-top-left-radius:0}
.row.out.first .bubble{border-top-right-radius:0}

.tail{position:absolute;top:0;width:8px;height:13px;pointer-events:none}
.row.in.first .tail{left:-8px;color:var(--wa-bubble-in);transform:scaleX(-1)}
.row.out.first .tail{right:-8px;color:var(--wa-bubble-out)}
.row:not(.first) .tail{display:none}

.meta{
  float:right;
  margin:5px -4px -5px 6px;
  font-size:11px;
  line-height:15px;
  color:rgba(233,237,239,.6);
  display:inline-flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
}
.tick{
  width:16px;height:15px;flex-shrink:0;color:var(--wa-tick-default);
  transition:color .25s ease;
}
.tick.read{color:var(--wa-tick-read)}

.num{font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-bright)}
.pos{color:var(--semantic-success)}
.neg{color:var(--semantic-danger)}

.exec-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,168,132,.18);
  border:1px solid rgba(0,168,132,.4);
  color:var(--semantic-success);
  padding:2px 7px;border-radius:4px;
  font-size:11px;font-weight:500;
  margin-bottom:4px;
}
.exec-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#00A884;box-shadow:0 0 6px #00A884;
}

.typing-row{display:flex;justify-content:flex-start;padding-left:8px;margin-top:10px}
.typing-row.consec{margin-top:2px}
.typing-bubble{
  position:relative;
  background:var(--wa-bubble-in);
  padding:11px 14px;
  border-radius:7.5px;
  border-top-left-radius:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow:var(--wa-shadow);
  animation:msgIn .15s ease-out both;
}
.typing-bubble .tail{left:-8px;color:var(--wa-bubble-in);transform:scaleX(-1)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--wa-text-secondary);animation:tBounce 1.4s infinite ease-in-out}
.dot:nth-child(2){animation-delay:.16s}
.dot:nth-child(3){animation-delay:.32s}
@keyframes tBounce{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-6px);opacity:1}
}

.day-pill{
  align-self:center;background:rgba(31,44,51,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:8px;padding:5px 12px;
  font-size:12.5px;color:var(--wa-text);
  margin:6px 0 8px;
  letter-spacing:.02em;
}

.wa-input{
  flex-shrink:0;background:var(--wa-bg-header);
  padding:8px 10px;
  display:flex;align-items:center;gap:8px;
}
.wa-input .field{
  flex:1;
  min-width:0;            /* let it shrink inside the parent flex */
  height:42px;
  padding:0 14px;
  background:var(--wa-bg-input);border-radius:24px;
  color:var(--wa-text-secondary);font-size:15px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  transition:color .15s ease;
  overflow:hidden;
  white-space:nowrap;
}
.wa-input .field.typing{color:var(--wa-text)}
/* Inner scroller: holds the typed text + caret. JS applies translateX to
   shift it left as content exceeds the field, mirroring the way a native
   input scrolls horizontally to keep the cursor visible. */
.wa-input .field .field-scroll{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform .05s linear;
  will-change:transform;
}
.wa-input .field .typed{
  white-space:nowrap;
  flex-shrink:0;
}
.wa-input .field .caret{
  display:inline-block;
  width:1.5px;
  height:17px;
  background:var(--wa-accent);
  vertical-align:-3px;
  margin-left:1px;
  border-radius:1px;
  animation:caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink{50%{opacity:0}}
.wa-input .send{
  width:42px;height:42px;border-radius:50%;
  background:var(--wa-accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-bright);flex-shrink:0;
  transition:transform .12s ease;
}
.wa-input .send.flash{animation:sendFlash .35s ease-out}
@keyframes sendFlash{
  0%  {transform:scale(1);   box-shadow:0 0 0 0 rgba(0,168,132,.6)}
  40% {transform:scale(.88); box-shadow:0 0 0 8px rgba(0,168,132,0)}
  100%{transform:scale(1);   box-shadow:0 0 0 0 rgba(0,168,132,0)}
}
.wa-input .send svg{width:20px;height:20px}

@keyframes msgIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 5. Language toggle ---------- */
.lang-toggle{
  position:fixed;
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  z-index:10;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--text-muted);
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(96,165,250,.12);
  border-radius:999px;
  padding:.35rem .65rem;
}
.lang-btn{
  background:none;border:none;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;
  padding:.1rem .35rem;border-radius:999px;
  transition:color .15s ease, background .15s ease;
}
.lang-btn:hover{color:var(--text-secondary)}
.lang-btn.active{color:var(--brand-lighter);background:rgba(37,99,235,.15)}
.lang-sep{opacity:.4;font-size:.7rem}

/* ---------- Responsive tweaks ---------- */
@media (max-height:700px) and (min-width:920px){
  .phone{height:min(560px,80svh)}
}
/* Mobile: don't vertically center — the brand+chat stack is taller than the
   viewport, so vertical centering pushes the hero off the top. Anchor to
   top with generous padding instead. */
@media (max-width:919.98px){
  body{align-items:flex-start}
}
@media (max-width:600px){
  h1{letter-spacing:.04em}
  .phone{height:min(580px,72svh)}
  .lang-toggle{top:12px;right:12px;font-size:.72rem;padding:.3rem .55rem}
}
@media (prefers-reduced-motion:reduce){
  body::before,.pulse::before,.pulse::after,.dot{animation:none}
  .pulse::before,.pulse::after{opacity:0}
  .bubble,.typing-bubble{animation:none}
}