/* =============================================================
   PULSE — Monolith override layer for Trebots
   -------------------------------------------------------------
   Loads AFTER styles.css and overrides it. Nothing in styles.css
   is modified. To revert completely: delete the <link> to this
   file (and the Barlow Condensed font link) in index.html.

   The look is defined by three removals — no rounded corners,
   no glow, no gradients — plus condensed uppercase display type,
   a visible six-column grid, and hairline cell borders.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  --bg: #000000;
  --bg-2: #000000;
  --panel: transparent;
  --border: rgba(0, 229, 255, 0.24);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.60);
  --r: 0;

  /* neutralises every cyan→violet gradient into flat cyan */
  --violet: #00e5ff;

  --hair: rgba(255, 255, 255, 0.14);
  --hair-cy: rgba(0, 229, 255, 0.24);
  --grid: rgba(0, 229, 255, 0.075);
  --ao: #00131a;                    /* text on a cyan fill */
  --disp: "Barlow Condensed", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. GROUND + SIX-COLUMN GRID ---------- */
body { background: #000; }

body::before {
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 16.6666%),
    #000;
}
@media (max-width: 760px) {
  body::before {
    background:
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 33.3333%),
      #000;
  }
}

/* kill the ambient colour bands behind sections */
.who, .promise { background: none; }
.estimate-featured::before { background: none; }

/* ---------- 3. THE THREE REMOVALS ---------- */
/* Deliberately broad: this is what turns the site flat in one pass.
   Focus rings are restored in section 16. */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

