@import url("variables.css");

.container.centered {
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding: 0 !important;
    margin: 0 !important;
}

p {
    color:var(--muted);
}

.about-hero {
    width: 100%;
    max-width: 100% !important;
    padding:10rem 0 6rem;
    min-height:100svh;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 18% 16%,rgba(123,92,255,.16),transparent 25%),radial-gradient(circle at 82% 22%,rgba(0,212,255,.12),transparent 24%),linear-gradient(180deg,#08090d 0%,#0b0d12 45%,#07080b 100%);
}

.about-hero-grid {
    display:grid;
    grid-template-columns:1fr .95fr;
    gap:2rem;
    align-items:end;
}

.about-mast {
    position:relative;
    min-height:650px;
    padding:1.2rem;
    border-radius:34px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
}

.cover-frame {
    position:absolute;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    box-shadow:0 20px 50px rgba(0,0,0,.25);
    overflow:hidden;
}

.cover-frame::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(140deg,rgba(255,255,255,.08),transparent 45%,rgba(0,255,136,.05));
}

.cover-frame.main {
    left:7%;
    top:10%;
    width:55%;
    height:55%;
    padding:1rem;
    animation:drift 9s ease-in-out infinite;
}

.cover-frame.side-a {
    right:8%;
    top:12%;
    width:28%;
    height:30%;
    padding:1rem;
    animation:drift 8.2s ease-in-out infinite .6s;
}

.cover-frame.side-b {
    right:12%;
    bottom:12%;
    width:36%;
    height:50%;
    padding:1rem;
    animation:drift 8.8s ease-in-out infinite .9s;
}

.cover-frame.lower {
    left: 5%;
    bottom: 2%;
    width: 71%;
    height: 28%;
    padding: 1rem;
    animation: drift 7.4s ease-in-out infinite .3s;
}

.cover-title {
    font-size:clamp(1rem,2vw,1.3rem);
    line-height:1.02;
    letter-spacing:-.05em;
    font-weight:800;
    color:#fff;
    max-width:360px;
}

.cover-note {
    margin-top:1rem;
    font-size:.75rem;
    line-height:1.75;
    max-width:360px;
}

.cover-stamp {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    margin-top:1.2rem;
    padding:.45rem .8rem;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.05);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#fff;
}

.paper-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.8rem;
    margin-top:1rem;
}

.paper-grid span {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:.45rem;
    min-height:92px;
    padding:.85rem .8rem .9rem;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    position:relative;
    overflow:hidden;
    transition:transform .3s ease,border-color .3s ease,background .3s ease;
}

.paper-grid span::before {
    content:'';
    position:absolute;
    left:.8rem;
    top:.72rem;
    width:18px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent3),var(--accent2));
    opacity:.9;
}

.paper-grid span:hover {
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.16);
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
}

.paper-grid strong {
    display:block;
    padding-top:.45rem;
    font-size:.72rem;
    line-height:1.2;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#fff;
    font-family:var(--font-semi-bold);
}

.paper-grid small {
    display:block;
    font-size:.7rem;
    line-height:1.5;
    color:var(--muted);
    font-family:var(--font);
}

.quote-mark {
    font-size:4rem;
    line-height:1;
    color:var(--accent2);
    opacity:.8;
}

.side-title {
    font-size:.9rem;
    font-weight:700;
    color:#fff;
    line-height:1.3;
}

.side-copy {
    margin-top:.65rem;
    font-size:.86rem;
    line-height:1.7;
}

.mast-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-top:2rem;
}

.mast-stat {
    padding:1rem 1rem 1.1rem;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--border);
}

.mast-stat strong {
    display:block;
    font-size:1.85rem;
    color:#fff;
    letter-spacing:-.04em;
}

.mast-stat span {
    display:block;
    margin-top:.4rem;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted2);
}

.thesis-section {
    padding:7rem 0;
}

.thesis-layout {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:1.2rem;
    align-items:start;
}

.thesis-letter {
    padding:2.2rem;
    border-radius:32px;
    position:relative;
    overflow:hidden;
}

.thesis-letter::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 35%);
}

.thesis-letter p {
    position:relative;
    font-size:1.08rem;
    line-height:2;
    max-width:760px;
    color:rgba(255,255,255,.78);
}

.thesis-sign {
    position:relative;
    margin-top:1.5rem;
    font-size:.76rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted2);
}

.thesis-stack {
    display:grid;
    gap:1rem;
}

.thesis-note {
    padding:1.35rem;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
}

.thesis-note h4 {
    margin-top:.8rem;
    font-size:1rem;
    color:#fff;
}

.thesis-note p {
    margin-top:.5rem;
    font-size:.87rem;
    line-height:1.72;
}

.timeline-section {
    padding:7rem 0;
}

.timeline-shell {
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:1.4rem;
    align-items:start;
}

.timeline-intro {
    position:sticky;
    top:96px;
    padding:2rem;
    border-radius:30px;
}

.storyline {
    position:relative;
    padding-left:2.2rem;
    display:grid;
    gap:1.1rem;
}

.storyline::before {
    content:'';
    position:absolute;
    left:.82rem;
    top:.4rem;
    bottom:.4rem;
    width:1px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(123,92,255,.45),rgba(0,212,255,.25),rgba(255,255,255,.08));
}

