/* =================================================================
   ATOM × Material 3 — page-specific styles
   ================================================================= */

/* ====================== OVERVIEW HERO ====================== */
.ov-hero{position:relative;border-radius:var(--md-shape-xl);overflow:hidden;min-height:520px;
  display:flex;flex-direction:column;justify-content:center;padding:56px 56px 92px;margin-bottom:8px;
  background:var(--atom-deep-blue);color:#fff;isolation:isolate}
.ov-hero-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--md-dur-long) var(--md-ease-standard)}
.ov-hero[data-variant="aurora"] .ov-bg-aurora{opacity:1}
.ov-hero[data-variant="super"] .ov-bg-super{opacity:1}
.ov-hero[data-variant="tonal"] .ov-bg-tonal{opacity:1}

/* aurora */
.ov-bg-aurora{background:
  radial-gradient(60% 80% at 80% 20%, rgba(0,200,255,.55), transparent 60%),
  radial-gradient(55% 70% at 95% 90%, rgba(137,0,242,.55), transparent 60%),
  radial-gradient(50% 60% at 10% 100%, rgba(36,73,251,.7), transparent 60%),
  var(--atom-deep-blue)}
.ov-hero[data-variant="aurora"] .ov-bg-aurora{animation:auroraShift 18s ease-in-out infinite alternate}
@keyframes auroraShift{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:6% -4%,-5% 5%,4% 3%,0 0}}
/* supergraphic bands */
.ov-bg-super{display:flex;gap:0;background:var(--atom-deep-blue)}
.ov-bg-super .band{flex:1;transform:skewX(-12deg) scaleX(1.3);transform-origin:top;
  filter:saturate(1.1);opacity:.92}
.ov-bg-super::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--atom-deep-blue) 8%,transparent 62%)}
/* tonal grid */
.ov-bg-tonal{background:
  conic-gradient(from 0deg at 0 0, var(--atom-deep-blue), var(--atom-dark-blue), var(--atom-social-blue), var(--atom-deep-blue));
  background-size:100% 100%}
.ov-bg-tonal::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--atom-social-blue) 1px,transparent 1px),linear-gradient(90deg,var(--atom-social-blue) 1px,transparent 1px);
  background-size:64px 64px;opacity:.18}
.ov-bg-tonal::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 75% 30%,transparent,var(--atom-deep-blue) 78%)}
/* film grain */
.ov-hero-grain{position:absolute;inset:0;z-index:-1;opacity:.4;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC41Jy8+PC9zdmc+")}

/* hero layout */
.ov-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.ov-hero-inner{position:relative;max-width:600px}
.ov-hero-inner>*{opacity:0;animation:heroUp .7s var(--md-ease-decel) forwards}
.ov-hero-inner>*:nth-child(1){animation-delay:.05s}
.ov-hero-inner>*:nth-child(2){animation-delay:.13s}
.ov-hero-inner>*:nth-child(3){animation-delay:.21s}
.ov-hero-inner>*:nth-child(4){animation-delay:.29s}
.ov-hero-inner>*:nth-child(5){animation-delay:.37s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ov-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);font-weight:600;font-size:13px;
  letter-spacing:.02em;margin-bottom:22px;border:1px solid rgba(255,255,255,.14)}
.ov-hero-eyebrow .md-i{width:16px;height:16px;color:var(--atom-cyan)}
.ov-hero-title{font-family:var(--md-font-logotype);font-size:66px;line-height:.94;letter-spacing:-.03em;margin:0 0 22px;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.2)}
.ov-hero-sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,.84);max-width:48ch;margin:0 0 28px}
.ov-hero-sub b{color:#fff;font-weight:700}
.ov-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.ov-hero[data-variant] .ov-hero-ctas .md-btn--outlined{color:#fff;border-color:rgba(255,255,255,.4)}
.ov-hero-meta{display:flex;align-items:center;gap:22px}
.ov-hero-meta>div:not(.ov-hm-div){display:flex;flex-direction:column}
.ov-hero-meta b{font-family:var(--md-font-logotype);font-size:26px;line-height:1;letter-spacing:-.02em}
.ov-hero-meta span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:5px}
.ov-hm-div{width:1px;height:30px;background:rgba(255,255,255,.18)}

/* floating sample cards */
.ov-hero-stage{position:relative;height:380px}
.ov-hero-conv{position:absolute;right:-90px;top:-40px;width:300px;opacity:.5;transform:rotate(-6deg);pointer-events:none}
.float-card{position:absolute;background:rgba(255,255,255,.96);border-radius:18px;padding:16px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);backdrop-filter:blur(6px);color:var(--atom-deep-blue);
  opacity:0;animation:floatIn .8s var(--md-ease-decel) forwards}
