body.page-about{
  --paper:#061631; --paper-2:rgba(255,255,255,0.04);
  --ink:#F4F6FB; --muted:#AEBBD6; --line:rgba(255,255,255,0.12);
  --navy-600:#8DB0F5; --gold-700:#D9A94D;
  background:
    radial-gradient(45% 40% at 78% 14%, rgba(255,198,77,.10), rgba(255,198,77,0) 70%),
    radial-gradient(55% 45% at 12% 70%, rgba(27,77,166,.35), rgba(27,77,166,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='360' viewBox='0 0 600 360'%3E%3Cg fill='none' stroke='%238DB0F5' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 40 C150 10 250 70 400 40 S600 20 600 40'/%3E%3Cpath d='M0 85 C140 55 260 115 410 85 S600 65 600 85'/%3E%3Cpath d='M0 130 C130 100 270 160 420 130 S600 110 600 130'/%3E%3Cpath d='M0 175 C120 145 280 205 430 175 S600 155 600 175'/%3E%3Cpath d='M0 220 C130 190 270 250 420 220 S600 200 600 220'/%3E%3Cpath d='M0 265 C140 235 260 295 410 265 S600 245 600 265'/%3E%3Cpath d='M0 310 C150 280 250 340 400 310 S600 290 600 310'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 360px,
    linear-gradient(170deg, #081A40 0%, #050F28 55%, #030A1C 100%);
  background-attachment:fixed;
}
.about-hero{padding-bottom:30px;}
.about-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
.about-symbol{position:relative; display:flex; justify-content:center;}
.about-symbol::before{content:""; position:absolute; inset:-20% 0; background:radial-gradient(closest-side, rgba(255,185,56,.28), rgba(255,185,56,0)); filter:blur(10px);}
.about-symbol img{position:relative; width:min(100%, 420px); height:auto; filter:drop-shadow(0 0 24px rgba(255,185,56,.35)); animation:about-float 6s ease-in-out infinite alternate;}
.about-manifesto{padding:90px 0;}
.about-slogan{
  margin:0; font-family:'Doppio One', system-ui, sans-serif; font-size:clamp(2.6rem, 7vw, 5.6rem); line-height:1.02; letter-spacing:-.02em;
  color:#FFFFFF; max-width:1000px;
}
.about-slogan span{background:linear-gradient(90deg, #FFC64D, #D9A94D 40%, #8DB0F5); -webkit-background-clip:text; background-clip:text; color:transparent;}
.about-slogan-note{margin:26px 0 0; max-width:560px; font-size:1.1rem; color:var(--muted); border-left:2px solid var(--gold-600); padding-left:18px;}
.about-split{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start;}
.about-split h2, .about-brand h2, .about-h2{font-size:clamp(1.8rem, 3.2vw, 2.5rem); margin-top:16px;}
.about-text p, .about-text-p{color:var(--muted); font-size:1.05rem; margin:0 0 16px;}
.about-text-p{margin-top:18px;}
.about-brand-title{margin:22px 0 18px; font-family:'Doppio One', system-ui, sans-serif; font-size:clamp(1.05rem, 1.6vw, 1.25rem); line-height:1.3; color:#FFFFFF; text-align:center;}
.about-text .compare{margin-top:30px;}
.about-split-claim{row-gap:0;}
.about-split-claim .about-claim{align-self:center;}
.about-split-claim .about-text .compare{margin-top:14px;}
.about-claim{margin:0; max-width:380px; font-family:'Doppio One', system-ui, sans-serif; font-size:clamp(1.4rem, 2.3vw, 1.85rem); line-height:1.2; color:var(--ink);}
.page-about .compare-card{background:linear-gradient(160deg, rgba(20,45,100,.45), rgba(6,18,46,.45)); border-color:rgba(169,194,245,.16); border-radius:14px;}
.about-principles{display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; margin-top:40px;}
.about-principle{
  grid-column:span 2; position:relative; padding:30px 26px 28px; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, rgba(20,45,100,.5), rgba(6,18,46,.5)); border:1px solid rgba(169,194,245,.14);
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.about-principle:nth-child(4), .about-principle:nth-child(5){grid-column:span 3;}
.about-principle-wide{grid-column:1 / -1; padding-top:38px; padding-bottom:38px;}
.about-principle.about-principle-wide h3{font-size:clamp(1.35rem, 2.2vw, 1.75rem); max-width:none; padding-right:90px;}
.about-principle.about-principle-wide p{font-size:1.05rem; max-width:680px;}
.about-principle.about-principle-wide .about-principle-num{font-size:3.6rem;}
.about-principle:hover{transform:translateY(-4px); border-color:rgba(91,155,255,.4); box-shadow:0 20px 50px rgba(0,0,0,.3), 0 0 40px rgba(76,141,255,.15);}
.about-principle svg{width:46px; height:46px; padding:11px; border-radius:12px; fill:none; stroke:#8DB0F5; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; background:rgba(76,141,255,.12); border:1px solid rgba(91,155,255,.3);}
.about-principle-num{position:absolute; top:18px; right:22px; font-family:'Doppio One', system-ui, sans-serif; font-size:3rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(169,194,245,.3);}
.about-principle h3{font-size:1.15rem; margin-top:22px; color:#FFFFFF;}
.about-principle p{margin:8px 0 0; color:var(--muted); font-size:.95rem;}
.about-brand{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
.about-brand-board{display:grid; gap:14px; padding:26px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(169,194,245,.14);}
.about-brand-logo{display:flex; justify-content:center; padding:30px; border-radius:12px; background:radial-gradient(circle at 50% 30%, rgba(76,141,255,.18), rgba(76,141,255,0) 70%), #071533;}
.about-brand-logo img{width:min(100%, 240px); height:auto;}
.about-swatches{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.about-swatches div{display:flex; flex-direction:column; gap:2px; font-size:.82rem;}
.about-swatches span{height:58px; border-radius:10px; background:var(--c); border:1px solid rgba(255,255,255,.12); margin-bottom:6px;}
.about-swatches small{font-family:'IBM Plex Mono', monospace; color:var(--muted); font-size:.72rem;}
.about-type{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.about-type div{padding:14px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);}
.about-type span{display:block; font-size:2rem; line-height:1; color:#FFFFFF;}
.about-type small{display:block; margin-top:8px; color:var(--muted); font-size:.74rem;}
@media (max-width:960px){
  .about-hero-grid, .about-split, .about-brand{grid-template-columns:1fr; gap:30px;}
  .about-symbol img{width:220px;}
  .about-principles{grid-template-columns:1fr;}
  .about-principle, .about-principle:nth-child(4), .about-principle:nth-child(5), .about-principle-wide{grid-column:auto;}
  .about-swatches{grid-template-columns:repeat(2, 1fr);}
}
@keyframes about-float{from{transform:translateY(0);} to{transform:translateY(-10px);}}