/* =========================================================
   ELEMENTAL GENESIS — HOMEPAGE QUALITY PASS
   2026-09-28
   Final corrective layer inspired by 21st.dev readability principles
   and the 15 CCC website repositories:
   Webstudio, GrapesJS, Puck, Craft.js, Plasmic, shadcn/ui, Magic UI,
   Motion, Lenis, Screenshot-to-Code, bolt.diy, Dyad, Cruip, Astro, Next.js.
   Goal: typography hierarchy, responsive layout, overflow safety,
   readable cards, stable breakpoints, and clean Zenox preservation.
   ========================================================= */

:root{
  --qa-max:1240px;
  --qa-header-max:1320px;
  --qa-copy:66ch;
  --qa-copy-wide:72ch;
  --qa-radius:22px;
  --qa-gap:clamp(16px,2vw,24px);
}

html{
  overflow-x:clip !important;
  scroll-padding-top:76px;
}

body{
  overflow-x:clip !important;
  font-family:"Inter Tight",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}

.page,
main,
section,
.wrap,
.header-inner,
.hero-grid,
.section-head,
.bento,
.split,
.trust-grid,
.services-grid,
.team-grid,
.governance-grid,
.llm-stage,
.erp-grid,
.vps-stage,
.communication,
.interface-grid,
.voice-grid,
.agent-showcase,
.security-row,
.deployment-grid,
.founder-strip{
  min-width:0;
  max-width:100%;
}

.wrap{
  width:min(var(--qa-max),calc(100% - 48px)) !important;
}

.header-inner{
  width:min(var(--qa-header-max),calc(100% - 36px)) !important;
}

img,
video,
svg{
  max-inline-size:100%;
}

figure{
  min-width:0;
}

p,
li,
span,
a,
b,
strong,
em{
  overflow-wrap:break-word;
}

h1,h2,h3,h4,
.display,
.panel-title,
.founder-copy blockquote{
  text-wrap:balance;
}

p,
.panel-copy,
.section-head p,
.hero-body,
.hero-lead{
  text-wrap:pretty;
}

/* ---------- TYPOGRAPHY SCALE ---------- */
.display{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.045em !important;
  line-height:.96 !important;
}

.display-xl{
  font-size:clamp(58px,7.2vw,104px) !important;
}

.display-lg{
  font-size:clamp(46px,5.6vw,76px) !important;
}

.display-md{
  font-size:clamp(34px,4.2vw,56px) !important;
}

.eyebrow,
.tiny-label,
.service-index,
.ccc-soft-mini,
.ccc-soft-state,
.ccc-soft-badge,
.status-pill,
.media-caption{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace !important;
}

.eyebrow{
  font-size:10.5px !important;
  line-height:1.25 !important;
  letter-spacing:.045em !important;
  margin-bottom:16px !important;
}

.tiny-label,
.service-index{
  font-size:9.5px !important;
  line-height:1.3 !important;
  letter-spacing:.045em !important;
}

.hero-lead{
  max-width:30ch !important;
  font-size:clamp(20px,2vw,27px) !important;
  line-height:1.3 !important;
  letter-spacing:-.025em !important;
}

.hero-body{
  max-width:62ch !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  line-height:1.68 !important;
}

.section-head{
  grid-template-columns:minmax(0,1fr) minmax(300px,.66fr) !important;
  gap:clamp(30px,5vw,72px) !important;
  align-items:end !important;
  margin-bottom:clamp(34px,4vw,52px) !important;
}

.section-head .display{
  max-width:16ch !important;
}

.section-head p{
  max-width:var(--qa-copy) !important;
  font-size:clamp(15px,1.15vw,17px) !important;
  line-height:1.65 !important;
}

.panel-title{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:clamp(20px,1.8vw,26px) !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
}

.panel-copy{
  max-width:var(--qa-copy) !important;
  font-size:14px !important;
  line-height:1.68 !important;
}

.service-card h3{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:clamp(21px,1.8vw,25px) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
}

.service-card p,
.specialised-card p{
  font-size:13px !important;
  line-height:1.62 !important;
}

