.cc-page{
  --cc-navy:      #003B73;   /* primary */
  --cc-navy-deep: #00284F;
  --cc-blue:      #0056A6;   /* secondary */
  --cc-cyan:      #00AEEF;   /* accent */
  --cc-bg:        #F8FBFD;
  --cc-card:      #FFFFFF;
  --cc-text:      #1F2937;
  --cc-text-light: rgba(255,255,255,0.86);
  --cc-border:    #DDE8F3;
  --cc-radius:    16px;
  --cc-shadow:       0 12px 32px rgba(0, 59, 115, 0.08);
  --cc-shadow-hover: 0 24px 52px rgba(0, 59, 115, 0.16);
  --cc-ease: cubic-bezier(.22,1,.36,1);

  font-family:'Inter', sans-serif;
  color:var(--cc-text);
  background:var(--cc-card);
  overflow-x:hidden;
}

/* ---- Extended tokens for the redesigned sections (Chemistry, Technology,
   Quality band, CTA). Additive only — none of the original variables above
   are modified, so Hero / Footer / Navbar / One-Process are unaffected. ---- */
.cc-page{
  --cc-ink:        #05131F;   /* near-black navy for premium dark surfaces */
  --cc-mist:       #F6FAFD;   /* section tint, distinct from --cc-bg for rhythm */
  --cc-line:       #E3EDF6;   /* hairline rule on light surfaces */
  --cc-glass-bg:      rgba(255,255,255,0.06);
  --cc-glass-bg-light: rgba(0,59,115,0.04);
  --cc-glass-border:  rgba(255,255,255,0.14);
  --cc-radius-lg:  22px;
  --cc-radius-sm:  10px;
  --cc-gap:        28px;

  /* single vertical rhythm reused by every redesigned section */
  --cc-pad-y: 88px;
}
@media (max-width:991px){ .cc-page{ --cc-pad-y:64px; } }
@media (max-width:640px){ .cc-page{ --cc-pad-y:48px; } }

.cc-page *{ box-sizing:border-box; }
.cc-page img{ max-width:100%; }

.cc-page h1, .cc-page h2, .cc-page h3, .cc-page h4, .cc-page h5{
  font-family:'Playfair Display', serif;
  color:var(--cc-navy);
  font-weight:800;
  margin:0;
}

.cc-mono{ font-family:'IBM Plex Mono', monospace; }

.cc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cc-cyan);
  margin-bottom:0.9rem;
  font-weight:600;
}
.cc-eyebrow--light{ color:var(--cc-cyan); }
.cc-eyebrow .cc-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; flex-shrink:0; }

.cc-h2{ font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:1.22; margin-bottom:1.15rem; color:var(--cc-navy); letter-spacing:-.01em; }
.cc-page .cc-h2--light{ color:#fff; }

.cc-body{ max-width:700px; font-size:1.03rem; line-height:1.85; color:var(--cc-text); margin-bottom:0; }
.cc-body--light{ color:rgba(255,255,255,0.78); }

.cc-section{ padding:104px 0; }
.cc-bg-blue{ background:var(--cc-bg); }
.cc-bg-white{ background:var(--cc-card); }

.cc-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 28px;              /* Reduced from 15px 34px — more compact but still premium */
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:transform 0.3s var(--cc-ease), box-shadow 0.3s var(--cc-ease), background 0.3s var(--cc-ease), color 0.3s var(--cc-ease);
  font-size:0.9rem;               /* Reduced from 0.96rem */
  white-space:nowrap;
}
.cc-btn:hover{ transform:translateY(-3px) scale(1.02); }
.cc-btn--primary{ background:var(--cc-cyan); color:#00243F; box-shadow:0 12px 30px rgba(0,174,239,0.35); }
.cc-btn--primary:hover{ background:#20c2ff; color:#00243F; }
.cc-btn--outline{ border:1.5px solid rgba(255,255,255,0.55); color:#fff; }
.cc-btn--outline:hover{ background:rgba(255,255,255,0.14); color:#fff; }
.cc-btn--outline-dark{ border:1.5px solid var(--cc-border); color:var(--cc-navy); }
.cc-btn--outline-dark:hover{ background:rgba(0,59,115,0.06); }

/* ==========================================================================
   1. HERO — full-bleed lab imagery, deep navy overlay, decorative hex/molecule
      grid, serif display heading, gold-style divider (in accent cyan to match
      the brand palette), and glass stat cards that overlap the hero's lower
      edge into the section below.
   ========================================================================== */
.cc-hero{
  position:relative;
  min-height:520px;                  /* Reduced from 640px — ~19% shorter, target 500–550px */
  display:flex;
  align-items:center;
  padding:90px 0 70px;              /* Reduced from 150px 0 — saves ~120px total vertical space */
  background-image:var(--cc-img);
  background-size:cover;
  background-position:center;
}

.cc-hero__overlay{
  position:absolute; inset:0; z-index:0;
  /* Lighter, less-saturated tint than before — darker charcoal-navy on the
     text side for readability, fading to a much lighter wash on the right
     so the photo itself stays visible instead of being drowned in blue. */
  background:linear-gradient(115deg, rgba(5,18,32,0.72) 0%, rgba(8,28,48,0.5) 45%, rgba(8,28,48,0.18) 100%);
}
/* soft hexagon / molecular-bond lattice, echoes the brand mark used sitewide */
.cc-hero__dots{
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1.4px, transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%2300AEEF' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
  background-size:24px 24px, 84px 96px;
  opacity:0.7;
}
.cc-hero__particle{
  position:absolute; z-index:0; border-radius:50%;
  background:rgba(0,174,239,0.5);
  filter:blur(1px);
  animation:cc-float 9s ease-in-out infinite;
}
.cc-hero__particle:nth-child(1){ width:6px; height:6px; top:22%; left:14%; animation-delay:0s; }
.cc-hero__particle:nth-child(2){ width:4px; height:4px; top:64%; left:8%; animation-delay:1.4s; }
.cc-hero__particle:nth-child(3){ width:8px; height:8px; top:38%; right:12%; animation-delay:2.6s; }
.cc-hero__particle:nth-child(4){ width:5px; height:5px; top:76%; right:20%; animation-delay:.8s; }
@keyframes cc-float{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(-18px); opacity:1; } }

.cc-hero .container{ position:relative; z-index:1; }

.cc-hero__badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--cc-cyan);
  background:rgba(0,174,239,0.12);
  border:1px solid rgba(0,174,239,0.4);
  padding:9px 20px; border-radius:999px;
  margin-bottom:16px;              /* Reduced from 28px — tighter gap before heading */
}
.cc-hero__badge .cc-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.cc-page .cc-hero__title{
  color:#fff;
  font-size:clamp(2.0rem, 4vw, 3.2rem);  /* Slightly reduced from 2.2–3.6rem for better proportion */
  line-height:1.18;
  margin-bottom:8px;                    /* Reduced from 14px */
  text-shadow:0 2px 20px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
  font-weight:800;
}
.cc-hero__divider{
  width:78px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--cc-cyan), #7fe0ff);
  margin:12px 0 16px;                  /* Reduced from 22px 0 26px — tighter vertical rhythm */
}
.cc-hero__lede{ color:var(--cc-text-light); font-size:1.02rem; max-width:640px; line-height:1.7; margin-bottom:22px; }  /* Reduced font-size and margin */
.cc-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }  /* Reduced from 16px */

/* ---- Floating glass stat cards, overlapping the hero's bottom edge ----
   (kept for when the stat-card markup in the PHP is re-enabled; the
   dead empty wrapper that broke spacing when the cards were disabled
   has been removed from the markup — see core-competencies.php) */
.cc-stats-float{
  position:relative;
  z-index:2;
  margin-top:56px;
  margin-bottom:-128px; /* pulls the row down over the next section */
}
.cc-stat{
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.22);
  border-top:3px solid var(--cc-cyan);
  border-radius:var(--cc-radius);
  padding:28px 20px;
  text-align:center;
  transition:transform 0.35s var(--cc-ease), background 0.35s var(--cc-ease), box-shadow .35s var(--cc-ease);
  height:100%;
  box-shadow:0 20px 46px rgba(0,20,45,0.25);
}
.cc-stat:hover{ transform:translateY(-8px); background:rgba(255,255,255,0.16); }
.cc-stat__icon{
  width:46px; height:46px; margin:0 auto 14px;
  border-radius:12px;
  background:rgba(0,174,239,0.18);
  border:1px solid rgba(0,174,239,0.4);
  color:var(--cc-cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.cc-stat__num{ display:block; font-family:'Playfair Display', serif; font-size:2.1rem; font-weight:800; color:#fff; }
.cc-stat__label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin-top:8px; line-height:1.4; }

@media (max-width:991px){
  .cc-hero{ min-height:420px; padding:70px 0 50px; }   /* Tablet: ~420px tall, reduced from 640px */
  .cc-stats-float{ margin-bottom:-90px; }
}
@media (max-width:640px){
  .cc-hero{ min-height:auto; padding:70px 0 50px; }     /* Mobile: ~350px tall, reduced from 120px 0 84px */
  .cc-stats-float{ margin-top:40px; margin-bottom:-64px; }
}

/* Section immediately after hero — reduced top padding since stat
   cards are not active. Provides a clean 50–70px gap between hero
   bottom and the Chemistry section heading. */
.cc-after-hero{ padding-top:50px; }                /* Balanced 50px gap after hero bottom (70px) = ~120px total */
@media (max-width:991px){ .cc-after-hero{ padding-top:40px; } }
@media (max-width:640px){ .cc-after-hero{ padding-top:36px; } }



/* ==========================================================================
   2. CHEMISTRY — "spec-plate" card system. Pyramid grid (3 over 2) kept
      from the previous layout because the arrangement itself reads like a
      lattice/bond structure, which suits the subject; every visual detail
      inside each card has been rebuilt.
   ========================================================================== */
.cc-chem{
  position:relative;
  background:var(--cc-mist);
  padding:var(--cc-pad-y) 0 44px;
}
.cc-chem__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.cc-chem__intro{ max-width:640px; }
.cc-chem__head .cc-body{ margin-top:2px; }
.cc-chem__count{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:var(--cc-blue);
  opacity:0.65;
  white-space:nowrap;
  padding-bottom:6px;
}

.cc-chem-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--cc-gap);
}
@media (min-width:992px){
  .cc-chem-grid{ grid-template-columns:repeat(6, 1fr); }
  .cc-chem-grid .cc-chem-card{ grid-column:span 2; }
  .cc-chem-grid .cc-chem-card:nth-child(4){ grid-column:2 / span 2; }
  .cc-chem-grid .cc-chem-card:nth-child(5){ grid-column:4 / span 2; }
}
@media (max-width:640px){ .cc-chem-grid{ grid-template-columns:1fr; } }

.cc-chem-card{
  position:relative;
  background:var(--cc-card);
  border-radius:var(--cc-radius-lg);
  overflow:hidden;
  box-shadow:var(--cc-shadow);
  transition:transform .45s var(--cc-ease), box-shadow .45s var(--cc-ease);
  display:flex;
  flex-direction:column;
}
.cc-chem-card:hover{ transform:translateY(-8px); box-shadow:var(--cc-shadow-hover); }

.cc-chem-card__media{ position:relative; height:172px; overflow:hidden; }
.cc-chem-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--cc-ease), filter .8s var(--cc-ease);
  filter:saturate(0.86) brightness(0.92);
}
.cc-chem-card:hover .cc-chem-card__media img{ transform:scale(1.09); filter:saturate(1) brightness(1); }
.cc-chem-card__media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(0,40,79,0.66) 0%, rgba(0,59,115,0.18) 46%, rgba(0,59,115,0) 70%);
}
.cc-chem-card__code{
  position:absolute; top:14px; left:16px; z-index:1;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
  color:#fff; opacity:0.92;
}
.cc-chem-card__code::before{ content:'/// '; opacity:.6; }

.cc-chem-card__icon{
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:14px;
  margin:-30px 22px 0 22px;
  background:linear-gradient(135deg, var(--cc-navy), var(--cc-cyan));
  border:3px solid #fff;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem;
  box-shadow:0 10px 22px -8px rgba(0,59,115,0.55);
  transition:transform .4s var(--cc-ease);
}
.cc-chem-card:hover .cc-chem-card__icon{ transform:rotate(-8deg) scale(1.06); }

