/* ==========================================================
   HYTIX — Homepage

   Monochrome + coral, taken off the wordmark. Because coral is the only colour
   available, structure is carried by hairlines, grey steps and type weight
   rather than by tinted panels. Shadows are almost gone: a 1px line at the
   right grey does the job and keeps the page crisp instead of soft.

   Light-first, solid fills only. Section rhythm:
     hero        CREAM  (continuous with the strip and nav above it)
     marquee     WHITE  (flush under the hero — see the spacing note below)
     pillars     WHITE
     pricing     CREAM
     steps       WHITE
     features    DEEP   (the deeper tint, the page's one strong step)
     industries  WHITE
     ai          CREAM
     support     WHITE
     quotes      CREAM
     cta         INK    (the only dark band above the footer)
   ========================================================== */

/* ---------- HERO ----------
   Full-bleed photo hero: a festival crowd under stage light, not a studio
   shot in a card. A left-to-right + bottom scrim keeps the copy legible
   over the photo without a separate coloured panel. event-copy carries the
   pitch on the left; event-atmosphere carries the proof card and thumbnail
   over what's left of the photo on the right. */
.hero{
    position:relative; isolation:isolate; overflow:hidden;
    background:var(--ink); padding:68px 0 46px; color:#fff; min-height:700px;
  }

.event-background{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:65% center; z-index:-3;
  }

.hero::before{
    content:""; position:absolute; inset:0; z-index:-2;
    background:
      linear-gradient(90deg, rgba(11,12,22,0.98) 0%, rgba(11,12,22,0.9) 32%, rgba(11,12,22,0.55) 57%, rgba(11,12,22,0.12) 100%),
      linear-gradient(0deg, rgba(10,12,20,0.92), transparent 60%);
  }

.event-layout{
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,0.8fr);
    gap:56px; align-items:end; position:relative;
  }

