:root {
    --paper: #f5f7f3;
    --paper-warm: #f8f7f2;
    --ink: #10251f;
    --muted: #687a73;
    --green: #0d4d3d;
    --green-soft: #15745b;
    --violet: #7869dc;
    --line: rgba(16, 37, 31, .1);
    color-scheme: light;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); background: #edf2ed; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; border: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(21, 116, 91, .38); outline-offset: 3px; }

.site {
    min-height: 100vh;
    padding: 0 18px 18px;
    background:
        radial-gradient(circle at 12% 2%, rgba(113, 210, 179, .17), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(120, 105, 220, .1), transparent 21%),
        linear-gradient(rgba(16, 60, 48, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 60, 48, .035) 1px, transparent 1px),
        var(--paper);
    background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

.header {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1320px;
    min-height: 86px;
    margin: 0 auto;
    padding: 0 24px;
    border-bottom: 1px solid rgba(16, 37, 31, .08);
}

.brand { display: inline-flex; align-items: center; justify-self: start; gap: 13px; padding: 0; background: transparent; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-touch-callout: none; }
.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #f7fff9;
    background: linear-gradient(145deg, rgba(255,255,255,.25), transparent 45%), linear-gradient(145deg, var(--green), #168168);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(13,77,61,.2), inset 0 1px 0 rgba(255,255,255,.33);
}
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; }
.brand-copy strong { font-size: 20px; font-weight: 720; letter-spacing: -.035em; }
.brand-copy small { margin-top: 2px; color: #789087; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.header nav { display: flex; gap: 3px; padding: 7px; background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.84); border-radius: 999px; box-shadow: 0 10px 35px rgba(28,64,52,.07); backdrop-filter: blur(18px); }
.header nav a { padding: 8px 14px; color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 650; text-decoration: none; }
.header nav a:hover { color: var(--green); background: rgba(20,117,91,.08); }
.dashboard-link { display: inline-flex; min-height: 42px; align-items: center; justify-self: end; gap: 8px; padding: 0 17px; color: white; background: linear-gradient(135deg, #0f4b3c, #15785e); border: 1px solid rgba(255,255,255,.55); border-radius: 999px; box-shadow: 0 12px 28px rgba(13,77,61,.17); font-size: 12px; font-weight: 750; text-decoration: none; }
.dashboard-link b, .primary-link b { font-size: 21px; font-weight: 400; line-height: 1; }

.hero {
    position: relative;
    display: flex;
    min-height: min(720px, calc(100vh - 112px));
    max-width: 1320px;
    margin: 10px auto 0;
    padding: 108px 56px 100px;
    align-items: center;
    overflow: hidden;
    background: var(--paper-warm);
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 34px;
    box-shadow: 0 32px 90px rgba(30,65,54,.1), inset 0 1px 0 rgba(255,255,255,.9);
    isolation: isolate;
}
.hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(248,247,242,.98) 0%, rgba(248,247,242,.9) 38%, rgba(248,247,242,.12) 67%, transparent 100%); }
.hero-art { position: absolute; z-index: -2; inset: 0; background: url("/assets/linkur-orbit.webp") center / cover no-repeat; transform: scale(1.015); animation: drift 16s ease-in-out infinite alternate; }
.hero-copy { max-width: 700px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 11px; color: #42695b; background: rgba(255,255,255,.62); border: 1px solid rgba(13,77,61,.11); border-radius: 999px; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(23,77,59,.06); backdrop-filter: blur(12px); }
.kicker i, .system-state i, .footer > span i { width: 6px; height: 6px; background: #39bd87; border-radius: 50%; box-shadow: 0 0 0 4px rgba(57,189,135,.11); }
.hero h1 { margin: 27px 0 24px; font-size: clamp(56px, 6.4vw, 94px); font-weight: 630; letter-spacing: -.072em; line-height: .92; }
.hero h1 em { color: transparent; background: linear-gradient(105deg, #0d5d48 8%, #28a884 48%, #766cce 89%); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.intro { max-width: 525px; margin: 0 0 32px; color: #62766e; font-size: 16px; line-height: 1.65; }
.primary-link { display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 0 18px; color: white; background: #102e25; border-radius: 999px; box-shadow: 0 15px 30px rgba(16,46,37,.17); font-size: 11px; font-weight: 800; text-decoration: none; }
.system-state { position: absolute; right: 30px; bottom: 26px; display: flex; align-items: center; gap: 16px; margin: 0; padding: 9px 12px; color: #526960; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(18px); }
.system-state span, .footer > span { display: inline-flex; align-items: center; gap: 7px; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1320px; margin: 0 auto; padding: 18px 0 94px; }
.principles article { min-height: 208px; padding: 30px; background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.9); border-radius: 23px; box-shadow: 0 18px 50px rgba(26,62,50,.065); backdrop-filter: blur(14px); }
.principles small, .eyebrow { color: #648278; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
.principles h2 { margin: 42px 0 10px; font-size: 29px; font-weight: 650; letter-spacing: -.045em; }
.principles p { max-width: 275px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1320px; margin: 0 auto 18px; padding: 76px 56px; background: radial-gradient(circle at 15% 20%, rgba(74,196,158,.14), transparent 26%), radial-gradient(circle at 90% 80%, rgba(120,105,220,.1), transparent 24%), rgba(232,240,234,.86); border: 1px solid rgba(255,255,255,.82); border-radius: 32px; box-shadow: 0 28px 70px rgba(26,62,50,.08); }
.modules h2 { margin: 18px 0 0; font-size: clamp(42px, 5vw, 68px); font-weight: 640; letter-spacing: -.065em; line-height: 1; }
.module-list { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.module-list p { display: flex; align-items: center; gap: 13px; margin: 0; padding: 16px; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.8); border-radius: 15px; box-shadow: 0 12px 30px rgba(28,73,58,.05); font-size: 14px; font-weight: 650; }
.module-list b { color: #879c94; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.module-list i { display: grid; width: 22px; height: 22px; place-items: center; color: var(--green-soft); font-size: 18px; font-style: normal; }

.footer { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 40px; max-width: 1320px; margin: 0 auto; padding: 54px 22px 38px; border-top: 1px solid rgba(16,37,31,.08); }
.footer strong { font-size: 28px; font-weight: 720; letter-spacing: -.035em; }
.footer p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.footer > span, .footer > small { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.access-dialog { width: min(calc(100% - 32px), 440px); padding: 0; overflow: visible; background: transparent; border: 0; }
.access-dialog::backdrop { background: rgba(11,31,25,.48); backdrop-filter: blur(16px); }
.access-dialog form { position: relative; padding: 46px 40px 38px; text-align: center; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.95); border-radius: 28px; box-shadow: 0 36px 100px rgba(14,54,42,.25); }
.dialog-close { position: absolute; top: 16px; right: 17px; width: 34px; height: 34px; color: #71817b; background: #edf2ee; border-radius: 50%; font-size: 22px; cursor: pointer; }
.access-symbol { display: grid; width: 64px; height: 64px; margin: 0 auto 23px; place-items: center; color: white; background: linear-gradient(145deg, var(--green), #1a8a6d); border-radius: 21px; font-size: 28px; box-shadow: 0 16px 35px rgba(13,77,61,.2); }
.access-eyebrow { margin: 0 0 9px; color: #4d806e; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.access-dialog h2 { margin: 0; font-size: 32px; letter-spacing: -.045em; }
.access-dialog h2 + p { margin: 15px auto 27px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.passkey-button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 9px; color: white; background: linear-gradient(135deg, #0f4b3c, #15785e); border-radius: 15px; font-weight: 800; opacity: .52; }
.passkey-button span { font-size: 21px; }
.access-note { margin: 18px 0 0; padding: 13px; color: #6c7c76; background: #edf3ef; border-radius: 12px; font-size: 11px; line-height: 1.5; }

@keyframes drift { from { transform: scale(1.015) translate3d(0,0,0); } to { transform: scale(1.035) translate3d(-.7%,-.45%,0); } }

@media (max-width: 850px) {
    .site { padding: 0 9px 9px; }
    .header { grid-template-columns: 1fr auto; min-height: 78px; padding: 0 12px; }
    .header nav { display: none; }
    .dashboard-link { width: 48px; padding: 0; justify-content: center; }
    .dashboard-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .hero { min-height: 680px; padding: 70px 26px 275px; border-radius: 27px; }
    .hero::after { background: linear-gradient(180deg, rgba(248,247,242,.98) 0%, rgba(248,247,242,.9) 49%, rgba(248,247,242,.12) 74%, transparent 100%); }
    .hero-art { background-position: 64% center; }
    .hero h1 { font-size: clamp(49px, 14vw, 72px); }
    .intro { max-width: 95%; }
    .system-state { right: 18px; bottom: 17px; }
    .principles { grid-template-columns: 1fr; gap: 9px; padding: 10px 0 58px; }
    .principles article { min-height: 0; padding: 23px; border-radius: 19px; }
    .principles h2 { margin-top: 18px; }
    .modules { grid-template-columns: 1fr; gap: 40px; margin-bottom: 9px; padding: 56px 24px; border-radius: 26px; }
    .footer { grid-template-columns: 1fr; align-items: start; gap: 24px; padding: 54px 12px; }
}

@media (max-width: 480px) {
    .brand-copy small { display: none; }
    .brand-copy strong { font-size: 18px; }
    .hero { min-height: 650px; padding: 58px 19px 248px; }
    .system-state span:last-child { display: none; }
    .modules { padding: 48px 19px; }
    .access-dialog form { padding: 43px 24px 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-art { animation: none; }
}