@keyframes floatIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.fc-token{top:8px;left:24px;width:208px;animation-delay:.4s}
.fc-token.float-card{animation:floatIn .8s var(--md-ease-decel) .4s forwards, bobA 6s ease-in-out 1.2s infinite}
.fc-comp{top:120px;right:0;width:230px;animation-delay:.55s}
.fc-comp.float-card{animation:floatIn .8s var(--md-ease-decel) .55s forwards, bobB 7s ease-in-out 1.4s infinite}
.fc-type{bottom:0;left:48px;width:188px;display:flex;align-items:center;gap:14px;animation-delay:.7s}
.fc-type.float-card{animation:floatIn .8s var(--md-ease-decel) .7s forwards, bobA 6.5s ease-in-out 1.6s infinite}
@keyframes bobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bobB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.fc-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fc-pip{width:14px;height:14px;border-radius:50%}
.fc-row b{font-family:var(--md-font-brand);font-weight:700;font-size:14px;flex:1}
.fc-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A80A5;background:#EEEDF7;padding:2px 7px;border-radius:6px}
.fc-swatch{height:64px;border-radius:12px;margin-bottom:10px}
.fc-token code{font-family:var(--md-font-mono);font-size:11px;color:#45465A}
.fc-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A80A5;margin-bottom:12px}
.fc-btnrow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fc-btn{background:#2449FB;color:#fff;font-family:var(--md-font-brand);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;flex:1;text-align:center}
.fc-btnrow .md-i{width:18px;height:18px;color:#2449FB}
.fc-chips{display:flex;gap:8px;margin-bottom:14px}
.fc-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--md-font-brand);font-weight:600;font-size:12px;
  padding:5px 12px;border-radius:8px;border:1px solid #C7C6D6;color:#45465A}
.fc-chip.on{background:#C7E7FF;border-color:transparent;color:#001E30}
.fc-chip .md-i{width:14px;height:14px;margin-left:-2px}
.fc-switchrow{display:flex;align-items:center;gap:10px;font-family:var(--md-font-brand);font-weight:600;font-size:13px;color:#45465A}
.fc-switch{width:40px;height:24px;border-radius:999px;background:#C7C6D6;position:relative;flex:0 0 auto}
.fc-switch.on{background:#2449FB}
.fc-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.fc-switch.on i{left:19px}
.fc-aa{font-family:var(--md-font-logotype);font-size:42px;line-height:1;color:#2449FB}
.fc-typemeta{display:flex;flex-direction:column;gap:3px}
.fc-typemeta b{font-family:var(--md-font-brand);font-weight:700;font-size:14px;color:var(--atom-deep-blue)}
.fc-typemeta span{font-size:11px;color:#7A80A5}

.ov-hero-switch{position:absolute;left:56px;bottom:22px;display:flex;align-items:center;gap:14px;z-index:2}
.ov-switch-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ov-hero-switch .md-segmented{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.ov-hero-switch .md-seg{color:#fff;border-color:rgba(255,255,255,.2)}
.ov-hero-switch .md-seg[aria-pressed="true"]{background:rgba(255,255,255,.92);color:var(--atom-deep-blue)}

/* pillars */
.ov-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
.ov-pillar{background:var(--md-surface-container-low);border-radius:var(--md-shape-lg);padding:24px}
.ov-pillar-ic{width:48px;height:48px;border-radius:var(--md-shape-md);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ov-pillar-ic .md-i{width:24px;height:24px}
.ov-pillar h3{font-family:var(--md-font-brand);font-weight:700;font-size:18px;margin:0 0 8px;color:var(--md-on-surface)}
.ov-pillar p{font-size:14px;line-height:1.55;color:var(--md-on-surface-variant);margin:0}

/* start cards */
.ov-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ov-card{display:flex;flex-direction:column;text-decoration:none;color:var(--md-on-surface);min-height:200px;padding:20px}
.ov-card h3{font-family:var(--md-font-brand);font-weight:700;font-size:18px;margin:0 0 6px}
.ov-card p{font-size:13px;line-height:1.5;color:var(--md-on-surface-variant);margin:0;flex:1}
.ov-card-go{width:36px;height:36px;border-radius:50%;background:var(--md-primary);color:var(--md-on-primary);
  display:flex;align-items:center;justify-content:center;align-self:flex-end;margin-top:12px;
  transition:transform var(--md-dur-short) var(--md-ease-standard)}
.ov-card-go .md-i{width:18px;height:18px}
.ov-card:hover .ov-card-go{transform:translateX(4px)}
.ov-card-swatches{display:flex;gap:6px;margin-bottom:16px}
.ov-card-swatches span{width:28px;height:28px;border-radius:8px}
.ov-card-type{font-family:var(--md-font-logotype);font-size:40px;color:var(--md-primary);line-height:1;margin-bottom:12px}
.ov-card-btns{display:flex;gap:6px;margin-bottom:16px}
.ov-card-conv{margin-bottom:12px}
.ov-card-conv img{height:30px}

/* quote */
.ov-quote{position:relative;margin-top:64px;background:var(--grad-primary);border-radius:var(--md-shape-xl);
  padding:56px;color:#fff;overflow:hidden}
.ov-quote-conv{position:absolute;right:-30px;bottom:-30px;width:200px;opacity:.18;transform:rotate(-10deg)}
.ov-quote-text{font-family:var(--md-font-brand);font-weight:700;font-size:34px;line-height:1.2;margin:0 0 16px;max-width:18ch}
.ov-quote-by{font-size:15px;color:rgba(255,255,255,.78);margin:0;max-width:50ch}

/* ====================== PRINCIPLES ====================== */
.pr-list{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.pr-item{display:flex;gap:24px;align-items:flex-start;padding:28px}
.pr-num{font-family:var(--md-font-logotype);font-size:40px;color:var(--md-primary);line-height:1;opacity:.5;flex:0 0 auto}
.pr-ic{width:48px;height:48px;border-radius:var(--md-shape-md);background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pr-ic .md-i{width:24px;height:24px}
.pr-body h3{font-family:var(--md-font-brand);font-weight:700;font-size:20px;margin:0 0 8px;color:var(--md-on-surface)}
.pr-body p{font-size:15px;line-height:1.6;color:var(--md-on-surface-variant);margin:0}

@media(max-width:1100px){
  .ov-hero-grid{grid-template-columns:1fr}
  .ov-hero-stage{display:none}
  .ov-hero-inner{max-width:none}
}
@media(max-width:900px){
  .ov-pillars{grid-template-columns:1fr}
  .ov-cards{grid-template-columns:repeat(2,1fr)}
  .ov-hero{padding:36px 28px 92px;min-height:0}
  .ov-hero-title{font-size:52px}
  .ov-hero-switch{left:28px}
}