/* ==========================================================
HERITAGE COLLECTION™ GLOBAL PLATFORM
PAGE STYLESHEET — PLATFORM
assets/css/pages/platform.css
Pure CSS. No framework, no dependency, no build step.
========================================================== */
/* ==========================================================
01 — TOKENS
========================================================== */
:root{
--pf-bg:#050505;
--pf-layer:#0f1115;
--pf-card:#14171d;
--pf-card-raised:#191d25;
--pf-border:rgba(255,255,255,.08);
--pf-border-soft:rgba(255,255,255,.05);
--pf-border-strong:rgba(255,255,255,.14);
--pf-text:#f5f5f5;
--pf-text-2:rgba(255,255,255,.70);
--pf-text-3:rgba(255,255,255,.45);
--pf-gold:#d4af37;
--pf-gold-hover:#e7c45a;
--pf-gold-08:rgba(212,175,55,.08);
--pf-gold-14:rgba(212,175,55,.14);
--pf-gold-22:rgba(212,175,55,.22);
--pf-gold-38:rgba(212,175,55,.38);
--pf-font:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Helvetica Neue",
Arial,
sans-serif;
--pf-w-light:300;
--pf-w-regular:400;
--pf-w-medium:500;
--pf-w-semibold:600;
--pf-w-bold:700;
--pf-container:1360px;
--pf-gutter:40px;
--pf-radius-sm:10px;
--pf-radius-md:16px;
--pf-radius-lg:22px;
--pf-radius-xl:30px;
--pf-radius-round:999px;
--pf-block:clamp(90px,10vw,168px);
--pf-shadow-card:0 24px 60px rgba(0,0,0,.45);
--pf-shadow-raised:0 36px 90px rgba(0,0,0,.55);
--pf-shadow-gold:0 0 44px rgba(212,175,55,.10);
--pf-ease:cubic-bezier(.22,.61,.36,1);
--pf-fast:.22s var(--pf-ease);
--pf-base:.38s var(--pf-ease);
--pf-slow:.72s var(--pf-ease);
}
/* ==========================================================
02 — CONTAINER
========================================================== */
.container{
width:100%;
max-width:var(--pf-container);
margin-inline:auto;
padding-inline:var(--pf-gutter);
}
/* ==========================================================
03 — PAGE BLOCK
========================================================== */
.page-block{
position:relative;
padding-block:var(--pf-block);
overflow:hidden;
isolation:isolate;
background:var(--pf-bg);
color:var(--pf-text);
font-family:var(--pf-font);
font-weight:var(--pf-w-regular);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.page-block-alt{
background:
linear-gradient(
180deg,
var(--pf-bg) 0%,
var(--pf-layer) 42%,
var(--pf-bg) 100%
);
}
/* fine grid, masked so it never reaches the edges */
.page-block::before{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:.42;
pointer-events:none;
background-image:
linear-gradient(
rgba(255,255,255,.018) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.018) 1px,
transparent 1px
);
background-size:78px 78px;
-webkit-mask-image:
radial-gradient(
ellipse at 50% 34%,
#000 22%,
transparent 80%
);
mask-image:
radial-gradient(
ellipse at 50% 34%,
#000 22%,
transparent 80%
);
}
.page-block > .container{
position:relative;
z-index:2;
}
/* ==========================================================
04 — BLOCK HEADER
========================================================== */
.block-header{
width:min(760px,100%);
margin:0 0 clamp(48px,5vw,84px);
}
.block-header h2{
margin:0 0 20px;
color:var(--pf-text);
font-size:clamp(30px,3.1vw,50px);
font-weight:var(--pf-w-semibold);
line-height:1.16;
letter-spacing:-.026em;
text-wrap:balance;
}
.block-header p{
margin:0;
max-width:640px;
color:var(--pf-text-2);
font-size:clamp(15px,1.05vw,18px);
font-weight:var(--pf-w-light);
line-height:1.82;
}
/* ==========================================================
05 — SECTION EYEBROW
========================================================== */
.section-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 22px;
padding:7px 16px;
border-radius:var(--pf-radius-round);
background:var(--pf-gold-08);
border:1px solid var(--pf-gold-22);
color:var(--pf-gold);
font-size:11px;
font-weight:var(--pf-w-semibold);
line-height:1.4;
letter-spacing:.17em;
text-transform:uppercase;
}
.section-eyebrow::before{
content:"";
width:5px;
height:5px;
flex-shrink:0;
border-radius:50%;
background:var(--pf-gold);
box-shadow:0 0 10px var(--pf-gold-38);
}
/* ==========================================================
06 — LEAD
========================================================== */
.page-lead{
max-width:660px;
margin:0;
color:var(--pf-text-2);
font-size:clamp(16px,1.15vw,19px);
font-weight:var(--pf-w-light);
line-height:1.85;
letter-spacing:.002em;
}
/* ==========================================================
07 — GRADIENT TEXT
========================================================== */
.text-gradient{
background:
linear-gradient(
96deg,
var(--pf-gold-hover) 0%,
var(--pf-gold) 44%,
#b8912a 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
/* ==========================================================
08 — MODULE INDEX
========================================================== */
.module-index{
display:inline-block;
color:var(--pf-gold);
font-size:12px;
font-weight:var(--pf-w-semibold);
font-variant-numeric:tabular-nums;
line-height:1;
letter-spacing:.16em;
opacity:.62;
transition:opacity var(--pf-base),color var(--pf-base);
}
/* ==========================================================
09 — BUTTONS
========================================================== */
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:52px;
padding:0 30px;
border:1px solid transparent;
border-radius:var(--pf-radius-round);
font-family:var(--pf-font);
font-size:14px;
font-weight:var(--pf-w-medium);
line-height:1;
letter-spacing:.01em;
text-align:center;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
overflow:hidden;
transition:
transform var(--pf-fast),
background-color var(--pf-base),
border-color var(--pf-base),
color var(--pf-base),
box-shadow var(--pf-base);
}
.btn:active{
transform:translateY(0);
}
.btn:focus-visible{
outline:2px solid var(--pf-gold);
outline-offset:3px;
}
/* ---------- primary ---------- */
.btn-primary{
background:
linear-gradient(
180deg,
var(--pf-gold-hover) 0%,
var(--pf-gold) 100%
);
border-color:var(--pf-gold);
color:#0b0b0b;
font-weight:var(--pf-w-semibold);
box-shadow:0 14px 34px rgba(212,175,55,.20);
}
.btn-primary::after{
content:"";
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
background:
linear-gradient(
180deg,
rgba(255,255,255,.28),
transparent 60%
);
transition:opacity var(--pf-base);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:
0 20px 46px rgba(212,175,55,.28),
var(--pf-shadow-gold);
}
.btn-primary:hover::after{
opacity:1;
}
/* ---------- secondary ---------- */
.btn-secondary{
background:rgba(255,255,255,.035);
border-color:var(--pf-border-strong);
color:var(--pf-text);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
}
.btn-secondary:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.06);
border-color:var(--pf-gold-38);
color:var(--pf-gold-hover);
}
/* ==========================================================
10 — PAGE HERO
========================================================== */
.page-hero{
position:relative;
display:flex;
align-items:center;
min-height:100vh;
min-height:100svh;
padding-block:clamp(140px,15vw,210px) clamp(90px,10vw,140px);
overflow:hidden;
isolation:isolate;
background:var(--pf-bg);
color:var(--pf-text);
font-family:var(--pf-font);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.platform-hero{
background:
radial-gradient(
ellipse 62% 58% at 50% -8%,
rgba(212,175,55,.13),
transparent 68%
),
radial-gradient(
ellipse 48% 44% at 84% 78%,
rgba(255,255,255,.028),
transparent 62%
),
linear-gradient(
180deg,
var(--pf-bg) 0%,
var(--pf-layer) 100%
);
}
/* hero grid */
.platform-hero::before{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:.5;
pointer-events:none;
background-image:
linear-gradient(
rgba(255,255,255,.02) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.02) 1px,
transparent 1px
);
background-size:78px 78px;
-webkit-mask-image:
radial-gradient(
ellipse at 50% 30%,
#000 20%,
transparent 78%
);
mask-image:
radial-gradient(
ellipse at 50% 30%,
#000 20%,
transparent 78%
);
}
/* ---------- overlay ---------- */
.page-hero-overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(
180deg,
transparent 0%,
transparent 52%,
rgba(5,5,5,.72) 88%,
var(--pf-bg) 100%
);
}
.page-hero-overlay::after{
content:"";
position:absolute;
left:50%;
bottom:-42%;
width:min(1180px,120%);
aspect-ratio:2 / 1;
transform:translateX(-50%);
border-radius:50%;
pointer-events:none;
background:
radial-gradient(
ellipse,
rgba(212,175,55,.09),
transparent 66%
);
animation:pfAura 16s ease-in-out infinite;
}
/* ---------- inner ---------- */
.page-hero-inner{
position:relative;
z-index:4;
width:min(920px,100%);
}
.page-hero-inner .section-eyebrow{
animation:pfRise .9s var(--pf-ease) .04s both;
}
.page-hero-inner h1{
margin:0 0 26px;
color:var(--pf-text);
font-size:clamp(40px,5.2vw,86px);
font-weight:var(--pf-w-bold);
line-height:1.08;
letter-spacing:-.034em;
text-wrap:balance;
animation:pfRise .9s var(--pf-ease) .12s both;
}
.page-hero-inner h1 span{
display:block;
}
.page-hero-inner .page-lead{
animation:pfRise .9s var(--pf-ease) .22s both;
}
/* ---------- hero actions ---------- */
.platform-hero-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-top:clamp(34px,3.6vw,50px);
animation:pfRise .9s var(--pf-ease) .32s both;
}
.platform-hero-actions .btn{
min-width:212px;
}
/* ==========================================================
11 — DEFINITION
========================================================== */
.platform-definition{
position:relative;
}
.platform-definition-grid{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
align-items:center;
gap:clamp(44px,5vw,88px);
}
.platform-definition-copy h2{
margin:0 0 22px;
color:var(--pf-text);
font-size:clamp(30px,3.3vw,54px);
font-weight:var(--pf-w-semibold);
line-height:1.14;
letter-spacing:-.03em;
text-wrap:balance;
}
.platform-definition-copy .page-lead{
margin-bottom:24px;
}
.platform-definition-lead{
max-width:620px;
margin:0 0 24px;
color:var(--pf-text-2);
font-size:clamp(16px,1.15vw,19px);
font-weight:var(--pf-w-light);
line-height:1.85;
letter-spacing:.002em;
text-wrap:pretty;
}
.platform-definition-lead strong,
.platform-definition-lead b{
color:var(--pf-text);
font-weight:var(--pf-w-medium);
}
.platform-definition-content{
position:relative;
padding-left:24px;
border-left:1px solid var(--pf-gold-38);
color:var(--pf-text-2);
font-size:clamp(14.5px,1vw,16.5px);
font-weight:var(--pf-w-light);
line-height:1.88;
}
/* ---------- statement panel ---------- */
.platform-definition-statement{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
min-height:340px;
padding:clamp(34px,3.4vw,54px);
overflow:hidden;
border-radius:var(--pf-radius-xl);
background:
linear-gradient(
166deg,
var(--pf-card-raised) 0%,
var(--pf-card) 58%,
#0d1014 100%
);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-raised);
transition:
border-color var(--pf-base),
box-shadow var(--pf-base),
transform var(--pf-base);
}
.platform-definition-statement::before{
content:"";
position:absolute;
top:0;
left:12%;
right:12%;
height:1px;
pointer-events:none;
background:
linear-gradient(
90deg,
transparent,
var(--pf-gold-38),
transparent
);
}
.platform-definition-statement::after{
content:"";
position:absolute;
top:-38%;
right:-24%;
width:64%;
aspect-ratio:1;
border-radius:50%;
pointer-events:none;
background:
radial-gradient(
circle,
rgba(212,175,55,.16),
transparent 68%
);
animation:pfDrift 18s ease-in-out infinite;
}
.platform-definition-statement:hover{
transform:translateY(-4px);
border-color:var(--pf-gold-22);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.platform-definition-statement > *{
position:relative;
z-index:2;
}
.platform-definition-statement small{
display:block;
margin-bottom:26px;
color:var(--pf-gold);
font-size:11px;
font-weight:var(--pf-w-semibold);
letter-spacing:.2em;
text-transform:uppercase;
}
.platform-definition-statement strong{
display:block;
margin-bottom:14px;
color:var(--pf-text);
font-size:clamp(16px,1.3vw,20px);
font-weight:var(--pf-w-bold);
line-height:1.3;
letter-spacing:.04em;
}
.platform-definition-statement p{
margin:0;
font-size:clamp(20px,2.1vw,34px);
font-weight:var(--pf-w-semibold);
line-height:1.28;
letter-spacing:-.02em;
text-wrap:balance;
}
/* ==========================================================
12 — ARCHITECTURE
========================================================== */
.platform-architecture{
position:relative;
}
.platform-layer-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin:0;
padding:0;
list-style:none;
}
.platform-layer-card{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
min-height:230px;
padding:32px 28px 30px;
overflow:hidden;
border-radius:var(--pf-radius-lg);
background:
linear-gradient(
180deg,
rgba(255,255,255,.045) 0%,
rgba(255,255,255,.014) 100%
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-card);
transition:
transform var(--pf-base),
border-color var(--pf-base),
background-color var(--pf-base),
box-shadow var(--pf-base);
}
.platform-layer-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
pointer-events:none;
background:
linear-gradient(
90deg,
transparent,
var(--pf-gold-38),
transparent
);
}
.platform-layer-card::after{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:0;
pointer-events:none;
background:
radial-gradient(
circle at 50% 0%,
var(--pf-gold-14),
transparent 62%
);
transition:opacity var(--pf-base);
}
.platform-layer-card > *{
position:relative;
z-index:2;
}
.platform-layer-card:hover,
.platform-layer-card:focus-within{
transform:translateY(-6px);
border-color:var(--pf-gold-22);
background-color:rgba(255,255,255,.02);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.platform-layer-card:hover::after,
.platform-layer-card:focus-within::after{
opacity:1;
}
.platform-layer-card:hover .module-index,
.platform-layer-card:focus-within .module-index{
opacity:1;
color:var(--pf-gold-hover);
}
.platform-layer-card h3{
margin:0 0 12px;
color:var(--pf-text);
font-size:clamp(17px,1.35vw,21px);
font-weight:var(--pf-w-semibold);
line-height:1.32;
letter-spacing:-.012em;
}
.platform-layer-card p{
margin:0;
color:var(--pf-text-2);
font-size:14.5px;
font-weight:var(--pf-w-light);
line-height:1.78;
}
/* ---------- layer head ---------- */
.platform-layer-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
width:100%;
margin-bottom:26px;
}
.platform-layer-index{
color:var(--pf-gold);
font-size:13px;
font-weight:var(--pf-w-semibold);
font-variant-numeric:tabular-nums;
line-height:1;
letter-spacing:.16em;
opacity:.62;
transition:opacity var(--pf-base),color var(--pf-base);
}
.platform-layer-card:hover .platform-layer-index,
.platform-layer-card:focus-within .platform-layer-index{
opacity:1;
color:var(--pf-gold-hover);
}
/* ---------- layer status ---------- */
.platform-layer-status{
display:inline-flex;
align-items:center;
gap:7px;
flex-shrink:0;
padding:5px 12px;
border-radius:var(--pf-radius-round);
background:rgba(255,255,255,.04);
border:1px solid var(--pf-border);
color:var(--pf-text-3);
font-size:9.5px;
font-weight:var(--pf-w-semibold);
line-height:1.4;
letter-spacing:.16em;
text-transform:uppercase;
transition:
background-color var(--pf-base),
border-color var(--pf-base),
color var(--pf-base);
}
.platform-layer-status::before{
content:"";
width:5px;
height:5px;
flex-shrink:0;
border-radius:50%;
background:currentColor;
}
.platform-layer-card:hover .platform-layer-status,
.platform-layer-card:focus-within .platform-layer-status{
background:var(--pf-gold-08);
border-color:var(--pf-gold-22);
color:var(--pf-gold);
}
/* ==========================================================
13 — CHAIN
========================================================== */
.platform-chain{
position:relative;
}
.platform-chain-list{
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px 44px;
margin:0;
padding:0;
list-style:none;
}
.platform-chain-item{
position:relative;
display:flex;
align-items:flex-start;
gap:24px;
padding:26px 28px 26px 24px;
overflow:hidden;
border-radius:var(--pf-radius-md);
background:
linear-gradient(
180deg,
rgba(255,255,255,.04) 0%,
rgba(255,255,255,.012) 100%
),
var(--pf-card);
border:1px solid var(--pf-border-soft);
transition:
transform var(--pf-base),
border-color var(--pf-base),
background-color var(--pf-base),
box-shadow var(--pf-base);
}
.platform-chain-item::after{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:0;
pointer-events:none;
background:
linear-gradient(
96deg,
var(--pf-gold-14),
transparent 52%
);
transition:opacity var(--pf-base);
}
.platform-chain-item:hover,
.platform-chain-item:focus-within{
transform:translateX(5px);
border-color:var(--pf-gold-22);
background-color:rgba(255,255,255,.02);
box-shadow:var(--pf-shadow-card);
}
.platform-chain-item:hover::after,
.platform-chain-item:focus-within::after{
opacity:1;
}
/* ---------- marker ---------- */
.platform-chain-marker{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:46px;
height:46px;
border-radius:50%;
background:var(--pf-gold-08);
border:1px solid var(--pf-gold-22);
color:var(--pf-gold);
font-size:12px;
font-weight:var(--pf-w-semibold);
font-variant-numeric:tabular-nums;
line-height:1;
letter-spacing:.06em;
transition:
background-color var(--pf-base),
border-color var(--pf-base),
color var(--pf-base),
box-shadow var(--pf-base);
}
.platform-chain-marker::before{
content:"";
position:absolute;
inset:-5px;
border-radius:50%;
border:1px solid var(--pf-gold-14);
opacity:0;
transition:opacity var(--pf-base);
}
.platform-chain-item:hover .platform-chain-marker,
.platform-chain-item:focus-within .platform-chain-marker{
background:var(--pf-gold-14);
border-color:var(--pf-gold-38);
color:var(--pf-gold-hover);
box-shadow:var(--pf-shadow-gold);
}
.platform-chain-item:hover .platform-chain-marker::before,
.platform-chain-item:focus-within .platform-chain-marker::before{
opacity:1;
}
/* ---------- content ---------- */
.platform-chain-content{
position:relative;
z-index:2;
min-width:0;
}
.platform-chain-content h3{
margin:0 0 8px;
color:var(--pf-text);
font-size:clamp(16px,1.2vw,19px);
font-weight:var(--pf-w-semibold);
line-height:1.34;
letter-spacing:-.01em;
}
.platform-chain-content p{
margin:0;
color:var(--pf-text-2);
font-size:14px;
font-weight:var(--pf-w-light);
line-height:1.76;
}
/* ---------- label ---------- */
.platform-chain-label{
display:inline-block;
margin-bottom:10px;
color:var(--pf-gold);
font-size:9.5px;
font-weight:var(--pf-w-semibold);
line-height:1.4;
letter-spacing:.2em;
text-transform:uppercase;
opacity:.78;
transition:opacity var(--pf-base),color var(--pf-base);
}
.platform-chain-item:hover .platform-chain-label,
.platform-chain-item:focus-within .platform-chain-label{
opacity:1;
color:var(--pf-gold-hover);
}
/* ==========================================================
14 — NETWORK
========================================================== */
.platform-network{
position:relative;
}
.platform-network-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin:0;
padding:0;
list-style:none;
}
.platform-network-card{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
padding:30px 26px 28px;
overflow:hidden;
border-radius:var(--pf-radius-lg);
background:
linear-gradient(
180deg,
rgba(255,255,255,.04) 0%,
rgba(255,255,255,.012) 100%
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-card);
transition:
transform var(--pf-base),
border-color var(--pf-base),
background-color var(--pf-base),
box-shadow var(--pf-base);
}
.platform-network-card::after{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:0;
pointer-events:none;
background:
radial-gradient(
circle at 50% 0%,
var(--pf-gold-14),
transparent 60%
);
transition:opacity var(--pf-base);
}
.platform-network-card > *{
position:relative;
z-index:2;
}
.platform-network-card:hover,
.platform-network-card:focus-within{
transform:translateY(-6px);
border-color:var(--pf-gold-22);
background-color:rgba(255,255,255,.02);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.platform-network-card:hover::after,
.platform-network-card:focus-within::after{
opacity:1;
}
.platform-network-card h3{
margin:0 0 10px;
color:var(--pf-text);
font-size:clamp(16px,1.25vw,20px);
font-weight:var(--pf-w-semibold);
line-height:1.32;
letter-spacing:-.012em;
}
.platform-network-card p{
margin:0;
color:var(--pf-text-2);
font-size:14px;
font-weight:var(--pf-w-light);
line-height:1.76;
}
.platform-network-index{
display:block;
margin-bottom:22px;
color:var(--pf-gold);
font-size:12px;
font-weight:var(--pf-w-semibold);
font-variant-numeric:tabular-nums;
line-height:1;
letter-spacing:.16em;
opacity:.6;
transition:opacity var(--pf-base),color var(--pf-base);
}
.platform-network-card:hover .platform-network-index,
.platform-network-card:focus-within .platform-network-index{
opacity:1;
color:var(--pf-gold-hover);
}
/* ==========================================================
15 — VALUE
========================================================== */
.platform-value{
position:relative;
}
.platform-value-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin:0;
padding:0;
list-style:none;
}
.platform-value-card{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
padding:32px 28px 30px;
overflow:hidden;
border-radius:var(--pf-radius-lg);
background:
linear-gradient(
180deg,
rgba(255,255,255,.045) 0%,
rgba(255,255,255,.012) 100%
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-card);
transition:
transform var(--pf-base),
border-color var(--pf-base),
background-color var(--pf-base),
box-shadow var(--pf-base);
}
.platform-value-card::before{
content:"";
position:absolute;
left:0;
top:26px;
bottom:26px;
width:1px;
pointer-events:none;
background:
linear-gradient(
180deg,
transparent,
var(--pf-gold-38),
transparent
);
opacity:0;
transition:opacity var(--pf-base);
}
.platform-value-card::after{
content:"";
position:absolute;
inset:0;
z-index:0;
opacity:0;
pointer-events:none;
background:
radial-gradient(
circle at 12% 0%,
var(--pf-gold-14),
transparent 58%
);
transition:opacity var(--pf-base);
}
.platform-value-card > *{
position:relative;
z-index:2;
}
.platform-value-card:hover,
.platform-value-card:focus-within{
transform:translateY(-6px);
border-color:var(--pf-gold-22);
background-color:rgba(255,255,255,.02);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.platform-value-card:hover::before,
.platform-value-card:focus-within::before,
.platform-value-card:hover::after,
.platform-value-card:focus-within::after{
opacity:1;
}
.platform-value-card h3{
margin:0 0 12px;
color:var(--pf-text);
font-size:clamp(17px,1.3vw,21px);
font-weight:var(--pf-w-semibold);
line-height:1.3;
letter-spacing:-.012em;
}
.platform-value-card p{
margin:0;
color:var(--pf-text-2);
font-size:14.5px;
font-weight:var(--pf-w-light);
line-height:1.78;
}
.platform-value-index{
display:block;
margin-bottom:24px;
color:var(--pf-gold);
font-size:26px;
font-weight:var(--pf-w-light);
font-variant-numeric:tabular-nums;
line-height:1;
letter-spacing:-.02em;
opacity:.4;
transition:opacity var(--pf-base),color var(--pf-base);
}
.platform-value-card:hover .platform-value-index,
.platform-value-card:focus-within .platform-value-index{
opacity:.95;
color:var(--pf-gold-hover);
}
/* ==========================================================
16 — VISION
========================================================== */
.platform-vision{
position:relative;
}
.platform-vision-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:center;
gap:clamp(40px,4.6vw,84px);
padding:clamp(38px,4vw,72px);
overflow:hidden;
border-radius:var(--pf-radius-xl);
background:
linear-gradient(
160deg,
rgba(255,255,255,.045) 0%,
rgba(255,255,255,.012) 46%,
transparent 100%
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-raised);
}
.platform-vision-shell::before{
content:"";
position:absolute;
top:-30%;
left:-14%;
width:56%;
aspect-ratio:1;
border-radius:50%;
pointer-events:none;
background:
radial-gradient(
circle,
rgba(212,175,55,.15),
transparent 68%
);
animation:pfDrift 20s ease-in-out infinite;
}
.platform-vision-shell > *{
position:relative;
z-index:2;
}
/* ---------- copy ---------- */
.platform-vision-copy h2{
margin:0 0 20px;
color:var(--pf-text);
font-size:clamp(28px,3.1vw,50px);
font-weight:var(--pf-w-semibold);
line-height:1.14;
letter-spacing:-.03em;
text-wrap:balance;
}
.platform-vision-copy h2 span{
display:block;
}
.platform-vision-copy .page-lead{
max-width:none;
}
/* ---------- points ---------- */
.platform-vision-points{
margin:0;
padding:0;
list-style:none;
}
.platform-vision-point{
position:relative;
display:flex;
align-items:flex-start;
gap:18px;
padding:20px 0;
border-bottom:1px solid var(--pf-border-soft);
color:var(--pf-text-2);
font-size:15px;
font-weight:var(--pf-w-light);
line-height:1.72;
transition:color var(--pf-base),padding-left var(--pf-base);
}
.platform-vision-point:first-child{
padding-top:0;
}
.platform-vision-point:last-child{
padding-bottom:0;
border-bottom:0;
}
/*
The number is supplied by the markup:
No CSS counter is generated anywhere in this file, so a duplicate
number cannot occur.
*/
.platform-vision-point > span{
flex-shrink:0;
color:var(--pf-gold);
font-size:11px;
font-weight:var(--pf-w-semibold);
font-variant-numeric:tabular-nums;
line-height:1.9;
letter-spacing:.16em;
opacity:.6;
transition:opacity var(--pf-base),color var(--pf-base);
}
.platform-vision-point > p{
margin:0;
min-width:0;
}
.platform-vision-point:hover{
padding-left:8px;
color:var(--pf-text);
}
.platform-vision-point:hover > span{
opacity:1;
color:var(--pf-gold-hover);
}
/* ==========================================================
17 — EXECUTIVE
========================================================== */
.platform-executive{
position:relative;
text-align:center;
}
.platform-executive-inner{
position:relative;
width:min(1000px,100%);
margin-inline:auto;
padding:clamp(44px,4.6vw,84px) clamp(28px,4vw,72px);
overflow:hidden;
border-radius:var(--pf-radius-xl);
background:
radial-gradient(
ellipse 78% 120% at 50% 0%,
rgba(212,175,55,.1),
transparent 66%
),
linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.01)
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-raised);
}
.platform-executive-inner::before{
content:"“";
position:absolute;
top:-26px;
left:50%;
transform:translateX(-50%);
color:var(--pf-gold);
font-size:clamp(120px,13vw,200px);
font-weight:var(--pf-w-bold);
line-height:1;
opacity:.09;
pointer-events:none;
user-select:none;
}
.platform-executive-inner > *{
position:relative;
z-index:2;
}
.platform-executive-inner .section-eyebrow{
margin-bottom:32px;
}
.platform-executive-inner > blockquote,
.platform-executive-inner > blockquote > p{
max-width:820px;
margin:0 auto;
color:var(--pf-text);
font-size:clamp(20px,2.2vw,34px);
font-weight:var(--pf-w-light);
line-height:1.44;
letter-spacing:-.022em;
text-wrap:balance;
}
.platform-executive-inner > blockquote{
padding:0;
border:0;
quotes:none;
}
.platform-executive-inner > blockquote > p{
margin-block:0;
}
.platform-executive-inner > blockquote > p + p{
margin-top:18px;
}
.platform-executive-caption{
display:inline-flex;
align-items:center;
gap:12px;
margin-top:clamp(28px,3vw,44px);
color:var(--pf-text-3);
font-size:11.5px;
font-weight:var(--pf-w-medium);
line-height:1.5;
letter-spacing:.16em;
text-transform:uppercase;
}
.platform-executive-caption::before{
content:"";
width:34px;
height:1px;
flex-shrink:0;
background:
linear-gradient(
90deg,
transparent,
var(--pf-gold)
);
}
.platform-executive-caption::after{
content:"";
width:34px;
height:1px;
flex-shrink:0;
background:
linear-gradient(
90deg,
var(--pf-gold),
transparent
);
}
/* ==========================================================
18 — FINAL CTA
========================================================== */
.platform-final{
position:relative;
}
.platform-final-cta{
position:relative;
width:min(980px,100%);
margin-inline:auto;
padding:clamp(44px,4.8vw,86px) clamp(30px,4vw,72px);
overflow:hidden;
border-radius:var(--pf-radius-xl);
text-align:center;
background:
radial-gradient(
ellipse 90% 130% at 50% 0%,
rgba(212,175,55,.14),
transparent 64%
),
linear-gradient(
180deg,
var(--pf-card-raised),
#0c0f13
);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-raised);
transition:border-color var(--pf-base),box-shadow var(--pf-base);
}
.platform-final-cta::before{
content:"";
position:absolute;
top:0;
left:16%;
right:16%;
height:1px;
pointer-events:none;
background:
linear-gradient(
90deg,
transparent,
var(--pf-gold),
transparent
);
opacity:.55;
}
.platform-final-cta::after{
content:"";
position:absolute;
left:50%;
bottom:-58%;
width:78%;
aspect-ratio:2 / 1;
transform:translateX(-50%);
border-radius:50%;
pointer-events:none;
background:
radial-gradient(
ellipse,
rgba(212,175,55,.12),
transparent 68%
);
animation:pfAura 18s ease-in-out infinite;
}
.platform-final-cta:hover{
border-color:var(--pf-gold-22);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.platform-final-cta > *{
position:relative;
z-index:2;
}
.platform-final-cta h2{
margin:0 auto 18px;
max-width:640px;
color:var(--pf-text);
font-size:clamp(26px,2.9vw,46px);
font-weight:var(--pf-w-semibold);
line-height:1.16;
letter-spacing:-.028em;
text-wrap:balance;
}
.platform-final-cta p{
max-width:600px;
margin:0 auto;
color:var(--pf-text-2);
font-size:clamp(15px,1.05vw,17.5px);
font-weight:var(--pf-w-light);
line-height:1.82;
}
.platform-final-actions{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:16px;
margin-top:clamp(30px,3.2vw,46px);
}
.platform-final-actions .btn{
min-width:206px;
}
/* ==========================================================
19 — PAGE CTA
.page-cta also exists in the shared inner-page module
(public/assets/css/sections/page.css) using the older navy
palette, so it is redefined here against the platform tokens.
platform.css must load after page.css.
The view renders . The
box rules below are scoped :not(.platform-final-cta) so that on
that element the platform-final-cta design stays authoritative and
nothing is overridden. A standalone .page-cta still receives the
full treatment.
========================================================== */
.page-cta:not(.platform-final-cta){
position:relative;
width:min(920px,100%);
margin:clamp(44px,4.6vw,72px) auto 0;
padding:clamp(38px,4vw,64px) clamp(26px,3.4vw,56px);
overflow:hidden;
border-radius:var(--pf-radius-xl);
text-align:center;
background:
radial-gradient(
ellipse 84% 128% at 50% 0%,
rgba(212,175,55,.11),
transparent 66%
),
linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.01)
),
var(--pf-card);
border:1px solid var(--pf-border);
box-shadow:var(--pf-shadow-card);
transition:border-color var(--pf-base),box-shadow var(--pf-base);
}
.page-cta:not(.platform-final-cta)::before{
content:"";
position:absolute;
top:0;
left:18%;
right:18%;
height:1px;
pointer-events:none;
background:
linear-gradient(
90deg,
transparent,
var(--pf-gold),
transparent
);
opacity:.5;
}
.page-cta:not(.platform-final-cta):hover{
border-color:var(--pf-gold-22);
box-shadow:
var(--pf-shadow-raised),
var(--pf-shadow-gold);
}
.page-cta:not(.platform-final-cta) > *{
position:relative;
z-index:2;
}
.page-cta:not(.platform-final-cta) h3{
margin:0 auto 14px;
max-width:600px;
color:var(--pf-text);
font-size:clamp(20px,2.1vw,30px);
font-weight:var(--pf-w-semibold);
line-height:1.24;
letter-spacing:-.022em;
text-wrap:balance;
}
.page-cta:not(.platform-final-cta) p{
max-width:560px;
margin:0 auto;
color:var(--pf-text-2);
font-size:clamp(14.5px,1.02vw,16.5px);
font-weight:var(--pf-w-light);
line-height:1.8;
}
.page-cta:not(.platform-final-cta) .btn{
margin-top:clamp(26px,2.8vw,38px);
min-width:206px;
}
.page-cta .btn:focus-visible{
outline:2px solid var(--pf-gold);
outline-offset:3px;
}
/* ==========================================================
20 — KEYFRAMES
========================================================== */
@keyframes pfRise{
from{
opacity:0;
transform:translate3d(0,26px,0);
}
to{
opacity:1;
transform:translate3d(0,0,0);
}
}
@keyframes pfAura{
0%,100%{
opacity:.55;
transform:translateX(-50%) scale(1);
}
50%{
opacity:1;
transform:translateX(-50%) scale(1.06);
}
}
@keyframes pfDrift{
0%,100%{
opacity:.6;
transform:translate3d(0,0,0);
}
50%{
opacity:1;
transform:translate3d(-18px,16px,0);
}
}
/* ==========================================================
28 — RESPONSIVE — 1920
========================================================== */
@media (max-width:1920px){
:root{
--pf-container:1440px;
--pf-gutter:48px;
}
}
/* ==========================================================
21 — RESPONSIVE — 1600
========================================================== */
@media (max-width:1600px){
:root{
--pf-container:1360px;
--pf-gutter:44px;
}
.platform-chain-list{
gap:18px 36px;
}
}
/* ==========================================================
22 — RESPONSIVE — 1440
========================================================== */
@media (max-width:1440px){
:root{
--pf-container:1240px;
--pf-gutter:40px;
}
.platform-definition-statement{
min-height:310px;
}
.platform-layer-card{
min-height:216px;
padding:30px 26px 28px;
}
}
/* ==========================================================
23 — RESPONSIVE — 1200
========================================================== */
@media (max-width:1200px){
:root{
--pf-container:1080px;
--pf-gutter:34px;
--pf-block:clamp(80px,9vw,132px);
}
.platform-definition-grid{
grid-template-columns:minmax(0,1fr);
gap:44px;
}
.platform-definition-statement{
min-height:0;
}
.platform-layer-grid,
.platform-network-grid,
.platform-value-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.platform-vision-shell{
grid-template-columns:minmax(0,1fr);
gap:40px;
}
.platform-hero-actions .btn{
min-width:196px;
}
}
/* ==========================================================
24 — RESPONSIVE — 1024
========================================================== */
@media (max-width:1024px){
:root{
--pf-container:920px;
--pf-gutter:30px;
}
.page-hero{
min-height:0;
padding-block:clamp(126px,16vw,170px) clamp(70px,9vw,110px);
}
.platform-chain-list{
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.platform-chain-item{
padding:24px 26px 24px 22px;
gap:20px;
}
.platform-layer-card{
min-height:0;
}
.platform-executive-inner,
.platform-final-cta{
border-radius:var(--pf-radius-lg);
}
}
/* ==========================================================
25 — RESPONSIVE — 768
========================================================== */
@media (max-width:768px){
:root{
--pf-gutter:24px;
--pf-block:clamp(68px,11vw,100px);
}
.page-hero-inner h1{
font-size:clamp(34px,8vw,52px);
letter-spacing:-.026em;
}
.platform-hero-actions{
flex-direction:column;
align-items:stretch;
gap:12px;
}
.platform-hero-actions .btn,
.platform-final-actions .btn{
width:100%;
min-width:0;
}
.platform-final-actions{
flex-direction:column;
align-items:stretch;
gap:12px;
}
.platform-layer-grid,
.platform-network-grid,
.platform-value-grid{
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.platform-layer-card,
.platform-network-card,
.platform-value-card{
padding:26px 22px 24px;
border-radius:var(--pf-radius-md);
}
.platform-layer-head{
margin-bottom:22px;
}
.platform-definition-statement{
padding:30px 24px;
border-radius:var(--pf-radius-lg);
}
.platform-definition-content{
padding-left:18px;
}
.platform-vision-shell{
padding:30px 24px;
border-radius:var(--pf-radius-lg);
}
.platform-vision-point{
padding-block:16px;
gap:14px;
font-size:14.5px;
}
.platform-executive-inner,
.platform-final-cta{
padding:36px 24px;
}
.platform-chain-marker{
width:42px;
height:42px;
}
}
/* ==========================================================
26 — RESPONSIVE — 576
========================================================== */
@media (max-width:576px){
:root{
--pf-gutter:20px;
}
.section-eyebrow{
padding:6px 13px;
font-size:10px;
letter-spacing:.14em;
}
.block-header{
margin-bottom:36px;
}
.page-hero-inner h1{
font-size:clamp(30px,9vw,42px);
}
.page-lead{
font-size:15px;
line-height:1.78;
}
.platform-definition-statement p{
font-size:20px;
}
.platform-chain-item{
flex-direction:column;
gap:16px;
padding:22px 20px;
}
.platform-chain-item:hover,
.platform-chain-item:focus-within{
transform:translateY(-3px);
}
.platform-value-index{
font-size:22px;
margin-bottom:18px;
}
.platform-executive-inner > blockquote,
.platform-executive-inner > blockquote > p{
font-size:19px;
line-height:1.5;
}
.platform-executive-caption{
gap:9px;
font-size:10px;
letter-spacing:.13em;
}
.platform-executive-caption::before,
.platform-executive-caption::after{
width:22px;
}
}
/* ==========================================================
27 — RESPONSIVE — 390
========================================================== */
@media (max-width:390px){
:root{
--pf-gutter:16px;
--pf-block:64px;
}
.page-hero-inner h1{
font-size:28px;
line-height:1.14;
}
.btn{
min-height:48px;
padding-inline:22px;
font-size:13.5px;
}
.platform-layer-card,
.platform-network-card,
.platform-value-card{
padding:22px 18px 20px;
}
.platform-layer-head{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.platform-definition-statement,
.platform-vision-shell,
.platform-executive-inner,
.platform-final-cta{
padding:26px 18px;
}
.platform-executive-inner::before{
top:-16px;
font-size:88px;
}
.platform-chain-marker{
width:38px;
height:38px;
font-size:11px;
}
}
/* ==========================================================
29 — REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion:reduce){
.page-hero-inner .section-eyebrow,
.page-hero-inner h1,
.page-hero-inner .page-lead,
.platform-hero-actions,
.page-hero-overlay::after,
.platform-definition-statement::after,
.platform-vision-shell::before,
.platform-final-cta::after{
animation:none;
opacity:1;
transform:none;
}
.page-hero-overlay::after,
.platform-final-cta::after{
transform:translateX(-50%);
}
.btn,
.module-index,
.platform-definition-statement,
.platform-layer-card,
.platform-layer-card::after,
.platform-layer-index,
.platform-layer-status,
.platform-chain-item,
.platform-chain-item::after,
.platform-chain-marker,
.platform-chain-marker::before,
.platform-chain-label,
.platform-network-card,
.platform-network-card::after,
.platform-network-index,
.platform-value-card,
.platform-value-card::before,
.platform-value-card::after,
.platform-value-index,
.platform-vision-point,
.platform-vision-point > span,
.page-cta,
.platform-final-cta{
transition-duration:.01ms;
}
.btn:hover,
.platform-definition-statement:hover,
.platform-layer-card:hover,
.platform-layer-card:focus-within,
.platform-network-card:hover,
.platform-network-card:focus-within,
.platform-value-card:hover,
.platform-value-card:focus-within,
.platform-chain-item:hover,
.platform-chain-item:focus-within{
transform:none;
}
.platform-vision-point:hover{
padding-left:0;
}
.page-cta:not(.platform-final-cta):hover{
box-shadow:var(--pf-shadow-card);
}
}
/* ==========================================================
FILE END
========================================================== */