.story-beat {
    position:relative;
    padding:1.45rem 1.5rem;
    border-radius:26px;
}

.story-beat::before {
    content:'';
    position:absolute;
    left:-1.72rem;
    top:1.5rem;
    width:13px;
    height:13px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent3),var(--accent2));
    box-shadow:0 0 0 5px rgba(123,92,255,.08);
}

.story-year {
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted2);
}

.story-beat h3 {
    margin-top:.5rem;
    font-size:1.15rem;
    letter-spacing:-.03em;
    color:#fff;
}

.story-beat p {
    margin-top:.55rem;
    font-size:.9rem;
    line-height:1.75;
}

.principles-section {
    padding:7rem 0;
}

.principles-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:1rem;
    align-items:stretch;
}

.principles-feature {
    padding:2rem;
    border-radius:32px;
    min-height:460px;
    position:relative;
    overflow:hidden;
}

.principles-feature .big-word {
    position:absolute;
    right:1rem;
    bottom:-.2rem;
    font-size:clamp(4.5rem,10vw,9rem);
    letter-spacing:-.08em;
    font-weight:850;
    color:rgba(255,255,255,.04);
    pointer-events:none;
}

.principles-columns {
    display:grid;
    gap:1rem;
}

.principle-card {
    padding:1.5rem;
    border-radius:26px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
    border:1px solid var(--border);
}

.principle-card h3 {
    margin-top:1rem;
    font-size:1.05rem;
    color:#fff;
}

.principle-card p {
    margin-top:.55rem;
    font-size:.87rem;
    line-height:1.72;
}

.values-mosaic {
    padding:7rem 0;
}

.mosaic-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:1rem;
}

.mosaic-card {
    padding:1.4rem;
    border-radius:26px;
    min-height:220px;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
    border:1px solid var(--border);
    position:relative;
    overflow:hidden;
}

.mosaic-card h3 {
    margin-top:1rem;
    font-size:1.06rem;
    color:#fff;
}

.mosaic-card p {
    margin-top:.55rem;
    font-size:.87rem;
    line-height:1.72;
}

.mosaic-card.large {
    grid-column:span 7;
    min-height:300px;
}

.mosaic-card.medium {
    grid-column:span 5;
}

.mosaic-card.small {
    grid-column:span 4;
}

.mosaic-card .edge-line {
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--accent2),transparent);
    opacity:.45;
}

.voice-section {
    padding:7rem 0;
}

.voice-shell {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    align-items:stretch;
}

.voice-quote {
    padding:2.2rem;
    border-radius:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}

.voice-quote::after {
    content:'';
    position:absolute;
    right:-40px;
    top:-40px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,212,255,.12),transparent 65%);
}

.voice-quote blockquote {
    position:relative;
    font-size:1.35rem;
    line-height:1.7;
    letter-spacing:-.02em;
    color:#fff;
    max-width:520px;
}

.voice-quote .cite {
    position:relative;
    margin-top:1.4rem;
    font-size:.75rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted2);
}

.voice-notes {
    display:grid;
    gap:1rem;
}

.voice-note {
    padding:1.4rem;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
}

.voice-note h4 {
    font-size:1rem;
    color:#fff;
}

.voice-note p {
    margin-top:.45rem;
    font-size:.86rem;
    line-height:1.7;
}

.closing-panel {
    padding:7rem 0 1rem;
}

.closing-card {
    padding:3.4rem 2rem;
    border-radius:34px;
    text-align:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
    border:1px solid var(--border);
}

.closing-card::before {
    content:'';
    position:absolute;
    left:-15%;
    right:-15%;
    bottom:-60px;
    height:100%;
    background:radial-gradient(circle,rgba(123,92,255,.12),transparent 65%);
}

@media (max-width: 1180px) {
    .how-hero-layout,.orchestration-shell,.about-hero-grid,.thesis-layout,.voice-shell {
        grid-template-columns:1fr;
    }
    .rail-shell,.timeline-shell {
        grid-template-columns:1fr;
    }
    .rail-intro,.timeline-intro {
        position:relative;
        top:auto;
    }
    .case-grid,.telemetry-grid,.principles-grid {
        grid-template-columns:1fr;
    }
    .mosaic-card.large,.mosaic-card.medium,.mosaic-card.small {
        grid-column:span 12;
    }
}

@media (max-width: 980px) {
    .how-stats,.process-ledger-grid,.mast-stats {
        grid-template-columns:repeat(2,1fr);
    }
    .paper-grid {
        grid-template-columns:1fr;
    }
    .cover-frame.main,.cover-frame.side-a,.cover-frame.side-b,.cover-frame.lower {
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:auto;
        height:auto;
        min-height:180px;
        margin:0 0 1rem 0;
    }
}

@media (max-width: 780px) {
    .how-stats,.process-ledger-grid,.case-grid,.mast-stats,.voice-shell {
        grid-template-columns:1fr;
    }
    .signal-stage,.protocol-board,.about-mast {
        min-height:auto;
    }
    .mosaic-grid {
        grid-template-columns:1fr;
    }
    .mosaic-card.large,.mosaic-card.medium,.mosaic-card.small {
        grid-column:auto;
    }
}

@keyframes drift {
    0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,-10px,0);}
}