/* ==========================================================================
   CTPL · index.css
   Home page: hero, the one-partner argument, the Q-Suite chain, the per-STU
   commercial model. The DECONTI range and the closing RFQ card are components.

   Sits beside index.html and is loaded only by it.

   Cascade order for this page:
     1. css/global.css      tokens, base elements, site chrome, RFQ band
     2. css/components.css  cross-page patterns (.hl, .surface-dark,
                            .grid-tex--dark, .tag-row, .hero-actions, ...)
     3. this file           everything unique to the page

   Loaded last, so any rule here of equal specificity wins without !important.

   Contents
     1. Hero
     2. Proof strip
     3. One partner, end to end
     4. Q-Suite chain
     5. Per-STU commercial model
     6. How it starts
     7. Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero

   The dark-hero standard at its largest. The right column is the sterile
   cycle: the loop CTPL is accountable for, drawn as a loop.
   -------------------------------------------------------------------------- */
.hero{border-bottom:1px solid rgba(255,255,255,.1)}
.hero .grid-tex{-webkit-mask-image:radial-gradient(120% 120% at 85% 0%,#000,transparent 74%);
  mask-image:radial-gradient(120% 120% at 85% 0%,#000,transparent 74%)}
.hero .hero-glow{position:absolute;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,rgba(42,90,214,.32),rgba(46,158,138,.10) 52%,transparent 70%);
  top:-300px;right:-180px;pointer-events:none;filter:blur(46px)}
/* The extra bottom padding is room for the proof card, which is pulled up over
   this edge: it leaves a real gap under the action row rather than a collision. */
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:54px;align-items:center;padding:78px 26px 118px}
.hero .eyebrow{color:var(--mint)}
.hero .eyebrow::before{background:var(--mint)}
.hero h1{color:#fff;font-size:3.6rem;font-weight:700;margin:1.15rem 0 1.25rem;
  letter-spacing:-.035em;line-height:1.06}
/* Dark hero: mint highlight, no underline (overrides .hl in components.css) */
.hero h1 .hl{color:var(--mint);white-space:normal}
.hero h1 .hl::after{content:none}
.hero p.lead{font-size:1.18rem;line-height:1.68;color:#c3d0ee;max-width:35rem;margin-bottom:1.9rem}
.hero p.lead b{color:#fff;font-weight:600}

/* The cycle */
.hero-cycle{position:relative;display:flex;justify-content:center;align-items:center}
.hero-cycle .cycle{width:100%;max-width:560px;height:auto;display:block;overflow:visible}
.cy-num{font-family:var(--fm);font-size:14px;font-weight:600;fill:#c3d0ee;letter-spacing:.04em}
.cy-lbl{font-family:var(--fm);font-size:12.5px;font-weight:500;fill:#9fb0d6;
  letter-spacing:.18em;text-transform:uppercase}
.cy-logo{transform-box:fill-box;transform-origin:center;animation:cyBreathe 6s ease-in-out infinite}
@keyframes cyBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){
  .cy-logo{animation:none}
  .hero-cycle animate,.hero-cycle animateTransform{display:none}
}

/* --------------------------------------------------------------------------
   2. Proof strip

   The credentials, immediately under the hero: the hero makes the claim, this
   answers "who are you to make it". The card is pulled up over the hero's
   lower edge so the two read as one statement — hence display:flow-root on the
   section, which stops that negative margin collapsing outward and dragging
   the section's own background up with it. z-index clears .hero .wrap, which
   is raised above the hero's texture and glow.
   -------------------------------------------------------------------------- */
.proof{display:flow-root;background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:58px}
.proof-card{position:relative;z-index:3;margin-top:-58px;background:#fff;
  border:1px solid var(--border);border-radius:24px;padding:34px 44px 32px;
  text-align:center;box-shadow:var(--shadow-lg);overflow:hidden}
/* The Q-Suite gradient as a header rule: the five programmes on one edge. */
.proof-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),var(--blue),var(--teal),var(--blue-2),var(--blue-dark))}
.proof-card .eyebrow{justify-content:center}
.proof-lead{font-size:1.05rem;color:var(--ink-soft);max-width:44rem;margin:.85rem auto 30px}
.proof-lead b{color:var(--ink);font-weight:600}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pf{padding:4px 20px;text-align:center}
.pf + .pf{border-left:1px solid var(--line)}
.pf-n{display:block;font-family:var(--fd);font-weight:700;font-size:3rem;line-height:1;
  letter-spacing:-.04em;color:var(--blue)}
/* Teal on white is 3.3:1 — under 4.5 at this size, so the unit is darkened
   towards ink the same way the chain's role labels are. Fallback first. */
.pf-n i{font-style:normal;font-family:var(--fm);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;margin-left:.18rem;vertical-align:.62em;
  color:var(--teal);
  color:color-mix(in srgb,var(--teal) 76%,var(--ink))}
.pf-l{display:block;margin-top:.65rem;font-size:.83rem;line-height:1.45;color:var(--ink-soft)}
.proof-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:30px;
  font-family:var(--fb);font-weight:600;font-size:.88rem;color:var(--blue)}
.proof-more svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.proof-more:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   3. One partner, end to end

   Two panels that argue by their own shape: the left is five detached pieces
   on a dashed edge, the right is one continuous surface.
   -------------------------------------------------------------------------- */
.one-partner .sec-head{max-width:760px}
/* The turn in each section heading, on both the argument and the Q-Suite. */
.sec-head h2 .em{color:var(--blue)}
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:24px;align-items:stretch}
.panel{position:relative;border-radius:22px;padding:26px 28px 24px;display:flex;flex-direction:column}
.sp-tag{font-family:var(--fm);font-size:.63rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:.95rem;display:inline-flex;align-items:center;gap:.5rem}
.sp-tag::before{content:"";width:18px;height:1.5px;background:currentColor}
.sp-foot{margin-top:auto;padding-top:.95rem;font-family:var(--fd);font-weight:500;font-size:.95rem;
  letter-spacing:-.01em}

/* Left: fragmented */
.panel--frag{background:var(--paper);border:1.5px dashed var(--border)}
.panel--frag .sp-tag{color:var(--ink-soft)}
.frag-list{list-style:none;display:grid;gap:6px}
/* Each vendor is its own detached tile — the point of the panel. Single-line
   rows, so the tile is sized by its padding rather than by body line-height. */
.frag-list li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;
  display:flex;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;flex-wrap:wrap;
  line-height:1.35}
/* Muted by weight and size, not by washing the colour out: these still have to
   clear contrast on white. */
.frag-list b{font-family:var(--fd);font-weight:600;font-size:.94rem;color:var(--ink-soft)}
.frag-list span{font-size:.78rem;color:var(--ink-soft)}
.panel--frag .sp-foot{color:var(--ink-soft);border-top:1px dashed var(--border)}

/* Right: unified */
.panel--uni{background:linear-gradient(158deg,var(--blue) 0%,var(--blue-dark) 58%,var(--navy) 100%);
  color:#fff;overflow:hidden;box-shadow:var(--shadow-lg)}
.panel--uni::after{content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(159,210,198,.16),transparent 68%);pointer-events:none}
.panel--uni .sp-tag{color:var(--mint)}
.uni-chain{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-bottom:1.15rem}
.uni-chain span{font-family:var(--fd);font-weight:600;font-size:.9rem;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:.34rem .75rem;border-radius:999px}
.uni-chain i{width:12px;height:1.5px;background:rgba(159,210,198,.6);flex:none}
.uni-lead{position:relative;z-index:1;color:#d3ddf6;font-size:1rem;line-height:1.6;margin-bottom:1.1rem}
.uni-list{position:relative;z-index:1;list-style:none;display:grid;gap:.6rem}
.uni-list li{position:relative;padding-left:1.7rem;font-size:.94rem;line-height:1.5;color:#eaf0ff}
.uni-list li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--mint)}
.panel--uni .sp-foot{position:relative;z-index:1;color:var(--mint);
  border-top:1px solid rgba(255,255,255,.16)}

/* --- Bridge -----------------------------------------------------------------
   One line between Services and Products. Without it the jump from running
   departments to manufacturing equipment reads as two businesses. */
.bridge{background:var(--paper);border-top:1px solid var(--line)}
.bridge .wrap{display:flex;align-items:center;gap:22px;padding:26px 26px}
.bridge .br-rule{flex:1 1 auto;min-width:14px;height:1px;background:var(--border)}
/* The line must be allowed to shrink and wrap. With flex:none it holds its
   max-content width and runs off the side of a phone. */
.bridge p{flex:0 1 auto;min-width:0;font-family:var(--fd);font-weight:500;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink-soft);text-align:center}
.bridge p b{color:var(--blue);font-weight:600}

/* --------------------------------------------------------------------------
   4. Q-Suite chain

   Five links in workflow order, threaded on one line. The line is drawn behind
   the nodes and stops short of the first and last so it reads as a chain
   rather than a rule. Per-link colour comes from --ln-tint, set inline.
   -------------------------------------------------------------------------- */
.chain{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.chain::before{content:"";position:absolute;top:38px;left:10%;right:10%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--blue),var(--teal),var(--blue-2),var(--blue-dark));
  opacity:.45}