.trust-item b{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:14.5px !important;
  line-height:1.25 !important;
}

.trust-item > span:last-child{
  font-size:11.5px !important;
  line-height:1.58 !important;
}

.team-card b{
  font-size:12px !important;
  line-height:1.32 !important;
}

.team-card p{
  font-size:11px !important;
  line-height:1.55 !important;
}

.feature-item b,
.deploy-step b,
.router-row b,
.server-head b,
.server-app b,
.channel b,
.policy-person b{
  font-size:11.5px !important;
  line-height:1.35 !important;
}

.feature-item p,
.deploy-step p,
.agent-copy li,
.router-row span,
.server-core span,
.server-app span,
.arch-dept span,
.policy-person span,
.policy-scope,
.channel span{
  font-size:11px !important;
  line-height:1.55 !important;
}

.policy-level,
.router-row em,
.status-pill,
.human-badge,
.passport-card .passport-id,
.passport-footer,
.model-dock-head,
.model-output{
  font-size:9.5px !important;
}

.founder-copy blockquote{
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:clamp(28px,3vw,42px) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em !important;
}

.founder-copy p{
  max-width:var(--qa-copy) !important;
  font-size:14px !important;
  line-height:1.7 !important;
}

.contact-card p{
  max-width:var(--qa-copy) !important;
  font-size:15px !important;
  line-height:1.68 !important;
}

/* ---------- HEADER LEGIBILITY ---------- */
.brand-copy strong{
  font-size:10.5px !important;
  line-height:1.05 !important;
  letter-spacing:.045em !important;
}

.brand-copy span{
  font-size:8px !important;
  line-height:1.2 !important;
  letter-spacing:.09em !important;
}

.nav{
  gap:18px !important;
  font-size:11px !important;
  line-height:1 !important;
}

.header-inner > .btn{
  min-height:42px !important;
  padding-inline:14px !important;
  font-size:10.5px !important;
}

.scroll-status{
  font-size:8.5px !important;
}

/* ---------- GLOBAL LAYOUT / OVERFLOW SAFETY ---------- */
.hero{
  min-height:auto !important;
  padding:clamp(48px,6vw,78px) 0 clamp(64px,7vw,92px) !important;
}

.hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr) !important;
  gap:clamp(28px,5vw,64px) !important;
  align-items:center !important;
}

.hero-copy,
.ccc-soft-card,
.glass,
.company-architecture,
.team-example,
.policy-table,
.passport,
.llm-copy,
.llm-router,
.erp-copy,
.vps-map,
.sector-panel,
.channel-stack,
.agent-copy,
.deployment-copy,
.founder-copy,
.contact-card{
  min-width:0 !important;
}

.hero .hero-copy{
  max-width:740px !important;
}

.hero-grid .ccc-shell.ccc-soft-card{
  width:100% !important;
  max-width:760px !important;
  justify-self:end;
}

.section{
  padding:clamp(76px,8vw,112px) 0 !important;
}

.section-tight{
  padding:clamp(48px,5vw,68px) 0 !important;
}

.bento,
.split,
.services-grid,
.team-grid,
.security-row,
.voice-grid,
.interface-grid,
.arch-depts,
.channels,
.erp-images,
.server-apps,
.specialised-grid{
  gap:var(--qa-gap) !important;
}

.bento > *,
.split > *,
.services-grid > *,
.team-grid > *,
.security-row > *,
.voice-grid > *,
.interface-grid > *,
.arch-depts > *,
.channels > *,
.erp-images > *,
.server-apps > *,
.specialised-grid > *,
.governance-grid > *,
.llm-stage > *,
.erp-grid > *,
.vps-stage > *,
.communication > *,
.agent-showcase > *,
.deployment-grid > *,
.founder-strip > *{
  min-width:0 !important;
}

/* Card heights should grow with content instead of clipping copy */
.trust-item,
.team-card,
.service-card,
.specialised-card,
.security-card,
.channel,
.server-app,
.arch-dept,
.feature-item,
.deploy-step,
.router-row{
  height:auto !important;
}