.hero .eyebrow{color:#f4c4bd; letter-spacing:0.14em; font-size:11px;}

.hero .eyebrow::before{color:#ff5367;}

.hero h1{
    color:#fff; font-size:clamp(44px,4.9vw,70px); line-height:1.04;
    letter-spacing:-0.045em; max-width:12.8ch; margin-top:23px;
  }

.hero h1 em{color:#ff697b; font-style:normal;}

.hero p.sub{color:#e2e1e7; max-width:54ch; font-size:16px; line-height:1.75; margin-top:24px;}

.hero-ctas{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}

.hero-ctas .btn{padding:17px 26px; box-shadow:0 5px 24px rgba(255,69,84,0.17);}

.hero-ctas .btn.ghost{color:#fff; border-color:rgba(255,255,255,0.44); background:rgba(255,255,255,0.03); box-shadow:none;}

.hero-ctas .btn.ghost:hover{background:rgba(255,255,255,0.13); border-color:#fff;}

.hero-note{margin-top:17px; font-size:12px; color:#c7c5ce;}

/* checklist under the hero copy — the three things an organiser is scanning for */
.hero-checks{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:9px;}

.hero-checks li{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#eceaf0; line-height:1.6;}

.hero-checks .ic-check{width:15px; height:15px; color:#ff8a94; margin-top:3px; flex-shrink:0;}

/* ---------- HERO ATMOSPHERE ----------
   The right column over the photo: a one-line caption, then a proof card
   and a thumbnail side by side - both sit flush in the column now, not
   floating free over the image like the old light hero's overlays did. */
.event-atmosphere{padding-bottom:3px; min-width:0;}

.hero-photo-cap{margin-bottom:26px; color:#fff;}

.hpc-eyebrow{
    display:block; max-width:29ch; font-family:'JetBrains Mono',monospace;
    font-size:10px; font-weight:500; line-height:1.5; letter-spacing:0.13em;
    text-transform:uppercase; color:#e4e0e7;
  }

.hero-photo-cap p{
    margin:12px 0 0; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:30px; line-height:1.12; letter-spacing:-0.022em; color:#fff;
  }

.event-proof{display:grid; grid-template-columns:1.16fr 1fr; gap:12px; align-items:stretch;}

.hero-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    width:100%; padding:17px 14px;
    background:rgba(18,23,36,0.74); border:1px solid rgba(255,255,255,0.22);
    border-radius:var(--radius); backdrop-filter:blur(12px);
  }

/* a circle rather than a rounded square - the mark inside is already square,
   and squaring it twice made the tile read as a button */
.hc-icon{
    flex-shrink:0; border-radius:50%; padding:8px;
    background:rgba(255,89,108,0.14); color:#ff9aa5;
    display:flex; align-items:center; justify-content:center;
  }

.hc-icon svg{width:23px; height:23px;}

.hero-card strong{display:block; font-size:12px; line-height:1.5; color:#fff;}

/* scoped to the text span, for the same reason as .pp-foot below: the unscoped
   rule at (0,1,1) also matched <span class="hc-icon"> and beat its own (0,1,0),
   so the scan icon rendered muted grey, block-level and off-centre in its
   circle, with a stray 5px top margin. Same trap already fixed on .bo-tick. */
.hero-card > div > span{display:block; margin-top:5px; font-size:10px; color:#d0cdd7; line-height:1.5;}

.hero-thumb{
    position:relative; width:100%; max-width:none; height:auto;
    margin:0; padding:0; overflow:hidden;
    background:#101423; border:1px solid rgba(255,255,255,0.31); border-radius:10px;
  }

.hero-thumb picture{display:block; height:100%;}

.hero-thumb img{display:block; width:100%; height:100%; object-fit:cover; border-radius:0;}

/* the caption sits on photographic detail, so it needs its own scrim rather
   than relying on a text-shadow to carry it */
.hero-thumb::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:0;
    background:linear-gradient(transparent 35%, rgba(9,12,28,0.85));
  }

.hero-thumb figcaption{
    position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
    color:#fff; font-size:10px; font-weight:600; line-height:1.3;
    letter-spacing:0.002em; white-space:normal;
  }

.hero-strap{margin:14px 0 0; font-size:11px; color:#c6c4cd; text-align:right;}

/* ---------- MARQUEE ----------
   This sits flush under the hero. Its section carries .sec-flush (padding-top:0)
   because the section's own 80px top padding plus the track's spacing stacked
   into ~140px of dead band between the hero and the strip. */
.marquee-track{
    overflow:hidden;
    border-bottom:1px solid var(--line);
    padding:15px 0;
    margin:0 0 64px;
    background:var(--paper);
  }

.marquee-inner{display:flex; gap:44px; white-space:nowrap; animation:scroll 70s linear infinite; width:max-content;}

@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.marquee-inner span{
    font-family:'Archivo',sans-serif; font-weight:700; font-size:19px;
    color:var(--line2); letter-spacing:-0.02em;
  }

.marquee-inner span.hi{color:var(--coral); }

/* ---------- PILLARS ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

.pillar{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 26px; position:relative; overflow:hidden;
  }

.pillar::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--coral);}

.pillar .n{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:13px;
    letter-spacing:0.02em; color:var(--coral-deep); display:block; margin-bottom:16px;
  }

.pillar h3{font-size:21px; margin:0 0 12px;}

.pillar p{font-size:14.5px; line-height:1.65; color:var(--muted); margin:0;}

/* ---------- AI BAND ---------- */
.ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.ai-lead{font-size:17px; line-height:1.65; margin-top:16px; color:var(--muted);}

.ai-list{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px;}

.ai-list li{display:flex; gap:14px; align-items:flex-start;}

.ai-list .dot{width:8px; height:8px; border-radius:50%; background:var(--coral); margin-top:7px; flex-shrink:0;}

.ai-list h3{margin:0 0 4px; font-family:'Inter',sans-serif; font-size:15.5px; font-weight:700; color:var(--ink);}

.ai-list p{margin:0; font-size:14px; line-height:1.6; color:var(--muted);}

/* The setup-example card. Composition lifted from the alpha build - prompt,
   drafted answer, three checked results, draft label - rendered in our system:
   ink surfaces, coral for the assistant, mint for the all-clear checks. It
   stays the one dark object in the upper half of the page, which is what makes
   it read against the cream band. */
.ai-panel{
    background:var(--ink); border-radius:var(--radius); padding:26px 24px;
    box-shadow:0 24px 52px -36px rgba(11,11,12,0.5);
  }

.ap-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.10);
  }

.ap-brand{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14px;
    letter-spacing:0.01em; color:var(--paper);
  }

.ap-brand svg{width:17px; height:17px; color:var(--coral); flex-shrink:0;}

.ap-tag{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--paper-mute); white-space:nowrap;
    border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:4px 10px;
  }

.ap-prompt{
    margin:20px 0 0; padding:14px 16px; font-size:15.5px; line-height:1.6;
    color:var(--paper); background:var(--ink3);
    border-radius:var(--radius-sm); border-left:3px solid var(--coral);
  }

.ap-answer{display:flex; gap:12px; align-items:flex-start; margin-top:18px;}

.ap-avatar{
    flex-shrink:0; width:30px; height:30px; border-radius:50%;
    background:var(--coral); color:var(--paper);
    display:inline-flex; align-items:center; justify-content:center;
  }

.ap-avatar svg{width:16px; height:16px;}

.ap-answer strong{
    display:block; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:15.5px; line-height:1.4; color:var(--paper);
  }

.ap-answer p{margin:5px 0 0; font-size:13.5px; line-height:1.55; color:var(--paper-mute);}

.ap-results{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px;}

.ap-results li{
    display:flex; align-items:center; gap:11px;
    padding:12px 14px; font-size:14px; line-height:1.4; color:var(--paper-dim);
    background:var(--ink2); border:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-sm);
  }

.ap-results span{flex:1;}

.ap-results .ap-ic{width:17px; height:17px; flex-shrink:0; color:var(--paper-mute);}

.ap-results .ap-ok{width:16px; height:16px; flex-shrink:0; color:var(--mint-lite);}

.ap-draft{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap; margin-top:20px; padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.10);
  }

.ap-draft .ap-draft-label{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--mint-lite);
  }

.ap-draft span:last-child{font-size:12.5px; color:var(--paper-mute);}

/* ---------- SUPPORT ---------- */
.sup-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.sup-lead{font-size:17px; line-height:1.65; color:var(--muted); margin-top:16px;}

.sup-sub{font-size:15px; line-height:1.7; color:var(--muted); margin-top:18px;}

.sup-ctas{margin-top:26px;}

.sup-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
  }

.sup-stat{background:var(--paper); padding:28px 22px;}

.sup-stat .num{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:34px; color:var(--ink);
    letter-spacing:-0.03em; display:block; line-height:1;
  }

.sup-stat .lbl{font-size:13px; color:var(--muted); display:block; margin-top:8px; line-height:1.45;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1040px){
}

@media (max-width:900px){
  .marquee-track{margin-bottom:48px;}
  .ai-grid, .sup-grid{grid-template-columns:1fr; gap:40px;}
  .price-panel{grid-template-columns:1fr;}
  .pp-rate{border-right:none; border-bottom:1px solid var(--line);}
  .pillars{grid-template-columns:1fr;}
}

@media (max-width:640px){
}

/* ---------- HERO RESPONSIVE ----------
   Tuned to the photo and the proof card rather than the site's usual
   900/640 steps - the crop and the two-up proof row need their own points. */
@media (min-width:1001px){
  .hero{padding:44px 0 36px; min-height:590px;}
  .event-layout{grid-template-columns:minmax(0,1.55fr) minmax(0,0.85fr); gap:48px;}
  .hero h1{font-size:56px; max-width:none; margin-top:19px;}
  .hero p.sub{margin-top:20px;}
  .hero-checks{margin-top:18px;}
  .hero-ctas{margin-top:22px;}
}

@media (max-width:1000px){
  .event-layout{gap:32px; grid-template-columns:minmax(0,1.3fr) minmax(0,0.8fr);}
  .hero h1{font-size:53px;}
  .event-proof{grid-template-columns:1fr;}
  .hero-card{flex-direction:row; align-items:center;}
  .hero-thumb{height:120px;}
  .hero-photo-cap p{font-size:27px;}
}

@media (max-width:760px){
  .hero{padding:42px 0 30px; min-height:0;}
  .event-layout{grid-template-columns:1fr;}
  .event-background{object-position:65% top;}
  .hero::before{
    background:
      linear-gradient(180deg, rgba(12,13,24,0.91) 0%, rgba(12,13,24,0.86) 52%, rgba(12,13,24,0.33) 75%, rgba(12,13,24,0.85) 100%),
      linear-gradient(90deg, rgba(12,13,24,0.44), transparent);
  }
  .hero h1{font-size:clamp(28px,7vw,50px); max-width:100%; line-height:1.2;}
  .hero p.sub{font-size:14px; max-width:55ch;}
  .hero-checks li{font-size:12px;}
  .hero-ctas .btn{padding:15px 18px; font-size:12px;}
  /* the atmosphere column (caption + proof card + thumbnail) just repeats the
     headline's message over an already-busy photo on a phone - cut it and
     let the copy and the background photo carry the hero on their own */
  .event-atmosphere{display:none;}
}

/* ---------- PRICING PANEL ----------
   The alpha's two-panel arrangement - the rate in a tinted half, what you get in
   a white half - rebuilt on our tokens. The rate half is cream with a coral rule
   rather than their green; the badge, figure and processing line keep our type
   scale so it sits with the rest of the page rather than beside it. */
.price-panel{
    display:grid; grid-template-columns:0.94fr 1.06fr;
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
    box-shadow:0 26px 54px -40px rgba(21,19,26,0.4);
  }

.pp-rate{background:var(--cream2); padding:38px 36px 34px; border-right:1px solid var(--line);}

/* the badge sits alone here now - the region label came out, and the note under
   the panel is where the market is disclosed instead */
.pp-head{display:flex; align-items:center; justify-content:flex-start; gap:14px; flex-wrap:wrap;}

.pp-badge{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--coral-deep);
    background:var(--paper); border:1px solid var(--line2);
    border-radius:100px; padding:5px 11px; white-space:nowrap;
  }

.pp-figure{display:flex; align-items:baseline; gap:9px; margin-top:24px; flex-wrap:wrap;}

.pp-amt{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(44px,4.6vw,58px);
    line-height:0.9; letter-spacing:-0.035em; color:var(--ink);
  }

.pp-unit{font-size:14px; color:var(--muted);}

.pp-processing{
    display:block; margin-top:18px; padding-top:16px;
    border-top:1px dashed var(--line2);
    font-size:15.5px; font-weight:700; color:var(--coral-deep);
  }

.pp-rate > p{margin:12px 0 26px; font-size:14px; line-height:1.62; color:var(--body);}

.pp-rate small{display:block; margin-top:14px; font-size:12.5px; color:var(--muted);}

.pp-includes{padding:38px 36px 34px;}

.pp-includes h3{font-size:20px; margin:0 0 20px; letter-spacing:-0.015em;}

.pp-list{list-style:none; margin:0; padding:0; display:grid; gap:13px;}

.pp-list li{
    position:relative; padding-left:26px;
    font-size:14.5px; line-height:1.5; color:var(--body);
  }

.pp-list svg{position:absolute; left:0; top:3px; width:15px; height:15px; color:var(--mint);}

.pp-foot{
    display:flex; align-items:flex-start; gap:13px;
    margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  }

.pp-foot-ic{
    flex-shrink:0; width:38px; height:38px; border-radius:50%;
    background:var(--coral-tint); color:var(--coral-deep);
    display:flex; align-items:center; justify-content:center;
  }

.pp-foot-ic svg{width:19px; height:19px;}

.pp-foot strong{display:block; font-size:14.5px; color:var(--ink); letter-spacing:-0.008em;}

/* scoped to the text span inside the div: the unscoped `.pp-foot span` also
   matched .pp-foot-ic, and at (0,1,1) it beat that rule's own (0,1,0) - so the
   icon circle lost its display:flex and stopped centring its glyph, and picked
   up a 4px top margin that knocked it out of line with the heading. */
.pp-foot > div > span{display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--muted);}

.pp-note{
    max-width:72ch; margin:24px auto 0; text-align:center;
    font-size:13px; line-height:1.6; color:var(--muted);
  }

.pp-note a{color:var(--coral-deep); text-decoration:underline; text-underline-offset:2px;}

/* The pricing panel's responsive rules sit after its base rules rather than in
   the media query higher up the file: same specificity, so source order decides,
   and the base grid was winning. */
@media (max-width:900px){
  .price-panel{grid-template-columns:1fr;}
  .pp-rate{border-right:none; border-bottom:1px solid var(--line); padding:32px 28px 30px;}
  .pp-includes{padding:32px 28px 30px;}
  .pp-note{text-align:left;}
}