/* ============================================================
   CrawlBit landing — v2 design language.
   Modeled on the scale/typography/neutrals Amine picked from the
   Lamatic GenAI reference: Inter Tight, huge negative-tracking
   headings, off-white page, white cards with hairline borders,
   ONE hot red accent, pill tags, generous radii and air.
   Rebuilt natively (no Webflow export): this file redefines the
   same class vocabulary landing.js injects (cbp-*, u-*, faq-*),
   so the page JS keeps working with minimal edits.
   ============================================================ */

:root {
  --bg:#F4F4F4; --paper2:#FFFFFF; --ink:#111418;
  --mut:#8B8C93; --deep:#646464; --line:#E3E3E3;
  --accent:#F33736; --accent-deep:#D92B2A; --accent-tint:rgba(243,55,54,0.08);
  --blue:#376CFB; --success:#12B615; --warn:#FFB800; --red:#F33736;
  --font-sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:16px; --radius-s:8px; --radius-pill:100px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
a { color:inherit; }
body.cbp-gridbg { background:var(--bg); }

/* ── Layout ── */
.cbp-container { max-width:1200px; margin:0 auto; padding:96px 24px; }
.cbp-section-narrow { max-width:760px; }
section { position:relative; }
.rot-a,.rot-b,.rot-c,.rot-d,.rot-e { transform:none; }

.cbp-head { margin-bottom:44px; }
.cbp-head .kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--deep);
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:7px 14px; text-transform:uppercase;
}
.cbp-head .kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.cbp-head .title {
  margin:18px 0 0; font-size:clamp(32px,4.4vw,46px); font-weight:600;
  letter-spacing:-1.4px; line-height:1.1; color:var(--ink);
}
.cbp-head.light .title { color:#fff; }
.cbp-head.light .kicker { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:rgba(255,255,255,0.7); }

.cbp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cbp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cbp-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cbp-hero-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; padding-top:72px; padding-bottom:64px; }
@media (max-width:980px){
  .cbp-grid-3 { grid-template-columns:1fr 1fr; }
  .cbp-grid-4 { grid-template-columns:1fr 1fr; }
  .cbp-hero-grid { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px){
  .cbp-grid-2,.cbp-grid-3,.cbp-grid-4 { grid-template-columns:1fr; }
  .cbp-container { padding:64px 18px; }
  /* Grid children keep min-width:auto by default: the mono terminal card's
     intrinsic width was stretching the whole page 21px past the viewport. */
  .cbp-hero-grid > *, .cbp-grid-2 > *, .cbp-grid-3 > *, .cbp-grid-4 > * { min-width:0; }
  .cbp-paper { max-width:100%; overflow-x:auto; }
}

/* ── Utilities (contract with landing.js) ── */
.u-flex { display:flex; } .u-flex-col { display:flex; flex-direction:column; }
.u-items-center { align-items:center; } .u-justify-between { justify-content:space-between; }
.u-gap-2 { gap:8px; } .u-gap-3 { gap:12px; } .u-gap-4 { gap:16px; }
.u-ml-auto { margin-left:auto; } .u-relative { position:relative; } .u-center { text-align:center; }
@media (max-width:760px){ .u-hide-mobile { display:none !important; } }

/* ── Nav ── */
.cbp-navpaper {
  background:rgba(244,244,244,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.cbp-navpaper a { text-decoration:none; }

/* ── Cards ── */
.cbp-paper {
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--radius);
}
.cbp-filecard { transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
.cbp-filecard:hover { border-color:#D4D4D4; box-shadow:0 14px 34px -14px rgba(17,20,24,0.14); transform:translateY(-2px); }
.cbp-tilt1,.cbp-tilt2 { transform:none; }

/* dark section (FAQ + footer) */
.cbp-darkpaper { background:#111418; color:#fff; }

/* blueprint canvas */
.cbp-blueprint {
  background-image:radial-gradient(rgba(17,20,24,0.07) 1px,transparent 1px);
  background-size:22px 22px; border-radius:var(--radius);
}

/* ── Buttons ── */
.cbp-sticker, .cbp-sticker-cyan, .cbp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:0;
  border-radius:var(--radius-s); cursor:pointer; text-decoration:none; white-space:nowrap;
  padding:0 22px; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.cbp-sticker, .cbp-sticker-cyan {
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  box-shadow:0 2px 10px -2px rgba(243,55,54,0.45);
}
.cbp-sticker:hover, .cbp-sticker-cyan:hover {
  background:var(--accent-deep); border-color:var(--accent-deep);
  transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(243,55,54,0.5);
}
.cbp-sticker:disabled { opacity:.75; cursor:default; transform:none; }
.cbp-btn { background:var(--paper2); color:var(--ink); border:1px solid var(--line); }
.cbp-btn:hover { border-color:var(--ink); }
.cbp-btn-dark { background:var(--ink); color:#fff; border:1px solid var(--ink); }
.cbp-btn-dark:hover { background:#000; }

/* ── Small labels / chips (JS contract) ── */
.cbp-mut { color:var(--mut); }
.cbp-strip {
  display:inline-flex; align-items:center; background:var(--paper2); color:var(--deep);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:10px; font-weight:600; letter-spacing:0.08em;
}
.cbp-stamp {
  font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--radius-pill);
  background:#EFEFEF; color:var(--deep);
}
.cbp-stamp.crit { background:var(--accent-tint); color:var(--accent-deep); }
.cbp-stamp.warn { background:rgba(255,184,0,0.14); color:#96700A; }
.cbp-marker { background:var(--mc,transparent); border-radius:4px; padding:0 3px; }
.cbp-dot { display:inline-block; border-radius:50%; background:var(--success); animation:lpPulse 2s ease-in-out infinite; }
.cbp-hand { font-family:var(--font-sans); font-weight:700; }

/* engine status tag (visibility panel) */
.cbp-tag { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--paper2);
  border-radius:var(--radius-pill); padding:3px 10px; }
.cbp-tag-mark { width:8px; height:8px; border-radius:50%; background:var(--mc,#D6D6D6); }
.cbp-tag-txt { font-size:11px; font-weight:600; color:var(--deep); }

/* progress bars */
.cbp-bar-track { height:8px; border-radius:99px; background:#ECECEC; overflow:hidden; }
.cbp-bar-fill { height:100%; border-radius:99px; }

/* dashed row */
.cbp-dashrow { border-bottom:1px dashed var(--line); padding:6px 0; }
.cbp-dashrow:last-child { border-bottom:none; }

/* ── Hero scan form ── */
.lp-scanform {
  display:flex; align-items:center; gap:8px; margin-top:36px; max-width:600px;
  background:var(--paper2); border:1px solid var(--line); border-radius:12px; padding:8px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lp-scanform:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); }
.lp-scanform input {
  flex:1; border:none; background:transparent; outline:none; min-width:0;
  font-family:var(--font-mono); font-size:14px; color:var(--ink); padding:12px 10px 12px 14px;
}
.lp-scanform input::placeholder { color:var(--mut); }
.lp-scanform .cbp-sticker { height:46px; }

/* hero title */
.lp-hero-title {
  margin:22px 0 0; font-size:clamp(42px,6.2vw,68px); font-weight:600;
  letter-spacing:-2.2px; line-height:1.04; color:var(--ink);
}
.lp-hero-title .hl { color:var(--accent); }
.lp-hero-sub { font-size:17px; line-height:1.65; color:var(--deep); margin:22px 0 0; max-width:560px; }

/* honest numbers strip */
.lp-stats { display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper2); }
.lp-stats .cell { flex:1; text-align:center; padding:34px 16px; border-right:1px solid var(--line); }
.lp-stats .cell:last-child { border-right:none; }
.lp-stats .n { font-size:clamp(30px,3.6vw,44px); font-weight:600; letter-spacing:-1.4px; color:var(--ink); line-height:1; }
.lp-stats .n em { color:var(--accent); font-style:normal; }
.lp-stats .l { font-size:13px; color:var(--mut); margin-top:8px; }
@media (max-width:640px){ .lp-stats { flex-direction:column; } .lp-stats .cell { border-right:none; border-bottom:1px solid var(--line); } }

/* field-notes hero card */
.lp-notes-head { display:flex; align-items:center; gap:8px; padding:0 18px; height:44px;
  border-bottom:1px solid var(--line); font-size:11px; color:var(--mut); }
.lp-notes-body { padding:14px 22px 18px; font-size:12.5px; line-height:2.1; min-height:210px; font-family:var(--font-mono); color:var(--ink); }

/* ── FAQ (dark section) ── */
.faq-item { border-bottom:1px solid rgba(255,255,255,0.10); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-size:16px; font-weight:500; color:#fff;
}
.faq-q .q-mark { color:var(--accent); margin-right:10px; font-weight:600; }
.faq-chev { color:rgba(255,255,255,0.45); transition:transform .2s; font-size:18px; }
.faq-a { overflow:hidden; max-height:0; transition:max-height .3s ease; }
.faq-a p { font-size:14px; line-height:1.7; padding:0 40px 22px 0; margin:0; color:rgba(255,255,255,0.62); }

/* ── Animations (JS contract) ── */
@keyframes lpPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes lpFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.cbp-breathe { animation:lpFloat 4.2s ease-in-out infinite; display:inline-flex; }
.cbp-spider { display:inline-flex; }
@keyframes lpLineIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.cbp-lineIn { animation:lpLineIn .4s ease both; }
@keyframes lpUnfold { from { opacity:0; transform:scale(.92) translateY(-4px); } to { opacity:1; transform:none; } }
.cbp-unfold { animation:lpUnfold .3s ease both; }
@keyframes lpHop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-9px); } }
.cbp-flipanim { animation:lpHop .55s ease; }
.m-flip { display:inline-block; } .m-face { display:inline-block; }
@keyframes lpBlink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.cb-cursor { animation:lpBlink 1.1s steps(1) infinite; }
@keyframes lpConfetti { to { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; } }
.cbp-confetti { position:absolute; border-radius:2px; animation:lpConfetti 1s ease-out forwards; }
@keyframes lpFlashRed { 0%,100% { color:inherit; } 50% { color:var(--accent); } }
.cb-flashRed { animation:lpFlashRed 2.4s ease-in-out infinite; }
.cb-flow { color:var(--mut); }
@media (prefers-reduced-motion:reduce){
  .cbp-breathe,.cbp-lineIn,.cbp-unfold,.cbp-flipanim,.cb-cursor,.cbp-confetti,.cb-flashRed,.cbp-dot { animation:none; }
}

::selection { background:var(--accent-tint); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }