/*
  TIBYAN HERO (locked, approved "Concept D").
  Lifted from the approved tibyan-hero.html. Everything is scoped to .tb-hero so
  the site's global type, .mono and .eyebrow rules cannot alter it. Changes from
  the approved file are integration-only and marked "integration:".
*/
.tb-hero{
  --tb-canvas:#F3F3F3;--tb-paper:#FEFDFC;--tb-ink:#14151A;--tb-structure:#DFDFDF;
  --tb-structure-dashed:#C7C2BC;--tb-graphite:#5D5A58;--tb-graphite-light:#8A8580;
  /* integration: #8A8580 / #A7A29D are 3.4:1 / 2.3:1 on the canvas; this graphite passes 4.5:1 for the small eyebrow and Replay text */
  --tb-graphite-text:#6E6A66;
  --tb-crimson:#9D233B;--tb-ease:cubic-bezier(0.16,1,0.3,1);
  --tb-scale:1;
  position:relative;background:var(--tb-canvas);color:var(--tb-ink);
  font-family:'Instrument Sans','IBM Plex Sans Arabic',system-ui,sans-serif;line-height:normal;
  /* integration: scattered panels may travel past the viewport edge; never cause horizontal scroll */
  overflow-x:clip;
}
.tb-hero .mono{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace;line-height:normal;letter-spacing:normal}

/* ---------- CTAs ---------- */
.tb-hero .cta-primary{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--tb-ink);color:var(--tb-canvas);font-size:.875rem;font-weight:500;
  padding:10px 18px 10px 22px;cursor:pointer;
  transition:transform .25s var(--tb-ease),box-shadow .25s var(--tb-ease);
}
.tb-hero .cta-primary::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tb-crimson)}
.tb-hero .hero-copy .cta-primary{font-size:.9375rem;padding:16px 28px 16px 32px}
.tb-hero .hero-copy .cta-primary::before{width:4px}
.tb-hero .cta-secondary{
  cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:7px;
  padding-bottom:4px;font-size:.9375rem;font-weight:500;color:var(--tb-graphite);
  transition:color .25s var(--tb-ease);
}
.tb-hero .cta-secondary::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--tb-ink);transition:right .3s var(--tb-ease);
}
.tb-hero .cta-secondary .arrow{display:inline-flex;transition:transform .3s var(--tb-ease)}
/* integration: comfortable touch target without moving the underline */
.tb-hero .cta-secondary::before{content:'';position:absolute;inset:-12px -10px}
/* integration: hover only on hover-capable pointers (no sticky hover after a tap); keyboard focus gets the same treatment */
@media(hover:hover){
  .tb-hero .cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(20,21,26,0.35)}
  .tb-hero .cta-secondary:hover{color:var(--tb-ink)}
  .tb-hero .cta-secondary:hover::after{right:0}
  .tb-hero .cta-secondary:hover .arrow{transform:translateX(3px)}
  .tb-hero .replay-btn:hover{color:var(--tb-crimson)}
}
.tb-hero .cta-primary:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(20,21,26,0.35)}
.tb-hero .cta-secondary:focus-visible{color:var(--tb-ink)}
.tb-hero .cta-secondary:focus-visible::after{right:0}
.tb-hero .cta-secondary:focus-visible .arrow{transform:translateX(3px)}
/* integration: touch press states */
.tb-hero .cta-primary:active{transform:none;box-shadow:none;transition-duration:0ms}
.tb-hero .cta-secondary:active{color:var(--tb-crimson)}

/* ---------- VISUAL ---------- */
/* spacing: 40px shorter than the approved 580px so the CTA row sits closer to the fold; composition unchanged */
.tb-hero .hero-visual{height:540px;display:flex;align-items:center;justify-content:center;position:relative}
/* integration: .canvas-fit reserves the scaled footprint so the canvas can shrink to any width without overflow or layout shift */
.tb-hero .canvas-fit{width:calc(830px * var(--tb-scale));height:calc(410px * var(--tb-scale));flex:none}
.tb-hero .canvas{position:relative;width:830px;height:410px;transform:scale(var(--tb-scale));transform-origin:0 0}

.tb-hero .connectors{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s var(--tb-ease)}
.tb-hero .signal-dot{transition:fill .3s var(--tb-ease),r .3s var(--tb-ease)}