.trust-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

.trust-item,
.trust-item:nth-child(n){
  min-height:250px !important;
  padding:128px 18px 20px !important;
}

.team-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

.team-card{
  min-height:240px !important;
  padding:108px 15px 18px !important;
}

.services-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.service-card{
  min-height:420px !important;
  padding:166px 22px 24px !important;
}

.specialised-card{
  min-height:0 !important;
}

.security-card{
  min-height:190px !important;
}

.policy-head,
.policy-row{
  grid-template-columns:minmax(0,1.2fr) minmax(100px,.65fr) minmax(82px,1fr) !important;
}

.router-row{
  grid-template-columns:minmax(120px,140px) minmax(0,1fr) minmax(64px,80px) !important;
}

.feature-item,
.deploy-step{
  grid-template-columns:34px minmax(0,1fr) !important;
}

.contact-meta{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.contact-meta b,
.contact-meta a{
  font-size:11px !important;
  overflow-wrap:anywhere;
}

/* Media remains edge-to-edge, but cannot force horizontal overflow */
.media-frame,
.hero-film-frame,
.company-motion-frame,
.ccc-motion-frame,
.multimodel-motion-frame,
.sector-motion-frame,
.leads-motion-frame,
.deployment-media,
.comm-visual,
.interface-main,
.voice-card,
.agent-image{
  max-width:100% !important;
  min-width:0 !important;
}

.media-frame img,
.media-frame video,
.hero-film-frame video{
  max-width:100% !important;
}

/* ---------- INTERACTION / ACCESSIBILITY ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid #a98cff !important;
  outline-offset:3px !important;
}

.btn{
  min-height:44px;
}

.glass:hover,
.team-card:hover,
.service-card:hover,
.specialised-card:hover,
.arch-dept:hover,
.router-row:hover,
.feature-item:hover,
.server-app:hover,
.channel:hover,
.deploy-step:hover{
  transform:translateY(-2px) !important;
}

/* Prevent decorative motion elements from creating sideways drift */
.motion-section-number,
.hero::after,
.motion-section::after,
.hero .hero-copy::after{
  pointer-events:none !important;
}

.motion-section-number{
  max-width:90vw;
  overflow:hidden;
}

/* ---------- TABLET ---------- */
@media(max-width:1180px){
  .header-inner{
    width:calc(100% - 28px) !important;
  }

  .nav{
    gap:13px !important;
    font-size:10px !important;
  }

  .hero-grid{
    grid-template-columns:1fr !important;
  }

  .hero-grid .ccc-shell.ccc-soft-card{
    max-width:900px !important;
    justify-self:stretch;
  }

  .section-head{
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr) !important;
    gap:30px !important;
  }

  .trust-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .team-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .security-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---------- MOBILE / SMALL TABLET ---------- */
@media(max-width:760px){
  html{
    scroll-padding-top:64px;
  }

  .wrap{
    width:calc(100% - 24px) !important;
  }

  .header-inner{
    width:calc(100% - 18px) !important;
  }

  .section{
    padding:64px 0 !important;
  }

  .section-tight{
    padding:42px 0 !important;
  }

  .display-xl{
    font-size:clamp(46px,13vw,64px) !important;
    line-height:.96 !important;
  }

  .display-lg{
    font-size:clamp(38px,11vw,54px) !important;
    line-height:.98 !important;
  }

  .display-md{
    font-size:clamp(31px,9vw,44px) !important;
    line-height:1 !important;
  }

  .hero{
    padding:38px 0 58px !important;
  }

  .hero .hero-copy{
    padding:24px 18px 26px !important;
  }

  .hero-lead{
    max-width:32ch !important;
    font-size:19px !important;
    line-height:1.34 !important;
  }

  .hero-body{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .section-head{
    grid-template-columns:1fr !important;
    gap:18px !important;
    margin-bottom:30px !important;
  }

  .section-head .display{
    max-width:100% !important;
  }

  .section-head p{
    font-size:15px !important;
    line-height:1.62 !important;
  }

  .panel-title{
    font-size:21px !important;
  }

  .panel-copy{
    font-size:13.5px !important;
  }

  .trust-grid,
  .services-grid,
  .team-grid,
  .security-row,
  .voice-grid,
  .contact-meta{
    grid-template-columns:1fr !important;
  }

  .trust-item,
  .trust-item:nth-child(n){
    min-height:232px !important;
    padding:122px 17px 19px !important;
  }

  .trust-item > span:last-child{
    font-size:12px !important;
  }

  .team-card{
    min-height:220px !important;
    padding:106px 16px 18px !important;
  }

  .team-card p{
    font-size:11.5px !important;
  }

  .service-card{
    min-height:380px !important;
    padding:158px 19px 22px !important;
  }

  .service-card p,
  .specialised-card p{
    font-size:12.5px !important;
  }

  .policy-head{
    display:none !important;
  }

  .policy-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px 12px !important;
    align-items:start !important;
  }

  .policy-scope{
    grid-column:1 / -1;
  }

  .policy-level{
    grid-column:2;
    grid-row:1;
  }

  .router-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:7px 10px !important;
  }

  .router-row span{
    grid-column:1 / -1;
  }

  .router-row em{
    grid-column:2;
    grid-row:1;
  }

  .founder-copy{
    padding:24px 20px !important;
  }

  .founder-copy p{
    font-size:13.5px !important;
  }

  .contact-card{
    padding:28px 20px !important;
  }

  .contact-card p{
    font-size:14px !important;
  }

  .contact-meta div{
    padding:13px 0 !important;
  }

  .motion-section-number{
    right:8px !important;
    font-size:64px !important;
  }
}