/* gradient-filled text becomes solid cyan */
.grad,
.hero-title .hero-rotate,
.step-num,
.stat-num,
.est-amount {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* gradient-filled panels become flat */
.card-glow,
.card:hover .card-glow,
.founder-note::before,
.est-offer::after,
.card-invite,
.founding-offer {
  background: none !important;
}

/* ---------- 4. DISPLAY TYPE ---------- */
.hero-title,
.section-title,
.card h3,
.step h3,
.why-item h3,
.pkg-card h3,
.guarantee strong,
.trust-item strong,
.founder-meta strong,
.founding-copy h3,
.faq-item summary,
.chat-head-info strong,
.lang-card h3,
.legal h1,
.legal h2,
.brand-name,
.stat-num,
.est-amount,
.step-num,
.why-num {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.hero-title {
  font-size: clamp(2.9rem, 8.2vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin-bottom: 28px;
}
/* the outlined line — the signature move of this direction.
   Direct child only, so the rotating word inside .hero-rotate-line
   keeps its solid cyan fill. */
.hero-title > span:last-child {
  -webkit-text-stroke: 1px var(--cyan);
  color: transparent;
}

.section-title {
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  max-width: 18ch;
}

.card h3, .step h3, .why-item h3, .pkg-card h3 { font-size: 1.5rem; line-height: 1; }
.faq-item summary { font-size: 1.15rem; letter-spacing: 0.03em; }
.trust-item strong, .guarantee strong { font-size: 1.24rem; letter-spacing: 0.03em; }
.stat-num { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.86; }
.brand-name { letter-spacing: 0.18em; font-size: 1.35rem; }

/* section labels become mono ticks instead of pills */
.kicker,
.card-tag, .pkg-off, .pkg-badge, .founding-badge, .est-spotlight, .est-save-tag,
.hero-badge, .htag, .stack-track span, .stat-label, .trust-item span {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 400;
}
.kicker {
  border: 0;
  padding: 0;
  font-size: 0.68rem;
  color: var(--cyan);
  margin-bottom: 18px;
}
.why-num, .step-num {
  font-family: var(--disp);
  -webkit-text-stroke: 1px var(--cyan);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.step-num { font-size: 3.6rem; line-height: 0.8; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  font-family: var(--disp);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.13em;
  font-size: 1.02rem;
  border: 1px solid var(--cyan);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: none; }
.btn-primary { background: var(--cyan); color: var(--ao); }
.btn-primary:hover { background: #fff; border-color: #fff; color: #000; }
.btn-ghost { background: none; color: #fff; border-color: var(--hair); }
.btn-ghost:hover { background: none; border-color: #fff; color: #fff; }

/* ---------- 6. NAV ---------- */
.nav, .nav.scrolled {
  background: #000;
  border-bottom: 1px solid var(--hair-cy);
}
.brand-name { text-transform: uppercase; }
.brand-tag { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.nav-links a {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.nav-links a::after { background: var(--cyan); }
.lang-switch { background: none; border: 1px solid var(--hair); color: #fff; }
.lang-switch:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- 7. HAIRLINE CELL GRIDS ---------- */
/* Borders on the cells, collapsed with a -1px margin. A backdrop
   colour would be simpler, but it shows through as grey blocks
   wherever the last row is incomplete. */
.cards, .pkg-grid, .steps, .guarantees, .why-grid, .promise-grid {
  gap: 0;
  background: none;
  border: 0;
}
.card, .pkg-card, .step, .guarantee, .why-item {
  border: 1px solid var(--hair);
  margin: 0 -1px -1px 0;
  background: #000;
  transition: background 0.25s;
}
.card:hover, .pkg-card:hover, .step:hover, .guarantee:hover, .why-item:hover {
  transform: none;
  background: rgba(0, 229, 255, 0.06);
  border-color: transparent;
}
.pkg-popular { background: rgba(0, 229, 255, 0.05); }
.founder-note, .founding-offer { background: #000; border: 1px solid var(--hair); }

/* ---------- 8. TRUST BAR + STATS ---------- */
.trust-bar, .stats-strip {
  border-top: 1px solid var(--hair-cy);
  border-bottom: 1px solid var(--hair-cy);
  background: none;
}
.trust-item { border-left: 1px solid var(--hair); padding-left: 20px; }
.trust-item span, .stat-label { font-size: 0.66rem; color: var(--muted); }

/* ---------- 9. ESTIMATOR ---------- */
/* .est-grid is the two-column LAYOUT, not a panel. Giving it a border
   without padding pinned every label 1px off the edge. The form column
   and the result card are each their own cell instead - and the result
   card stays position:sticky, which an outer padded box would fight. */
.est-grid { background: none; border: 0; }
.est-controls {
  border: 1px solid var(--hair);
  background: rgba(0, 229, 255, 0.03);
  padding: clamp(22px, 2.6vw, 32px);
}
.est-result, .estimate-featured .est-result {
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid var(--hair);
}
.field input, .field textarea, .chat-input input {
  background: #000;
  border: 1px solid var(--hair);
  color: #fff;
}
/* background-color, NOT the background shorthand: the shorthand wipes
   the dropdown chevron that styles.css sets as a background-image,
   leaving 40px of reserved padding with nothing in it. */
.est-field select {
  background-color: #000;
  border: 1px solid var(--hair);
  color: #fff;
}

/* Field labels here were still sentence-case Inter while the contact
   form's were mono caps - same design, two label styles. */
.est-field > label {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

/* a label sat 8px under its box but 18px from the next group, so the
   groups read as one another's - widen the rhythm and the grouping
   becomes obvious */
.est-controls { gap: 26px; }
.est-field { gap: 11px; }
.est-addons { gap: 9px; }
.est-row { gap: 20px; }
.est-field select:focus, .field input:focus, .field textarea:focus {
  border-color: var(--cyan);
}
.est-amount { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9; }
.est-was { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.04em; }
.est-check { border: 1px solid var(--hair); background: #000; }
.est-check:hover { border-color: var(--cyan); }

/* ---------- 10. FAQ ---------- */
.faq-item { border: 0; border-bottom: 1px solid var(--hair); background: none; }
.faq-item summary::after { color: var(--cyan); }

/* ---------- 11. OFFER BAR + SECTION DIVIDERS ---------- */
.offer-bar { background: var(--cyan); color: var(--ao); border: 0; }
.offer-text, .offer-text strong, .offer-claim, .offer-close { color: var(--ao); }
.offer-bar .offer-spark { color: var(--ao); }
/* the section rule replaces the divider element — otherwise you get two lines */
.sec-divider { display: none; }
.section { border-top: 1px solid var(--hair-cy); }

/* ---------- 12. FORMS + NOTES ---------- */
.field label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-note { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; }

/* ---------- 13. FOOTER ---------- */
.footer { border-top: 1px solid var(--hair-cy); background: none; }
.footer-copy, .footer-legal a, .footer-social a {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 14. CHAT WIDGET ---------- */
.chat-fab { background: var(--cyan); color: var(--ao); border: 0; }
.chat-panel, .chat-head, .chat-input { background: #000; border-color: var(--hair); }
.chat-chip { background: none; border: 1px solid var(--hair); }
.chat-chip:hover { border-color: var(--cyan); }
.msg.bot { background: rgba(255, 255, 255, 0.05); }
.msg.user { background: var(--cyan); color: var(--ao); }
.chat-input button { background: var(--cyan); color: var(--ao); }

/* ---------- 15. LANGUAGE MODAL ---------- */
.lang-card { background: #000; border: 1px solid var(--hair-cy); }

/* ---------- 16. FOCUS (restored after the global flatten) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- 17. HINDI FALLBACK ----------
   Barlow Condensed carries no Devanagari, and condensed uppercase
   is unreadable in Devanagari anyway. In Hindi, headings drop back
   to a normal-width face at normal case. */
html[lang="hi"] .hero-title,
html[lang="hi"] .section-title,
html[lang="hi"] .card h3,
html[lang="hi"] .step h3,
html[lang="hi"] .why-item h3,
html[lang="hi"] .pkg-card h3,
html[lang="hi"] .trust-item strong,
html[lang="hi"] .guarantee strong,
html[lang="hi"] .founding-copy h3,
html[lang="hi"] .faq-item summary,
html[lang="hi"] .lang-card h3,
html[lang="hi"] .chat-head-info strong,
html[lang="hi"] .btn,
html[lang="hi"] .nav-links a,
html[lang="hi"] .kicker {
  font-family: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
html[lang="hi"] .hero-title { font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.14; }
html[lang="hi"] .section-title { font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.2; max-width: 24ch; }
html[lang="hi"] .hero-title span:last-child { -webkit-text-stroke: 0; color: var(--text); }

/* ---------- 18. THIRD COLOURS ----------
   The direction runs on black, white and cyan only. These badges
   shipped in amber and violet, which read as a third and fourth
   colour and break the discipline. */
.pkg-off,
.pkg-badge,
.est-spotlight,
.est-save-tag,
.founding-badge,
.card-tag--accent {
  background: var(--cyan) !important;
  color: var(--ao) !important;
  border-color: var(--cyan) !important;
}
.pkg-off *, .est-spotlight *, .est-save-tag *, .card-tag--accent * { color: var(--ao) !important; }
.offer-spark, .pkg-offer-note .offer-spark, .est-spotlight .offer-spark { color: inherit !important; }
.pkg-offer-note { color: var(--cyan); }
/* this shipped as a cyan-to-violet gradient, which renders indigo -
   a third colour sitting in the middle of the results panel */
.est-offer {
  background: rgba(0, 229, 255, 0.10) !important;
  border: 1px solid var(--hair-cy) !important;
  color: var(--text);
}
.est-cur-opt.active { background: var(--cyan) !important; color: var(--ao) !important; }
.est-cur { border: 1px solid var(--hair); background: none; }

/* labels stack instead of colliding on one line */
.kicker, .est-spotlight { display: block; width: fit-content; }
.est-spotlight { margin-bottom: 16px; }

.card-invite { background: #000 !important; }
.portfolio-note { background: none !important; }

/* ---------- 19. EMOJI ICONS ----------
   The card icons are colour emoji — the one thing that can't be
   made to obey a two-colour palette. Replaced with mono index
   labels, matching the approved mockup.
   To bring the icons back: delete this block. */
.card-icon, .portfolio-note-ic { display: none; }

.services .cards { counter-reset: svc; }
.services .card::before {
  counter-increment: svc;
  content: "0" counter(svc);
  display: block;
  margin-bottom: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

/* ---------- 20. MOBILE ----------
   0.2em tracking on a long mono label is wider than a phone screen
   and drags the whole hero off the right edge. Tighten it there. */
@media (max-width: 760px) {
  .hero-badge {
    flex-wrap: wrap;
    white-space: normal;
    letter-spacing: 0.1em;
    font-size: 0.58rem;
    max-width: 100%;
  }
  .htag, .stack-track span { letter-spacing: 0.1em; font-size: 0.62rem; }
  .kicker { letter-spacing: 0.14em; }
  .trust-item span, .stat-label, .footer-copy, .footer-legal a { letter-spacing: 0.1em; }
  .field label { letter-spacing: 0.12em; }
  .btn { letter-spacing: 0.08em; font-size: 0.94rem; }
  .hero-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .section-title { max-width: none; }
  .hero-inner, .container { max-width: 100%; }
}

/* ---------- 21. MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .stack-track { animation: none; }
}

/* ---------- 22. ROTATING HERO WORD ----------
   It shipped travelling 0.55em with an 8px blur. At this line-height
   that carries it into the line above, and blurred display type reads
   as a rendering fault rather than a transition - which is what makes
   the hero look broken for the first second after a refresh. */
@keyframes pulse-word-out { to   { opacity: 0; transform: translateY(-0.2em); } }
@keyframes pulse-word-in  { from { opacity: 0; transform: translateY(0.2em); } }
.hero-rotate.word-out { animation: pulse-word-out 0.28s var(--ease) forwards; }
.hero-rotate.word-in  { animation: pulse-word-in 0.40s var(--ease); }
.hero-title .hero-rotate { filter: none !important; }
.hero-rotate-line { display: block; overflow: hidden; padding-bottom: 0.06em; }

/* a little more air between the display lines on phones, where the
   type is proportionally largest */
@media (max-width: 760px) {
  .hero-title { line-height: 0.95; }
}

/* ---------- 23. "WHO WE ARE" - THREE BEATS ----------
   One paragraph split into three panels, each with its own scene,
   alternating sides so the eye zig-zags down the section. */
.who-stack { display: block; }
.who-panel {
  display: grid;
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  padding: clamp(26px, 3.5vw, 46px) 0;
  border-top: 1px solid var(--hair);
}
.who-panel:first-of-type { border-top: 0; }
@media (min-width: 861px) {
  .who-panel { grid-template-columns: 1fr 1fr; }
  .who-panel:nth-of-type(even) .who-copy { order: 2; }
}
.who-panel .section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  max-width: 16ch;
  margin-bottom: 16px;
}
.who-panel .lede { margin-top: 0; }

.illu-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair);
  background: rgba(0, 229, 255, 0.02);
}
/* On a phone a 16:9 strip is mostly wasted width and no height. Go
   square and stay inside the container padding, so the canvas lines
   up with the text beside it. */
@media (max-width: 860px) {
  .illu-canvas { aspect-ratio: 1 / 1; }
}

/* ---------- 24. PORTFOLIO TAGS ----------
   These were pinned position:absolute to the card's top-right corner,
   which worked while a card icon pushed the title down. With the icons
   gone the title starts at the top and runs straight under the tag.
   Put the tag back in the flow as the label above the title - the same
   pattern as the services index labels. */
.card-tag,
.card-tag--accent,
.card-tag--lock {
  position: static;
  display: block;
  width: fit-content;
  margin: 0 0 14px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  white-space: nowrap;
}
.card-tag--lock { color: var(--muted) !important; }

/* ---------- 25. FAQ SCENE ----------
   Replaces the robot SVG that stood here. Square, and contained
   rather than full-bleed - it sits in a column beside the answers. */
.faq-canvas {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hair);
  background: rgba(0, 229, 255, 0.02);
}
@media (max-width: 860px) {
  .faq-canvas { max-width: 300px; }
}

/* ---------- 26. MOBILE FIXES ---------- */
@media (max-width: 860px) {
  /* The menu panel was pinned to a hardcoded `top: 60px`, which ignores
     the offer bar above the nav - measured, the nav actually ends at
     113px, so the panel opened 53px too high and sat under the header.
     Anchoring it to the nav itself survives the offer bar being
     dismissed and any change in nav height. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #000;
    border-bottom: 1px solid var(--hair-cy);
  }
  .nav-links a {
    font-family: var(--disp);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--hair);
  }
  /* stated explicitly here: the open state has to beat the closed
     rule after this layer re-declares .nav-links */
  .nav-links { transform: translateY(-135%); }
  .nav-links.open { transform: translateY(0); }

  /* `width: 100vw` includes the scrollbar, so full-bleed canvases
     pushed the document 8px wider than the viewport. Break out of the
     container padding instead - no viewport units involved. */
}