/* ═══════════════════════════════════════════════════════════════════════════════
   vijai-t2p.css · T2P PRODUCT LANDING · CR-48a, 8 October 2026.
   Loaded AFTER vijai-t2.css, which it extends. Nothing here restyles a locked
   component: the header, footer, ribbon, C14 band and standard band are untouched.

   THE BRIEF, CEO 8 Oct: "think like a marketing head and digital artist how to
   impress the buyer to fill the lead form. create an elegant and visually stunning
   landing page." The first version was structurally correct and visually flat ·
   a specification with a stylesheet on it.

   WHAT CHANGED, and why each one earns its place:
     · a cinematic hero carrying the detection animation, because the product is
       computer vision and every rival's hero is a stock photo of a hard hat
     · display type at 5.4vw, so the headline is the loudest thing on the screen
     · depth · layered radial glows, hairline gradient borders, grain, lift on hover
     · the accuracy figure as a 180px gradient numeral against a radial gauge
     · one accent only. Cyan. CR-45 · there is no green in this palette.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO · full-bleed, cinematic ────────────────────────────────────────────── */
.t2phero{position:relative;overflow:hidden;background:var(--ink);
  padding:clamp(80px,8vh,112px) 0 clamp(52px,6vh,80px);isolation:isolate}
.t2phero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:
    radial-gradient(58% 48% at 72% 24%, rgba(0,185,242,.17), transparent 68%),
    radial-gradient(44% 40% at 8% 76%,  rgba(0,116,166,.16), transparent 70%),
    radial-gradient(70% 55% at 50% 110%, rgba(240,165,0,.055), transparent 72%);
  z-index:-2;pointer-events:none}
.t2phero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(27,46,63,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,46,63,.42) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(76% 62% at 50% 34%, #000 0%, transparent 76%);
          mask-image:radial-gradient(76% 62% at 50% 34%, #000 0%, transparent 76%)}
.t2phero .w{position:relative;z-index:2}
.t2pgridh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.94fr);
  gap:clamp(32px,4vw,64px);align-items:center}

.t2pbadge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;
  border:1px solid rgba(0,185,242,.34);border-radius:100px;background:rgba(0,185,242,.07);
  font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cy);margin:0 0 22px;backdrop-filter:blur(6px)}
.t2pbadge i{width:6px;height:6px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 0 0 rgba(0,185,242,.65);animation:t2ppulse 2.4s infinite}
@keyframes t2ppulse{70%{box-shadow:0 0 0 9px rgba(0,185,242,0)}100%{box-shadow:0 0 0 0 rgba(0,185,242,0)}}

.t2phero h1{font-size:clamp(34px,3.75vw,54px);line-height:1.07;letter-spacing:-.035em;
  margin:0 0 18px;color:#fff;font-weight:700;text-wrap:balance}
.t2phero h1 em{font-style:normal;display:block;margin-top:2px;
  background:linear-gradient(104deg,var(--cy) 0%,#7FDBFF 46%,var(--cy) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t2plead{color:var(--dtx2);font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;
  max-width:50ch;margin:0 0 12px}
.t2plead b{color:#fff;font-weight:600}
.t2pterms{font:500 11.5px/1.6 "IBM Plex Mono",monospace;letter-spacing:.04em;
  color:var(--dtx3);margin:0 0 24px}
.t2pterms b{color:var(--cy);font-weight:600}

.t2pcta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px}
.t2pcta .ctarow{margin:0}
.t2phero .ctarow a,.t2phero .ctarow button{box-shadow:0 18px 44px rgba(0,185,242,.26)}
.t2ptrust{display:flex;flex-wrap:wrap;gap:0 26px;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(27,46,63,.9)}
.t2ptrust div{display:flex;flex-direction:column;gap:3px}
.t2ptrust b{font:700 21px/1 "DM Sans",system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
.t2ptrust span{font:500 10px/1.3 "IBM Plex Mono",monospace;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dtx3)}

/* the canvas · sits in a bezel so it reads as a screen, not a drawing */
.t2pstage{position:relative;border:1px solid rgba(0,185,242,.2);border-radius:18px;
  overflow:hidden;background:linear-gradient(160deg,#071320,var(--ink));
  box-shadow:0 44px 96px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset}
.t2pstage canvas{display:block;width:100%;height:auto}
.t2pstage{margin:0}
.t2pcap{margin:12px 2px 0;font:500 10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dtx3)}
.t2pscroll{display:flex;align-items:center;gap:9px;margin:30px 0 0;
  font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dtx3)}
.t2pscroll i{width:18px;height:28px;border:1px solid var(--line);border-radius:9px;position:relative}
.t2pscroll i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;
  margin-left:-1.5px;border-radius:2px;background:var(--cy);animation:t2pscr 1.9s infinite}