@media(max-width:480px){
  .wrap{
    width:calc(100% - 20px) !important;
  }

  .display-xl{
    font-size:clamp(42px,13vw,56px) !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-tags{
    gap:6px !important;
  }

  .chip{
    max-width:100%;
    font-size:10px !important;
  }

  .arch-depts,
  .server-apps,
  .channels,
  .tool-rail,
  .ccc-soft-grid-3,
  .ccc-soft-grid-4{
    grid-template-columns:1fr !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ---------- MICROCOPY FLOOR — remove legacy 6–9px UI text ---------- */
.ccc-soft-mini{font-size:10.5px !important;}
.ccc-soft-state{font-size:9.5px !important;}
.ccc-soft-badge{font-size:9.5px !important;}
.ccc-soft-kicker{font-size:10.5px !important;}
.ccc-soft-mode strong{font-size:10.5px !important;}
.ccc-soft-mode span{font-size:10px !important;}
.ccc-soft-mode small{font-size:9.5px !important;}
.ccc-soft-pill strong{font-size:11px !important;}
.ccc-soft-pill span{font-size:10px !important;line-height:1.45 !important;}
.ccc-soft-models .model-btn,
.model-btn{font-size:10px !important;}
.ccc-soft-route{font-size:10px !important;line-height:1.5 !important;}

.dept-node strong,
.arch-dept b{font-size:11.5px !important;}
.dept-node span{font-size:10.5px !important;line-height:1.45 !important;}
.agent-node b{font-size:10.5px !important;}
.agent-node span{font-size:10px !important;line-height:1.45 !important;}
.agent-node::before{font-size:8.5px !important;}

.policy-head{font-size:9.5px !important;}
.passport-list span{font-size:10.5px !important;line-height:1.45 !important;}
.router-status{font-size:11px !important;line-height:1.55 !important;}
.server-data span{font-size:9.5px !important;}
.service-tags span{font-size:10px !important;}
.sector-chips span{font-size:10.5px !important;}
.security-card p{font-size:12.5px !important;line-height:1.6 !important;}
.contact-meta span{font-size:9.5px !important;}
.footer{font-size:10.5px !important;}
.brand-copy span{font-size:8.5px !important;}


/* =========================================================
   CCC VISUAL HIERARCHY — 21st-style bento priority
   2026-09-28
   ========================================================= */
#ccc{
  --ccc-blue:#6ea8ff;
  --ccc-violet:#a783ff;
  --ccc-cyan:#59d8e8;
  --ccc-teal:#53d3ad;
  --ccc-amber:#f0bb62;
  --ccc-ink:#f7f8fb;
  --ccc-muted:#a7a8b2;
}

#ccc .bento{
  gap:18px !important;
  align-items:stretch;
}

#ccc .bento > .glass{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.20) !important;
}