.link{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 14px}
.ln-node{width:78px;height:78px;border-radius:50%;background:#fff;border:2px solid var(--border);
  display:grid;place-items:center;color:var(--ln-tint,var(--blue));margin-bottom:1.05rem;
  box-shadow:0 1px 2px rgba(15,35,90,.06),0 8px 22px rgba(15,35,90,.07);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.ln-node svg{width:32px;height:32px}
/* Hover inverts the node: it fills with the link's colour and the icon goes
   white. On touch there is no hover, so the filled state is the default there
   (see the breakpoint below). */
.link:hover .ln-node{transform:translateY(-5px);box-shadow:var(--shadow-lg);
  background:var(--ln-tint,var(--blue));border-color:var(--ln-tint,var(--blue));color:#fff}
/* Text takes a darkened mix of the link's tint. At full strength --teal only
   reaches 3.3:1 on white, which is fine for the icon (a graphic) but not for
   words. Fallback declaration first for browsers without color-mix(). */
.ln-role{font-family:var(--fm);font-size:.63rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ln-tint,var(--blue));
  color:color-mix(in srgb,var(--ln-tint,var(--blue)) 76%,var(--ink))}
.ln-name{font-family:var(--fd);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;
  margin:.2rem 0 .45rem;color:var(--ink)}
.ln-txt{font-size:.86rem;line-height:1.55;color:var(--ink-soft);max-width:15rem}
/* Shown only once the chain breaks into cards: on desktop the hover lift is the
   affordance, but touch has no hover, so the card needs to say it is a link. */
.ln-more{display:none;align-items:center;gap:.35rem;margin-top:.85rem;
  font-family:var(--fb);font-weight:600;font-size:.84rem;
  color:var(--ln-tint,var(--blue));
  color:color-mix(in srgb,var(--ln-tint,var(--blue)) 76%,var(--ink))}
.ln-more svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link:hover .ln-more svg{transform:translateX(3px)}
.sec-foot{margin-top:46px;display:flex;justify-content:center}

/* --------------------------------------------------------------------------
   5. Per-STU commercial model
   -------------------------------------------------------------------------- */
.stu{position:relative;overflow:hidden}
.stu .grid-tex{-webkit-mask-image:radial-gradient(120% 120% at 12% 0%,#000,transparent 70%);
  mask-image:radial-gradient(120% 120% at 12% 0%,#000,transparent 70%)}
.stu .wrap{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;
  gap:56px;align-items:center}

/* The definition, as a glass card — same treatment as the product-page aside */
.stu-card{position:relative;border-radius:24px;padding:34px 32px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-lg);backdrop-filter:blur(6px)}
.stu-mark{display:flex;align-items:baseline;gap:.6rem;font-family:var(--fd);font-weight:700;
  font-size:5.2rem;line-height:.9;color:#fff;letter-spacing:-.05em}
.stu-mark em{font-family:var(--fm);font-style:normal;font-weight:600;font-size:1.05rem;
  letter-spacing:.16em;color:var(--mint)}
.stu-def{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:.98rem;line-height:1.68;color:#c3d0ee}
.stu-def b{color:#fff;font-weight:600}
.stu-foot{margin-top:1.1rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8fa2cd}

.stu-body .eyebrow{color:var(--mint)}
.stu-body .eyebrow::before{background:var(--mint)}
.stu-body h2{color:#fff;font-size:2.4rem;font-weight:700;letter-spacing:-.03em;margin:.9rem 0 .9rem}
.stu-body h2 .hl{color:var(--mint);white-space:normal}
.stu-body h2 .hl::after{content:none}
.stu-body>p{color:#b8c6e6;font-size:1.05rem;line-height:1.68;max-width:38rem;margin-bottom:1.6rem}
.stu-list{list-style:none;display:grid;gap:0;margin-bottom:1.9rem}
.stu-list li{position:relative;padding:.95rem 0 .95rem 2.1rem;font-size:.94rem;line-height:1.6;
  color:#b8c6e6;border-top:1px solid rgba(255,255,255,.12)}
.stu-list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.stu-list li b{color:#fff;font-weight:600}
.stu-list li::before{content:"";position:absolute;left:.35rem;top:1.45rem;width:8px;height:8px;
  border-radius:2px;background:var(--mint);transform:rotate(45deg)}
.stu-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   6. How it starts

   Numbered steps threaded on the same rule as the Q-Suite chain, so the two
   sequences on the page read as the same kind of object.
   -------------------------------------------------------------------------- */
.step-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{position:relative;padding:0 26px}
.step + .step{border-left:1px solid var(--border)}
/* Cobalt, not teal: teal only clears 3.3:1 on the paper tint. The coloured rule
   above each step carries the per-step identity instead. */
.st-n{display:block;font-family:var(--fm);font-weight:600;font-size:.72rem;letter-spacing:.2em;
  color:var(--blue);margin-bottom:.9rem}
.step h3{font-size:1.16rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.55rem}
.step p{font-size:.88rem;line-height:1.62;color:var(--ink-soft)}
/* The step's own rule, drawn above the number */
.step::before{content:"";position:absolute;top:-24px;left:26px;width:26px;height:3px;border-radius:3px;
  background:var(--blue);opacity:.85}
.step:nth-child(2)::before{background:var(--teal)}
.step:nth-child(3)::before{background:var(--blue-2)}
.step:nth-child(4)::before{background:var(--red)}

/* --------------------------------------------------------------------------
   7. Breakpoints
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .hero h1{font-size:3rem}
  .hero .wrap{gap:40px}
  /* Five links never divide evenly below five columns, so the chain stops being
     a row of nodes and becomes a two-up list. The connecting line only reads on
     a single row, so it goes with it — and once the thread is gone each link
     needs its own container to hold together. */
  .chain{grid-template-columns:repeat(2,1fr);gap:20px}
  .chain::before{display:none}
  .link{display:grid;grid-template-columns:58px 1fr;column-gap:16px;align-items:start;
    text-align:left;padding:22px;background:#fff;border:1px solid var(--border);border-radius:18px;
    box-shadow:0 1px 2px rgba(15,35,90,.06),0 8px 22px rgba(15,35,90,.06);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
  .link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#c5d4ee}
  /* Node spans all four content rows so the card has no dead column, and it
     ships filled: there is no hover on touch to reveal the colour. */
  .ln-node{grid-column:1;grid-row:1 / span 4;align-self:start;width:58px;height:58px;
    margin-bottom:0;box-shadow:none;
    background:var(--ln-tint,var(--blue));border-color:var(--ln-tint,var(--blue));color:#fff}
  .link:hover .ln-node{transform:none;box-shadow:none}
  .ln-node svg{width:25px;height:25px}
  .ln-txt{max-width:none}
  .ln-more{display:inline-flex}
}

@media(max-width:1080px){
  .proof-card{padding:32px 30px 30px}
  .proof-row{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .pf:nth-child(odd){border-left:0}
  .step-row{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .step:nth-child(odd){border-left:0;padding-left:0}
}

@media(max-width:940px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding:56px 26px 96px}
  .hero h1{font-size:2.7rem}
  .hero p.lead{max-width:none}
  .hero-cycle .cycle{max-width:440px}
  .split{grid-template-columns:1fr;gap:18px}
  .bridge .wrap{gap:16px;padding:22px 26px}
  .bridge p{font-size:.95rem}
  .stu .wrap{grid-template-columns:1fr;gap:38px}
  .stu-mark{font-size:4.4rem}
  .stu-body h2{font-size:2rem}
}


@media(max-width:600px){
  .hero .wrap{padding:42px 20px 74px;gap:34px}
  .hero h1{font-size:2.1rem;letter-spacing:-.025em}
  .hero p.lead{font-size:1.05rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-cycle .cycle{max-width:320px}
  /* The stage labels stop being legible once the ring is this small. */
  .cy-lbl{display:none}
  .panel{padding:22px 20px 20px}
  .chain{grid-template-columns:1fr;gap:14px}
  .link{grid-template-columns:52px 1fr;column-gap:14px;padding:20px}
  .ln-node{width:52px;height:52px}
  .ln-node svg{width:23px;height:23px}
  .sec-foot{margin-top:34px}
  .sec-foot .btn{width:100%;justify-content:center}
  /* The card keeps its lift over the hero, just a shorter one. Two columns
     rather than four stacked: on a phone this has to stay a strip, not a list. */
  .proof{padding-bottom:44px}
  .proof-card{margin-top:-38px;padding:26px 20px 24px;border-radius:20px}
  .proof-lead{font-size:.98rem;margin-bottom:24px}
  .proof-row{gap:24px 0}
  .pf{padding:0 8px}
  .pf-n{font-size:2.1rem}
  .pf-n i{font-size:.82rem}
  .pf-l{font-size:.78rem;margin-top:.5rem}
  .proof-more{margin-top:24px}
  /* The rules stop reading as a shared thread once the steps are stacked. */
  .bridge .br-rule{display:none}
  .step-row{grid-template-columns:1fr;row-gap:36px}
  .step{padding:0;border-left:0!important}
  .step::before{left:0}
  .stu-card{padding:26px 22px}
  .stu-mark{font-size:3.6rem}
  .stu-body h2{font-size:1.8rem}
  .stu-actions{flex-direction:column;align-items:stretch}
  .stu-actions .btn{width:100%;justify-content:center}
}