@keyframes t2pscr{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* ── shared · a hairline gradient edge, used on every card in the new sections ── */
.t2pcard{position:relative;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,var(--ink2),var(--ink));
  transition:border-color .35s,transform .35s,box-shadow .35s}
.t2pcard::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(150deg,rgba(0,185,242,.4),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.t2pcard:hover{transform:translateY(-5px);box-shadow:0 30px 64px rgba(0,0,0,.52)}
.t2pcard:hover::before{opacity:1}

/* ── 03 · THE PROBLEM ────────────────────────────────────────────────────────── */
.t2pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:30px 0 0}
.t2pp{position:relative;border:1px solid var(--line);border-radius:16px;
  padding:28px 26px 24px;background:linear-gradient(160deg,var(--ink2),var(--ink));
  transition:border-color .35s,transform .35s}
.t2pp:hover{border-color:rgba(240,165,0,.4);transform:translateY(-4px)}
.t2pp::before{content:"";position:absolute;left:26px;top:0;width:36px;height:2px;
  background:var(--amb)}
.t2pp b{display:block;color:#fff;font-size:19px;line-height:1.28;letter-spacing:-.02em;margin:0 0 9px}
.t2pp p{color:var(--dtx2);font-size:15px;line-height:1.64;margin:0}

/* ── 04 · PILLARS ────────────────────────────────────────────────────────────── */
.t2pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0 0}
.t2pil{position:relative;border:1px solid var(--line);border-radius:18px;
  padding:34px 28px 28px;background:linear-gradient(160deg,var(--ink2),var(--ink));
  transition:border-color .35s,transform .35s,box-shadow .35s;overflow:hidden}
.t2pil:hover{border-color:rgba(0,185,242,.45);transform:translateY(-5px);
  box-shadow:0 30px 64px rgba(0,0,0,.5)}