.tb-hero .bracket{position:absolute;width:16px;height:16px;opacity:0;transition:opacity .4s var(--tb-ease);border-color:var(--tb-crimson)}
.tb-hero .bracket-tl{left:328px;top:100px;border-top:2px solid;border-left:2px solid;border-radius:3px 0 0 0}
.tb-hero .bracket-tr{left:486px;top:100px;border-top:2px solid;border-right:2px solid;border-radius:0 3px 0 0}
.tb-hero .bracket-bl{left:328px;top:196px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 3px}
.tb-hero .bracket-br{left:486px;top:196px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 3px 0}

.tb-hero .next-action{
  position:absolute;left:508px;top:140px;display:flex;align-items:center;gap:6px;
  opacity:0;transform:translateY(4px);
  transition:opacity .45s var(--tb-ease),transform .45s var(--tb-ease);
}
.tb-hero .next-action span{font-size:9.5px;letter-spacing:0.08em;color:var(--tb-ink)}

.tb-hero .replay-btn{
  position:absolute;right:0;bottom:0;
  font-family:'Instrument Sans','IBM Plex Sans Arabic',sans-serif;background:none;border:none;padding:0;
  font-size:.6875rem;font-weight:500;letter-spacing:0.02em;color:var(--tb-graphite-text);
  display:flex;align-items:center;gap:6px;cursor:pointer;
  transition:color .2s var(--tb-ease);
}
/* integration: Replay keeps its approved 11px size when the canvas is scaled down on small screens */
.tb-hero .replay-btn{transform:scale(calc(1 / var(--tb-scale)));transform-origin:100% 100%}
/* integration: invisible 44px-class hit area for touch, without moving the label */
.tb-hero .replay-btn::after{content:'';position:absolute;inset:-14px -12px}
.tb-hero .replay-btn:focus-visible{color:var(--tb-crimson);outline-offset:6px}
.tb-hero .replay-btn:active{color:var(--tb-crimson)}

