:root {
            --bg: #faf8f4;
            --ink: #1a1714;
            --ink-soft: #3d3830;
            --muted: #8a8279;
            --accent: #0055ff;
            --accent-light: #e8f0ff;
            --coral: #ff5a3c;
            --coral-light: #fff0ec;
            --mint: #00b87a;
            --mint-light: #e6f9f2;
            --amber: #f59e0b;
            --amber-light: #fff8e6;
            --violet: #7c3aed;
            --violet-light: #f3eeff;
            --line: rgba(26,23,20,.07);
            --line-dark: rgba(26,23,20,.14);
            --card: #ffffff;
            --shadow-sm: 0 1px 2px rgba(26,23,20,.04);
            --shadow: 0 1px 3px rgba(26,23,20,.04), 0 8px 28px rgba(26,23,20,.07);
            --shadow-lg: 0 4px 16px rgba(26,23,20,.05), 0 24px 64px rgba(26,23,20,.11);
            --radius: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;
            --ease: cubic-bezier(.22,1,.36,1);
            --ease-bounce: cubic-bezier(.34,1.56,.64,1);
        }
        *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
        html{ scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
        body{
            font-family:'DM Sans',sans-serif;
            background:var(--bg); color:var(--ink);
            overflow-x:hidden; line-height:1.6;
            -webkit-font-smoothing:antialiased;
        }
        ::selection{ background:var(--accent); color:#fff; }
        a{ text-decoration:none; color:inherit; transition:all .3s var(--ease); }
        ul{ list-style:none; }
        .container{ width:100%; max-width:1260px; margin:0 auto; padding:0 clamp(18px,3.5vw,44px); }
        h1,h2,h3{ font-family:'Instrument Serif',serif; font-weight:400; letter-spacing:-.02em; }

        /* NAV */
        nav{
            position:fixed; top:0; left:0; right:0; z-index:999;
            backdrop-filter:blur(18px) saturate(1.5);
            -webkit-backdrop-filter:blur(18px) saturate(1.5);
            background:rgba(250,248,244,.78);
            border-bottom:1px solid var(--line);
            transition:box-shadow .35s ease;
        }
        nav.scrolled{ box-shadow:0 1px 10px rgba(26,23,20,.07); }
        .nav-inner{
            display:flex; align-items:center; justify-content:space-between;
            height:62px;
        }
        .logo{
            display:flex; align-items:center; gap:10px;
            font-family:'Instrument Serif',serif;
            font-size:1.3rem; font-weight:400;
            color:var(--ink); letter-spacing:-.01em;
            z-index:2;
        }
        .logo-icon{
            width:30px; height:30px; border-radius:8px;
            background:linear-gradient(135deg,var(--accent),var(--violet));
            display:flex; align-items:center; justify-content:center;
            box-shadow:0 2px 8px rgba(0,85,255,.22);
            transition:transform .35s var(--ease-bounce);
        }
        .logo:hover .logo-icon{ transform:rotate(-6deg) scale(1.1); }
        .nav-right{ display:flex; align-items:center; gap:4px; }
        .nav-right a{
            padding:8px 15px; border-radius:8px;
            font-size:.86rem; font-weight:500;
            color:var(--ink-soft); transition:all .22s ease;
        }
        .nav-right a:hover{ background:rgba(26,23,20,.04); color:var(--ink); }
        .nav-right a.active{ background:var(--accent-light); color:var(--accent); font-weight:600; }
        .mobile-btn{
            display:none; background:none; border:none;
            color:var(--ink); font-size:1.5rem; cursor:pointer;
            padding:4px; z-index:2;
        }

        /* PAGE HEADER */
        .page-hero{
            padding-top:calc(62px + clamp(60px,8vh,100px));
            padding-bottom:clamp(60px,8vh,100px);
            text-align:center;
            position:relative; z-index:1;
        }
        .page-hero h1{
            font-size:clamp(2.8rem,5vw,4.5rem);
            line-height:1; margin-bottom:16px;
        }
        .page-hero h1 em{
            font-style:italic;
            background:linear-gradient(135deg,var(--accent),var(--violet));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }
        .page-hero .subtitle{
            font-size:1.1rem; color:var(--muted); max-width:520px; margin:0 auto;
        }

        /* STORY SECTION */
        .story{
            padding:clamp(50px,7vh,90px) 0;
            position:relative; z-index:1;
        }
        .story-grid{
            display:grid; grid-template-columns:1fr 1fr;
            gap:clamp(40px,5vw,80px); align-items:center;
        }
        .story-visual{
            background:var(--card); border-radius:var(--radius-xl);
            padding:40px; position:relative; overflow:hidden;
            border:1px solid var(--line); box-shadow:var(--shadow-lg);
            display:flex; align-items:center; justify-content:center;
            min-height:360px;
        }
        .story-visual .ring-group{
            position:relative; width:200px; height:200px;
        }
        .story-visual .ring{
            position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
            border-radius:50%; border:2px solid var(--line-dark);
        }
        .ring.r1{ width:180px; height:180px; border-color:rgba(0,85,255,.15); animation:spin 20s linear infinite; }
        .ring.r2{ width:140px; height:140px; border-color:rgba(124,58,237,.15); animation:spin 25s linear infinite reverse; }
        .ring.r3{ width:100px; height:100px; border-color:rgba(0,184,122,.15); animation:spin 18s linear infinite; }
        .story-visual .core{
            width:50px; height:50px; border-radius:50%;
            background:var(--accent); position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%); box-shadow:0 0 30px rgba(0,85,255,.3);
        }
        @keyframes spin{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
        .story-text h2{
            font-size:clamp(2rem,3.5vw,2.8rem); line-height:1.1; margin-bottom:20px;
        }
        .story-text p{
            color:var(--ink-soft); font-size:1rem; line-height:1.8; margin-bottom:16px;
        }
        .story-text .highlight{
            display:inline-block; background:var(--accent-light); color:var(--accent);
            padding:2px 12px; border-radius:100px; font-weight:600; font-size:.9rem;
        }

        /* VALUES */
        .values{
            padding:clamp(50px,7vh,90px) 0;
            position:relative; z-index:1;
        }
        .values-grid{
            display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
        }
        .value-card{
            background:var(--card); border:1px solid var(--line);
            border-radius:var(--radius-lg); padding:clamp(22px,2.5vw,32px);
            text-align:center; transition:all .35s var(--ease);
        }
        .value-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
        .value-card .vc-icon{
            width:50px; height:50px; border-radius:14px;
            display:flex; align-items:center; justify-content:center;
            margin:0 auto 18px; font-size:1.3rem;
        }
        .vc-icon.blue{ background:var(--accent-light); color:var(--accent); }
        .vc-icon.coral{ background:var(--coral-light); color:var(--coral); }
        .vc-icon.mint{ background:var(--mint-light); color:var(--mint); }
        .vc-icon.violet{ background:var(--violet-light); color:var(--violet); }
        .value-card h3{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:8px; }
        .value-card p{ color:var(--muted); font-size:.88rem; line-height:1.65; }

        /* TIMELINE */
        .timeline{
            padding:clamp(50px,7vh,90px) 0;
            position:relative; z-index:1;
        }
        .timeline-track{
            position:relative; max-width:800px; margin:0 auto;
            padding-left:30px; border-left:2px dashed var(--line-dark);
        }
        .timeline-item{
            position:relative; margin-bottom:36px; padding-left:24px;
        }
        .timeline-item::before{
            content:''; position:absolute; left:-38px; top:4px;
            width:14px; height:14px; border-radius:50%;
            background:var(--accent); border:3px solid var(--bg);
            box-shadow:0 0 0 2px var(--accent);
        }
        .timeline-item .year{
            font-family:'JetBrains Mono',monospace;
            font-size:.78rem; font-weight:600; color:var(--accent);
            letter-spacing:.05em; margin-bottom:6px;
        }
        .timeline-item h4{ font-family:'DM Sans',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:6px; }
        .timeline-item p{ color:var(--muted); font-size:.9rem; }

        /* TEAM */
        .team{
            padding:clamp(50px,7vh,90px) 0;
            position:relative; z-index:1;
        }
        .team-grid{
            display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
        }
        .team-card{
            background:var(--card); border:1px solid var(--line);
            border-radius:var(--radius-lg); padding:28px 20px;
            text-align:center; transition:all .3s var(--ease);
        }
        .team-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
        .team-card .avatar-placeholder{
            width:64px; height:64px; border-radius:20px;
            margin:0 auto 14px; display:flex; align-items:center;
            justify-content:center; font-size:1.6rem; font-weight:700;
            color:#fff; font-family:'Instrument Serif',serif;
        }
        .team-card h4{ font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:700; }
        .team-card .role{ font-size:.8rem; color:var(--muted); margin-top:4px; }

        /* FOOTER */
        .footer{
            border-top:1px solid var(--line); padding:50px 0 24px;
            position:relative; z-index:1;
        }
        .footer-grid{
            display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr;
            gap:clamp(20px,3.5vw,50px); margin-bottom:40px;
        }
        .footer-brand p{ color:var(--muted); font-size:.85rem; max-width:260px; line-height:1.7; margin-top:12px; }
        .footer-col h4{
            font-family:'JetBrains Mono',monospace;
            font-size:.72rem; font-weight:500; color:var(--ink);
            margin-bottom:16px; letter-spacing:.1em; text-transform:uppercase;
        }
        .footer-col li{ margin-bottom:9px; }
        .footer-col a{ color:var(--muted); font-size:.85rem; }
        .footer-col a:hover{ color:var(--accent); }
        .footer-bottom{
            display:flex; justify-content:space-between; align-items:center;
            padding-top:20px; border-top:1px solid var(--line);
            font-size:.75rem; color:var(--muted); font-family:'JetBrains Mono',monospace;
        }

        /* REVEAL */
        .reveal{ opacity:0; transform:translateY(28px); transition:all .7s var(--ease); }
        .reveal.show{ opacity:1; transform:translateY(0); }
        .reveal-d1{ transition-delay:.08s; }
        .reveal-d2{ transition-delay:.16s; }
        .reveal-d3{ transition-delay:.24s; }
        .reveal-d4{ transition-delay:.32s; }

        @media(max-width:1024px){
            .story-grid{ grid-template-columns:1fr; }
            .story-visual{ min-height:280px; }
            .values-grid{ grid-template-columns:1fr 1fr; }
            .team-grid{ grid-template-columns:1fr 1fr; }
            .footer-grid{ grid-template-columns:1fr 1fr; }
        }
        @media(max-width:768px){
            .nav-right a:not(.nav-right a.active){ display:none; }
            .nav-right a.active{ display:block; }
            .mobile-btn{ display:block; }
            .values-grid{ grid-template-columns:1fr; }
            .team-grid{ grid-template-columns:1fr; }
            .footer-grid{ grid-template-columns:1fr; }
            .footer-bottom{ flex-direction:column; gap:6px; text-align:center; }
            .timeline-track{ padding-left:20px; }
        }