.t2pil .n{display:block;font:700 42px/1 "DM Sans",system-ui,sans-serif;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(0,185,242,.42);margin:0 0 16px}
.t2pil h3{color:#fff;font-size:22px;line-height:1.22;letter-spacing:-.025em;margin:0 0 10px}
.t2pil p{color:var(--dtx2);font-size:15px;line-height:1.64;margin:0}

/* ── 07 · WHAT YOU GET · 4-up variant of the approved card ───────────────────── */
.t2caps.t2p4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── 08 · ACCURACY · the number is the hero of its own section ───────────────── */
.t2pacc{position:relative;overflow:hidden}
.t2paccg{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;margin:14px 0 0}
.t2pdial{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:320px}
.t2pdial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.t2pdial .tr{fill:none;stroke:var(--line);stroke-width:5}
.t2pdial .vl{fill:none;stroke:url(#t2pg);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:534;stroke-dashoffset:21;filter:drop-shadow(0 0 10px rgba(0,185,242,.5))}
.t2pdial .big{position:relative;font:700 clamp(68px,8.4vw,112px)/1 "DM Sans",system-ui,sans-serif;
  letter-spacing:-.055em;margin:0;
  background:linear-gradient(150deg,#fff,var(--cy));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t2pdial .big span{font-size:.4em;vertical-align:super;letter-spacing:-.02em}
.t2pdial .bigsub{position:relative;font:600 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dtx3);margin:8px 0 0;text-align:center}
.t2pacc h2{margin:0 0 16px}
.t2pacc .t2pbody p{color:var(--dtx2);font-size:16.5px;line-height:1.7;margin:0 0 15px}
.t2pnote{font:600 12px/1.6 "IBM Plex Mono",monospace;letter-spacing:.05em;color:var(--cy);
  border-left:2px solid var(--cy);padding:5px 0 5px 16px;margin:24px 0 0}

/* ── 09 · DEPLOYMENT ─────────────────────────────────────────────────────────── */
.t2pdep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0 0}
.t2pd{position:relative;border:1px solid var(--line);border-radius:18px;
  padding:32px 26px 26px;background:linear-gradient(160deg,var(--ink2),var(--ink));
  transition:border-color .35s,transform .35s,box-shadow .35s}
.t2pd:hover{border-color:rgba(0,185,242,.45);transform:translateY(-5px);
  box-shadow:0 30px 64px rgba(0,0,0,.5)}
.t2pdrec{border-color:rgba(0,185,242,.5);
  background:linear-gradient(160deg,rgba(0,185,242,.085),var(--ink));
  box-shadow:0 26px 60px rgba(0,0,0,.46)}
.t2pd .rec{position:absolute;right:22px;top:-11px;font:700 9.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);background:var(--cy);
  padding:7px 11px;border-radius:5px;box-shadow:0 8px 20px rgba(0,185,242,.34)}
.t2pd h3{color:#fff;font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:0 0 7px}
.t2pd .t{font:600 10.5px/1.5 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cy);margin:0 0 16px}
.t2pd p{color:var(--dtx2);font-size:15px;line-height:1.64;margin:0 0 18px}
.t2pd ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.t2pd li{position:relative;padding:0 0 10px 22px;color:var(--dtx2);font-size:14px;line-height:1.56}
.t2pd li:last-child{padding-bottom:0}
.t2pd li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:2px;background:var(--cy);opacity:.8}

.t2pwhat{margin:40px 0 0;border:1px solid var(--line);border-radius:18px;
  padding:34px 32px 30px;background:rgba(0,185,242,.038)}
.t2pwhat h3{color:#fff;font-size:20px;letter-spacing:-.02em;margin:0 0 22px}
.t2pwg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.t2pwg b{display:block;font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cy);margin:0 0 10px}
.t2pwg p{color:var(--dtx2);font-size:14.5px;line-height:1.62;margin:0}

/* ── RESPONSIVE · the T2 breakpoints, not new ones · CR-29 ───────────────────── */
@media(max-width:1080px){
  .t2pgridh{grid-template-columns:1fr;gap:40px}
  .t2phero h1{font-size:clamp(34px,6.6vw,52px)}
  .t2pgrid,.t2pillars,.t2pdep{grid-template-columns:1fr}
  .t2caps.t2p4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t2paccg{grid-template-columns:1fr;gap:34px;justify-items:center}
  .t2pdial{max-width:260px}
  .t2pwg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .t2phero{padding:84px 0 48px}
  .t2phero::after{background-size:44px 44px}
  .t2caps.t2p4{grid-template-columns:1fr}
  .t2pwg{grid-template-columns:1fr;gap:20px}
  .t2pwhat{padding:26px 22px 24px}
  .t2pp,.t2pil,.t2pd{padding:24px 21px 21px}
  .t2ptrust{gap:0 20px}
  .t2ptrust b{font-size:18px}
  .t2pscroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  .t2pbadge i,.t2pscroll i::after{animation:none}
  .t2pcard,.t2pp,.t2pil,.t2pd{transition:none}
}

/* ── POLISH PASS · from screenshots at 1600x1000, 8 Oct ──────────────────────────
   Three defects the render showed that reading the markup never would:
     1 · section H2s ran to three lines and shouted over the H1. Capped in T2P scope
         only, so no other page's typography moves.
     2 · the two-column sections left 300px of dead floor where the right column
         ran out before the left did.
     3 · the hero H1 needed its own ceiling once the sections were capped. */
.t2phero ~ section h2, .t2pacc h2{font-size:clamp(27px,2.5vw,38px)!important;
  line-height:1.14;letter-spacing:-.028em;max-width:19ch}
.t2pacc h2{max-width:22ch}
.t2phero ~ section .sub{font-size:16px;line-height:1.62;max-width:62ch}
.t2how{align-items:start}
.t2how .t2dev{position:sticky;top:112px}
.t2pwhat{margin-bottom:4px}

/* ── PHONE PASS · from screenshots at 390x844, 8 Oct ─────────────────────────────
   The desktop render hid two things that only a 390px column shows:
     1 · the accuracy label sat on the dial ring once the section stacked. It now
         hangs below the ring instead of inside it.
     2 · the hero needs its own rhythm on a phone, where the animation comes first
         and the headline has to arrive inside the first screen after it. */
@media(max-width:1080px){
  .t2pdial{max-width:238px;margin-bottom:34px}
  .t2pdial .bigsub{position:absolute;left:0;right:0;bottom:-30px;margin:0}
}
@media(max-width:640px){
  .t2phero{padding:22px 0 40px}
  .t2pgridh{gap:26px}
  .t2pstage{border-radius:14px}
  .t2pcap{margin-top:10px;font-size:9.4px;letter-spacing:.08em}
  .t2pbadge{margin-bottom:16px}
  .t2phero h1{font-size:clamp(30px,8.4vw,38px);line-height:1.08}
  .t2plead{font-size:15.5px}
  .t2ptrust{gap:14px 22px;margin-top:20px;padding-top:16px}
  .t2ptrust div{flex:0 0 calc(50% - 11px)}
  .t2pdial{max-width:208px}
}