.cc-chem-card__body{ padding:16px 22px 24px; flex:1; display:flex; flex-direction:column; }
.cc-chem-card__body h3{ font-size:1.14rem; margin:0 0 8px; line-height:1.3; }
.cc-chem-card__body p{ font-size:0.92rem; line-height:1.68; color:var(--cc-text); margin:0; opacity:0.88; }
.cc-chem-card__bar{
  margin-top:16px; height:2px; border-radius:2px; overflow:hidden; background:var(--cc-line);
}
.cc-chem-card__bar span{
  display:block; height:100%; width:26%;
  background:linear-gradient(90deg, var(--cc-cyan), var(--cc-blue));
  transition:width .55s var(--cc-ease);
}
.cc-chem-card:hover .cc-chem-card__bar span{ width:100%; }


/* ==========================================================================
   2B. TECHNOLOGY — split-screen rows connected by a spec rail: a slim
       gradient conduit with glowing node markers runs between the alternating
       rows, echoing the physical process-piping this section describes.
   ========================================================================== */
.cc-tech{
  position:relative;
  background:var(--cc-bg);
  padding:52px 0 var(--cc-pad-y);
  overflow:hidden;
}
.cc-tech__pattern{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%2300AEEF' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
  background-size:84px 96px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0) 78%);
}
.cc-tech .container{ position:relative; z-index:1; }
.cc-tech__head{ margin-bottom:36px; }

.cc-tech-rail{ display:flex; flex-direction:column; gap:38px; }
.cc-tech-row{ display:flex; align-items:center; gap:0; }
.cc-tech-row--flip{ flex-direction:row-reverse; }

.cc-tech-row__media{
  position:relative; flex:0 0 34%; max-width:34%;
  border-radius:var(--cc-radius-lg); overflow:hidden;
  box-shadow:var(--cc-shadow);
  aspect-ratio:4/3;
}
.cc-tech-row__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--cc-ease); }
.cc-tech-row:hover .cc-tech-row__media img{ transform:scale(1.07); }
.cc-tech-row__media::after{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
  border-radius:inherit;
  pointer-events:none;
}

.cc-tech-node{
  position:relative; flex:0 0 88px; width:88px;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.cc-tech-node__dot{
  width:52px; height:52px; border-radius:50%;
  background:var(--cc-card);
  border:1px solid var(--cc-border);
  box-shadow:0 10px 26px -10px rgba(0,59,115,0.35);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; font-weight:600;
  letter-spacing:0.03em;
  color:var(--cc-navy);
}
.cc-tech-node::before, .cc-tech-node::after{
  content:''; position:absolute; left:50%; width:2px;
  background:linear-gradient(180deg, var(--cc-cyan), rgba(0,174,239,0));
  transform:translateX(-50%);
}
.cc-tech-node::before{ top:-52px; height:52px; }
.cc-tech-node::after{ bottom:-52px; height:52px; background:linear-gradient(0deg, var(--cc-cyan), rgba(0,174,239,0)); }
.cc-tech-row:first-child .cc-tech-node::before{ opacity:0; }
.cc-tech-row:last-child .cc-tech-node::after{ opacity:0; }

.cc-tech-row__content{ flex:1 1 auto; min-width:0; padding:0 8px; }
.cc-tech-row--flip .cc-tech-row__content{ text-align:right; }
.cc-tech-row__content .cc-card__icon{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--cc-navy), var(--cc-blue));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; margin-bottom:16px;
  box-shadow:0 10px 22px -8px rgba(0,59,115,0.5);
}
.cc-tech-row__content h3{ font-size:1.4rem; margin:0 0 10px; }
.cc-tech-row__content p{ font-size:0.98rem; line-height:1.75; color:var(--cc-text); max-width:420px; opacity:0.9; }
.cc-tech-row--flip .cc-tech-row__content p{ margin-left:auto; }

@media (max-width:860px){
  .cc-tech-row, .cc-tech-row--flip{ flex-direction:column; align-items:stretch; gap:18px; }
  .cc-tech-node{ display:none; }
  .cc-tech-row__media, .cc-tech-row--flip .cc-tech-row__media{ flex-basis:auto; max-width:100%; }
  .cc-tech-row__content, .cc-tech-row--flip .cc-tech-row__content{ text-align:left; padding:0; }
  .cc-tech-row--flip .cc-tech-row__content p{ margin-left:0; }
}