#ccc .bento > .glass::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  height:3px !important;
  border:0 !important;
  border-radius:0 !important;
  opacity:1 !important;
  z-index:3 !important;
}

#ccc .ccc-model-card{
  min-height:410px;
  padding:34px !important;
  background:
    radial-gradient(circle at 88% 0%,rgba(167,131,255,.18),transparent 34%),
    radial-gradient(circle at 4% 100%,rgba(110,168,255,.12),transparent 32%),
    #090a0f !important;
  border-color:rgba(167,131,255,.18) !important;
}

#ccc .ccc-model-card::before{
  background:linear-gradient(90deg,var(--ccc-blue),var(--ccc-violet)) !important;
}

#ccc .ccc-model-card > .tiny-label{
  color:#c8b7ff !important;
  -webkit-text-fill-color:#c8b7ff !important;
}

#ccc .ccc-model-card > .panel-title{
  max-width:15ch;
  margin-top:18px !important;
  font-size:clamp(30px,3vw,42px) !important;
  line-height:1.02 !important;
  font-weight:600 !important;
  letter-spacing:-.045em !important;
}

#ccc .ccc-model-card > .panel-copy{
  max-width:68ch !important;
  margin-top:18px !important;
  font-size:14.5px !important;
  color:#b7b8c2 !important;
}

#ccc .ccc-model-card .hairline{
  margin:28px 0 22px !important;
  background:linear-gradient(90deg,rgba(110,168,255,.30),rgba(167,131,255,.20),transparent) !important;
}

#ccc .ccc-model-sides{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

#ccc .ccc-model-sides > div{
  position:relative;
  min-height:142px;
  padding:20px 20px 18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  overflow:hidden;
}

#ccc .ccc-model-sides > div::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  right:-52px;
  bottom:-68px;
  filter:blur(2px);
  pointer-events:none;
}

#ccc .ccc-human-side{
  background:
    linear-gradient(145deg,rgba(110,168,255,.13),rgba(110,168,255,.035) 70%),
    #0b0d13;
  border-color:rgba(110,168,255,.18) !important;
}

#ccc .ccc-human-side::after{
  background:radial-gradient(circle,rgba(110,168,255,.28),transparent 68%);
}

#ccc .ccc-human-side .tiny-label{
  color:#8fbdff !important;
  -webkit-text-fill-color:#8fbdff !important;
}

#ccc .ccc-ai-side{
  background:
    linear-gradient(145deg,rgba(167,131,255,.16),rgba(167,131,255,.04) 70%),
    #0d0b14;
  border-color:rgba(167,131,255,.20) !important;
}

#ccc .ccc-ai-side::after{
  background:radial-gradient(circle,rgba(167,131,255,.30),transparent 68%);
}

#ccc .ccc-ai-side .tiny-label{
  color:#c1a9ff !important;
  -webkit-text-fill-color:#c1a9ff !important;
}

#ccc .ccc-model-sides .panel-copy{
  margin-top:12px !important;
  max-width:34ch !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:#c1c2ca !important;
}

/* Control Plane — visually strongest operational card */
#ccc .ccc-control-card{
  min-height:410px;
  padding:32px !important;
  background:
    radial-gradient(circle at 80% 10%,rgba(89,216,232,.19),transparent 34%),
    linear-gradient(155deg,rgba(74,99,190,.15),rgba(13,14,22,.98) 52%),
    #0a0b10 !important;
  border-color:rgba(89,216,232,.18) !important;
}

#ccc .ccc-control-card::before{
  background:linear-gradient(90deg,var(--ccc-cyan),var(--ccc-blue)) !important;
}

#ccc .ccc-control-card .tiny-label{
  color:#7de4ee !important;
  -webkit-text-fill-color:#7de4ee !important;
}