.tb-hero .panel-grid{display:grid;grid-template-columns:repeat(5,150px);grid-auto-rows:92px;gap:20px;position:relative}
.tb-hero .panel{
  display:flex;align-items:center;justify-content:center;
  width:150px;height:92px;border-width:1.5px;border-style:solid;border-color:var(--tb-structure);
  border-radius:10px;background:var(--tb-paper);color:var(--tb-graphite-light);
  transition:transform .7s var(--tb-ease),background .4s var(--tb-ease),border-color .4s var(--tb-ease),opacity .4s var(--tb-ease),box-shadow .5s var(--tb-ease);
}
.tb-hero .panel-icon{display:flex;flex-direction:column;align-items:center;gap:5px}
/* integration: text-align lets labels wrap inside their panel when text is enlarged */
.tb-hero .panel-label{font-size:9.5px;letter-spacing:0.08em;color:var(--tb-graphite-light);opacity:0;transition:opacity .45s var(--tb-ease);text-align:center}
.tb-hero .icon-check{display:none}
.tb-hero .icon-check .panel-label{color:#FFFFFF}
/* integration: used once on first load so the resting scatter state is applied without animating into it */
.tb-hero .is-instant *{transition:none!important}

/* ---------- COPY ---------- */
/* Homepage type system: the headline resolves from quiet to ink, as the canvas resolves scattered work into a decision.
   Copy is unchanged; sizes are in rem so they follow the reader's text-size setting. */
.tb-hero .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 96px 112px 96px}
.tb-hero .hero-copy .eyebrow{font-size:.75rem;letter-spacing:0.08em;color:var(--tb-graphite-text);margin:0 0 24px 0;text-transform:none}
.tb-hero .hero-copy h1{
  font-size:clamp(2.25rem,1.25rem + 3.2vw,3.75rem);font-weight:500;line-height:1.08;letter-spacing:-0.026em;
  max-width:none;color:var(--tb-ink);margin:0;text-wrap:balance;
}
.tb-hero .hero-copy h1 .t-quiet{color:#7D7873}
.tb-hero .hero-copy .subhead{font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.6;color:var(--tb-graphite);max-width:36rem;margin:28px 0 0 0;text-wrap:pretty}
.tb-hero .hero-copy .cta-row{display:flex;align-items:center;gap:36px;margin-top:36px;
  /* integration: wraps (centred) only when both CTAs cannot share a line */
  flex-wrap:wrap;justify-content:center;row-gap:20px}
.tb-hero .hero-copy h1 .t-quiet,.tb-hero .hero-copy h1 .t-line{display:block;text-wrap:balance}
@media (max-width:1199px){.tb-hero .hero-copy{padding:16px 48px 96px}}
@media (max-width:959px){.tb-hero .hero-copy h1{max-width:34rem}}

/* ---------- responsive ---------- */
.tb-hero .connectors-narrow{display:none}
@media (max-width:900px){
  /* integration: the approved scale(0.62) left an 830px layout box (horizontal overflow at tablet and phone);
     the canvas now scales to the available width through --tb-scale instead */
  .tb-hero .hero-visual{height:auto;padding:48px 16px}
  .tb-hero .hero-copy{padding:8px 32px 88px}
}
/* integration: phone composition. Same panels, sequence and crimson logic, recomposed into a
   3 x 3 field so labels stay readable instead of shrinking the 5-column desktop canvas. */
@media (max-width:767px){
  .tb-hero .canvas{width:300px;height:252px}
  .tb-hero .canvas-fit{width:calc(300px * var(--tb-scale));height:calc(252px * var(--tb-scale))}
  .tb-hero .connectors-wide{display:none}
  .tb-hero .connectors-narrow{display:block}
  .tb-hero .panel-grid{grid-template-columns:repeat(3,84px);grid-auto-rows:62px;column-gap:24px;row-gap:16px}
  .tb-hero .panel{width:84px;height:62px;border-radius:9px}
  .tb-hero .panel[data-i="1"]{grid-area:1/1}.tb-hero .panel[data-i="2"]{grid-area:1/2}.tb-hero .panel[data-i="3"]{grid-area:1/3}
  .tb-hero .panel[data-i="5"]{grid-area:2/1}.tb-hero .panel[data-i="7"]{grid-area:2/2}.tb-hero .panel[data-i="9"]{grid-area:2/3}
  .tb-hero .panel[data-i="0"]{grid-area:3/1}.tb-hero .panel[data-i="4"]{grid-area:3/3}
  .tb-hero .panel:is([data-i="6"],[data-i="8"],[data-i="10"],[data-i="11"],[data-i="12"],[data-i="13"],[data-i="14"]){display:none}
  .tb-hero .panel-icon{gap:4px}
  .tb-hero .panel-icon svg{width:19px;height:19px}
  .tb-hero .panel-label{max-width:81px;line-height:1.25;font-size:10.25px;letter-spacing:.05em}
  .tb-hero .bracket{width:12px;height:12px}
  .tb-hero .bracket-tl{left:100px;top:70px}.tb-hero .bracket-tr{left:188px;top:70px}
  .tb-hero .bracket-bl{left:100px;top:136px}.tb-hero .bracket-br{left:188px;top:136px}
  .tb-hero .next-action{left:108px;top:166px;width:84px;flex-direction:column;justify-content:center;gap:4px}
  .tb-hero .next-action svg{transform:rotate(90deg)}
  .tb-hero .hero-visual{padding:40px 16px 32px}
  .tb-hero .hero-copy{padding:8px 20px 80px}
}
/* integration: tablet readability. The desktop composition is kept at 768-1199px, but its labels are
   sized against the canvas scale so they render at 11.5px instead of shrinking to ~8px. 1200px+ is untouched. */
@media (min-width:768px) and (max-width:1199px){
  .tb-hero .panel-label,.tb-hero .next-action span{font-size:calc(11.5px / var(--tb-scale));line-height:1.2}
  .tb-hero .panel-label{max-width:144px}
  .tb-hero .next-action{top:128px}
}
/* integration: first-paint fallbacks for --tb-scale; hero.js then sets the exact fit */
@media (max-width:862px){.tb-hero{--tb-scale:.86}}
@media (max-width:767px){.tb-hero{--tb-scale:1.1}}
@media (max-width:374px){.tb-hero{--tb-scale:1}.tb-hero .hero-visual{padding-inline:10px}}

@media (prefers-reduced-motion:reduce){
  .tb-hero .panel,.tb-hero .connectors,.tb-hero .bracket,.tb-hero .next-action,.tb-hero .signal-dot{transition:none!important}
}

/* integration: the approved hero sits on one continuous canvas with the navigation above it.
   The site header (transparent, unchanged) is the only thing above the hero, so the hero paints
   its canvas upward behind it. Panels still travel over the header area as in the approved file. */
.tb-hero::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:400px;background:var(--tb-canvas);pointer-events:none}