/* ==========================================================================
   2C. QUALITY & PRECISION — full-bleed imagery band with a glass readout
       strip carrying the four headline figures.
   ========================================================================== */
.cc-quality{
  position:relative;
  background-image:var(--cc-qc-img);
  background-size:cover;
  background-position:center;
  padding:calc(var(--cc-pad-y) + 14px) 0;
  overflow:hidden;
}
@media (min-width:992px){ .cc-quality{ background-attachment:fixed; } }
.cc-quality__overlay{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, rgba(0,20,40,0.94) 0%, rgba(0,59,115,0.88) 50%, rgba(0,59,115,0.74) 100%);
}
.cc-quality .container{ position:relative; z-index:1; }
.cc-quality__inner{ max-width:740px; margin:0 auto 44px; text-align:center; }
.cc-quality__inner .cc-eyebrow{ justify-content:center; }
.cc-quality__inner .cc-h2{ margin-bottom:16px; }
.cc-quality__inner .cc-body{ margin:0 auto; }

.cc-quality-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  max-width:920px;
  margin:0 auto;
  background:rgba(255,255,255,0.14);
  border-radius:var(--cc-radius-lg);
  overflow:hidden;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.16);
}
.cc-qstat{
  background:rgba(255,255,255,0.05);
  padding:26px 18px;
  text-align:center;
  transition:background .35s var(--cc-ease);
}
.cc-qstat:hover{ background:rgba(255,255,255,0.1); }
.cc-qstat .cc-stat__num{ display:block; font-family:'Playfair Display', serif; font-size:1.9rem; font-weight:800; color:#fff; }
.cc-qstat__label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.68); margin-top:8px; line-height:1.4; }

@media (max-width:768px){
  .cc-quality-stats{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .cc-quality{ padding:64px 0; background-attachment:scroll; }
}


/* ==========================================================================
   3. ONE PROCESS — vertical connected timeline (chemistry -> technology
      pairs), numbered circles, icons, hover animation.
   ========================================================================== */
.cc-wheel-layout{ display:flex; align-items:center; gap:60px; flex-wrap:wrap; }
.cc-wheel-intro{ flex:1 1 320px; min-width:280px; }
.cc-wheel-img{ flex:1 1 480px; max-width:640px; margin:0 auto; }
.cc-wheel-img img{ width:100%; height:auto; display:block; }
@media (max-width:991px){ .cc-wheel-layout{ flex-direction:column; gap:40px; } }

/* ==========================================================================
   4. CTA — bookends the Hero: same dark gradient + hex-lattice language,
      resolved into a single glass panel with the two closing actions.
   ========================================================================== */
.cc-cta2{
  position:relative;
  background:linear-gradient(135deg, var(--cc-ink), var(--cc-navy-deep) 55%, var(--cc-navy));
  padding:var(--cc-pad-y) 0;
  overflow:hidden;
}
.cc-cta2__pattern{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1.4px, transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%2300AEEF' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E");
  background-size:24px 24px, 84px 96px;
}
.cc-cta2__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:640px; height:640px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(0,174,239,0.22), rgba(0,174,239,0) 70%);
}
.cc-cta2 .container{ position:relative; z-index:1; }

.cc-cta2__panel{
  max-width:760px; margin:0 auto;
  text-align:center;
  padding:56px 40px;
  border-radius:var(--cc-radius-lg);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 30px 70px rgba(0,10,25,0.4);
}
.cc-page .cc-cta2 h2{ color:#fff; font-size:clamp(1.7rem, 3vw, 2.35rem); margin-bottom:14px; }
.cc-cta2 p{ color:rgba(255,255,255,0.72); max-width:520px; margin:0 auto 30px; font-size:1rem; line-height:1.75; }
.cc-cta2__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.cc-cta2__trust{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.cc-cta2__trust span{ opacity:0.5; }

@media (max-width:640px){
  .cc-cta2__panel{ padding:40px 22px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:991px){
  .cc-section{ padding:76px 0; }
}

@media (prefers-reduced-motion: reduce){
  .cc-page *{ animation:none !important; transition:none !important; }
}