#ccc .ccc-control-card .metric{
  margin-top:42px !important;
  font-family:"Inter Tight",Inter,sans-serif !important;
  font-size:clamp(74px,7vw,108px) !important;
  line-height:.82 !important;
  letter-spacing:-.08em !important;
  color:#fff !important;
}

#ccc .ccc-control-card .metric small{
  display:block;
  margin-top:18px;
  font-family:"DM Mono",monospace !important;
  font-size:11px !important;
  line-height:1.2;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:#8bdde8 !important;
}

#ccc .ccc-control-card .panel-copy{
  margin-top:26px !important;
  font-size:13.5px !important;
  line-height:1.62 !important;
}

#ccc .ccc-control-card .hero-tags{
  gap:7px !important;
  margin-top:24px !important;
}

#ccc .ccc-control-card .chip{
  padding:7px 9px !important;
  border-color:rgba(89,216,232,.14) !important;
  background:rgba(89,216,232,.055) !important;
  color:#bfeaf0 !important;
  font-family:"DM Mono",monospace !important;
  font-size:9.5px !important;
}

/* Capability row — three different roles, three different accents */
#ccc .ccc-session-card,
#ccc .ccc-skills-card,
#ccc .ccc-credentials-card{
  min-height:255px !important;
  padding:28px !important;
}

#ccc .ccc-session-card{
  background:
    radial-gradient(circle at 88% 14%,rgba(83,211,173,.15),transparent 36%),
    #090d0c !important;
  border-color:rgba(83,211,173,.15) !important;
}

#ccc .ccc-session-card::before{
  background:linear-gradient(90deg,var(--ccc-teal),var(--ccc-cyan)) !important;
}

#ccc .ccc-session-card .tiny-label{
  color:#78dcbf !important;
  -webkit-text-fill-color:#78dcbf !important;
}

#ccc .ccc-skills-card{
  background:
    radial-gradient(circle at 88% 14%,rgba(167,131,255,.17),transparent 36%),
    #0c0a11 !important;
  border-color:rgba(167,131,255,.16) !important;
}

#ccc .ccc-skills-card::before{
  background:linear-gradient(90deg,var(--ccc-violet),#d27cff) !important;
}

#ccc .ccc-skills-card .tiny-label{
  color:#c5aefe !important;
  -webkit-text-fill-color:#c5aefe !important;
}

#ccc .ccc-credentials-card{
  background:
    radial-gradient(circle at 88% 14%,rgba(240,187,98,.16),transparent 36%),
    #100d08 !important;
  border-color:rgba(240,187,98,.16) !important;
}

#ccc .ccc-credentials-card::before{
  background:linear-gradient(90deg,var(--ccc-amber),#dd8b5f) !important;
}

#ccc .ccc-credentials-card .tiny-label{
  color:#efc881 !important;
  -webkit-text-fill-color:#efc881 !important;
}

#ccc .ccc-session-card .panel-title,
#ccc .ccc-skills-card .panel-title,
#ccc .ccc-credentials-card .panel-title{
  margin-top:34px !important;
  font-size:clamp(23px,2.1vw,30px) !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
}

#ccc .ccc-session-card .panel-copy,
#ccc .ccc-skills-card .panel-copy,
#ccc .ccc-credentials-card .panel-copy{
  margin-top:16px !important;
  font-size:13px !important;
  line-height:1.62 !important;
  color:#aaaab3 !important;
}

/* Section identity accents across the homepage */
#ccc{--section-a:#a783ff;--section-b:#6ea8ff}
#company{--section-a:#6ea8ff;--section-b:#78b8ff}
#governance{--section-a:#63d8a5;--section-b:#8bd7bb}
#models{--section-a:#59d8e8;--section-b:#8e93ff}
#erp{--section-a:#b07cff;--section-b:#7d8dff}
#ecosystem{--section-a:#59c9ff;--section-b:#5fe3d1}
#services{--section-a:#d17cff;--section-b:#8f8cff}
#sectors{--section-a:#f0bb62;--section-b:#cf8cff}
#communications{--section-a:#68a5ff;--section-b:#65d6e8}
#interfaces{--section-a:#a783ff;--section-b:#6ea8ff}
#voice{--section-a:#59d8e8;--section-b:#71a5ff}
#agents{--section-a:#b07cff;--section-b:#78a5ff}
#sentinel{--section-a:#63d8a5;--section-b:#68a5ff}
#deployment{--section-a:#f0a96a;--section-b:#a783ff}
#contact{--section-a:#a783ff;--section-b:#6ea8ff}

main section[id] .eyebrow{
  color:var(--section-a,#cbb6ff) !important;
  -webkit-text-fill-color:var(--section-a,#cbb6ff) !important;
}

main section[id] .eyebrow::before{
  background:linear-gradient(90deg,var(--section-a,#a783ff),var(--section-b,#6ea8ff)) !important;
}

main section[id] .display .accent{
  background:linear-gradient(90deg,var(--section-a,#a783ff),var(--section-b,#6ea8ff)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Major section frames get a subtle identity tint instead of identical flat black */
#company .company-architecture,
#company .team-example{
  background:radial-gradient(circle at 92% 0%,rgba(110,168,255,.10),transparent 30%),#09090c !important;
}
#governance .policy-table,
#governance .passport{
  background:radial-gradient(circle at 92% 0%,rgba(99,216,165,.09),transparent 30%),#09090c !important;
}
#models .llm-copy,
#models .llm-router{
  background:radial-gradient(circle at 92% 0%,rgba(89,216,232,.10),transparent 30%),#09090c !important;
}
#erp .erp-copy{
  background:radial-gradient(circle at 92% 0%,rgba(176,124,255,.10),transparent 30%),#09090c !important;
}
#ecosystem .vps-map{
  background:radial-gradient(circle at 92% 0%,rgba(89,201,255,.10),transparent 30%),#09090c !important;
}
#communications .channel-stack{
  background:radial-gradient(circle at 92% 0%,rgba(104,165,255,.10),transparent 30%),#09090c !important;
}
#agents .agent-copy{
  background:radial-gradient(circle at 92% 0%,rgba(176,124,255,.10),transparent 30%),#09090c !important;
}
#sentinel .panel-pad{
  background:radial-gradient(circle at 92% 0%,rgba(99,216,165,.10),transparent 30%),#09090c !important;
}
#deployment .deployment-copy{
  background:radial-gradient(circle at 92% 0%,rgba(240,169,106,.10),transparent 30%),#09090c !important;
}

@media(max-width:1100px){
  #ccc .ccc-model-card,
  #ccc .ccc-control-card{
    grid-column:span 12 !important;
  }
  #ccc .ccc-session-card,
  #ccc .ccc-skills-card,
  #ccc .ccc-credentials-card{
    grid-column:span 4 !important;
  }
}

@media(max-width:760px){
  #ccc .bento{
    gap:12px !important;
  }

  #ccc .ccc-model-card,
  #ccc .ccc-control-card,
  #ccc .ccc-session-card,
  #ccc .ccc-skills-card,
  #ccc .ccc-credentials-card{
    grid-column:1 / -1 !important;
  }

  #ccc .ccc-model-card{
    min-height:0;
    padding:24px 20px !important;
  }

  #ccc .ccc-model-card > .panel-title{
    font-size:30px !important;
  }

  #ccc .ccc-model-sides{
    grid-template-columns:1fr !important;
  }

  #ccc .ccc-model-sides > div{
    min-height:0;
  }

  #ccc .ccc-control-card{
    min-height:0;
    padding:24px 20px !important;
  }

  #ccc .ccc-control-card .metric{
    font-size:78px !important;
    margin-top:32px !important;
  }

  #ccc .ccc-session-card,
  #ccc .ccc-skills-card,
  #ccc .ccc-credentials-card{
    min-height:0 !important;
    padding:24px 20px !important;
  }
}


/* ---------- MOTION CLARITY — movement without soft-focus text ---------- */
.scroll-motion-item{
  filter:none !important;
}