:root{color-scheme:light;--navy:#13335f;--navy-deep:#091d35;--gold:#c09b50;--gold-bright:#e1bd78;--canvas:#f4f6f9;--surface:#fff;--soft:#f8fafc;--border:#e3e8ef;--ink:#182230;--muted:#667085;--success:#216c40;--warning:#94600b;--error:#a32632;--info:#086777;--shadow:0 22px 60px rgba(19,51,95,.08);font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
[data-theme=dark]{color-scheme:dark;--canvas:#09182b;--surface:#10243d;--soft:#142b47;--border:#29415e;--ink:#f1f5fa;--muted:#a9b8cb;--shadow:0 22px 60px rgba(0,0,0,.24)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--canvas);color:var(--ink);line-height:1.8;transition:background .35s,color .35s}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.skip-link{position:absolute;top:-60px;right:12px;background:var(--navy);color:#fff;padding:8px 14px;z-index:30}.skip-link:focus{top:12px}:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:5px}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,84px);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.wordmark{display:flex;align-items:center;gap:12px;direction:ltr}.wordmark b{display:block;color:var(--navy);font:600 17px/1.2 "IBM Plex Sans",Arial,sans-serif;letter-spacing:3px}.wordmark small{display:block;color:var(--muted);font:500 9px/1.7 "IBM Plex Sans",Arial,sans-serif;letter-spacing:1.6px}[data-theme=dark] .wordmark b{color:var(--ink)}.mark{width:39px;height:39px;border-radius:13px 13px 13px 4px;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 20px Georgia,serif;box-shadow:0 7px 18px rgba(19,51,95,.2)}.main-nav{display:flex;gap:clamp(12px,2vw,28px);font-size:13px;font-weight:500;color:var(--muted)}.main-nav a{transition:color .2s}.main-nav a:hover{color:var(--gold)}.toolbar{display:flex;gap:8px}.quiet-btn,.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 13px}.quiet-btn{font:500 12px "IBM Plex Sans",Arial,sans-serif}.icon-btn{width:40px;height:40px}
.hero{min-height:min(760px,calc(100svh - 82px));background:radial-gradient(ellipse at 17% 54%,rgba(48,102,143,.38),transparent 34%),radial-gradient(ellipse at 86% 10%,rgba(192,155,80,.12),transparent 32%),linear-gradient(125deg,#091f39 0%,#12385d 58%,#17466b 100%);color:#fff;padding:clamp(58px,8vw,112px) clamp(24px,9vw,144px) 30px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(22px,5vw,80px)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 75%);pointer-events:none}.hero-copy{max-width:620px;text-align:right;position:relative;z-index:2}.eyebrow{font:600 10px/1.5 "IBM Plex Sans",Arial,sans-serif;letter-spacing:2.2px;color:var(--gold-bright)}.hero h1{font-size:clamp(52px,6.5vw,88px);line-height:1.28;letter-spacing:-.045em;margin:24px 0 9px;font-weight:700}.hero h1 em{font-style:normal;color:var(--gold-bright)}.hero-en{font:500 clamp(16px,1.5vw,20px)/1.5 "IBM Plex Sans",Arial,sans-serif;letter-spacing:.1px;color:#dce7f1;margin:0 0 28px}.intro{color:#c7d7e6;max-width:530px;font-size:clamp(15px,1.2vw,17px);line-height:2.05}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid transparent;border-radius:12px;padding:13px 21px;font-weight:600;font-size:13px;transition:transform .25s,box-shadow .25s,background .25s}.button:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}.button.primary{background:var(--gold);color:#172b43}.button.primary:hover{background:#d5ae61}.button.secondary{background:var(--navy);color:#fff}.button.outline{border-color:var(--muted);background:transparent;color:var(--ink)}.text-link{font-size:13px;color:var(--gold-bright);font-weight:500}.hero-art{height:clamp(330px,36vw,490px);position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(74,132,172,.12);filter:blur(44px);z-index:-1}.art-orbit{position:absolute;border:1px solid rgba(225,189,120,.34);border-radius:50%;transform:rotate(-25deg);animation:orbit-drift 22s ease-in-out infinite alternate}.orbit-one{width:min(30vw,390px);height:min(22vw,275px)}.orbit-two{width:min(37vw,490px);height:min(29vw,360px);transform:rotate(35deg);animation-duration:28s;animation-direction:alternate-reverse}.hero-symbol{width:190px;height:190px;position:relative;transform:rotate(-35deg);animation:mark-float 7s ease-in-out infinite}.hero-symbol span{position:absolute;width:112px;height:112px;border:17px solid var(--gold-bright);border-radius:35px 35px 35px 7px;transform:rotate(45deg);box-shadow:0 18px 40px rgba(0,0,0,.12)}.hero-symbol span:nth-child(1){top:0;left:24px;animation:mark-one 8s ease-in-out infinite}.hero-symbol span:nth-child(2){top:47px;left:72px;border-color:#f4f7fb;opacity:.96;animation:mark-two 8s ease-in-out infinite}.hero-symbol span:nth-child(3){top:91px;left:22px;border-color:#82a9c7;opacity:.92;animation:mark-three 8s ease-in-out infinite}.hero-caption{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;gap:3px;letter-spacing:.3px}.hero-caption b{font-size:17px}.hero-caption small{color:#c7d7e6;font-size:13px}.hero-foot{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;display:flex;justify-content:space-between;color:#b6c7d8;font:500 10px "IBM Plex Sans",Arial,sans-serif;letter-spacing:1.6px}
.section{max-width:1280px;margin:auto;padding:clamp(68px,8vw,112px) clamp(22px,4vw,48px);text-align:right}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px;gap:20px}.section h2{font-size:clamp(29px,3vw,40px);font-weight:700;letter-spacing:-.03em;margin:8px 0 0;line-height:1.4}.section-desc{color:var(--muted);font-size:14px;margin:8px 0 0}.status-chip{font-size:11px;font-weight:600;padding:7px 13px;border-radius:30px;background:#e8f3ec;color:#216c40;white-space:nowrap}.status-chip.pending{background:#fff4df;color:#94600b}.identity-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}.identity-card,.logo-card,.type-spec,.rules-grid article{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);transition:transform .3s,border-color .3s,box-shadow .3s}.identity-card{padding:30px}.identity-card:hover,.logo-card:hover,.rules-grid article:hover{transform:translateY(-5px);border-color:rgba(192,155,80,.55);box-shadow:0 28px 64px rgba(19,51,95,.12)}.identity-card.featured{background:linear-gradient(145deg,#13335f,#0c2748);color:#fff;border-color:#13335f}.card-kicker{font-size:11px;color:var(--muted)}.featured .card-kicker{color:#c7d5e3}.identity-card h3{font-size:22px;margin:18px 0 8px}.identity-card h3 span{color:var(--gold)}.identity-card p,.identity-card small{color:var(--muted);font-size:13px}.featured p,.featured small{color:#d5dfeb}.identity-line{height:1px;background:rgba(255,255,255,.2);margin:24px 0 12px}.boundary-note{margin-top:20px;padding:19px 23px;border-right:3px solid var(--gold);background:var(--soft);border-radius:10px}.boundary-note p{margin:5px 0 0;color:var(--muted);font-size:13px}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.logo-card{overflow:hidden}.logo-stage{height:225px;display:grid;place-items:center;padding:24px}.logo-stage.light{background:#fff}.logo-stage.dark{background:#0b3b54}.logo-stage.neutral{background:#edf0f3}.logo-stage img{display:block;max-width:100%;max-height:175px;object-fit:contain}.logo-stage .symbol-img{max-height:170px;max-width:170px}.logo-meta{padding:17px 20px;display:flex;flex-direction:column;gap:4px}.logo-meta b{font-size:14px}.logo-meta span,.logo-meta small{font-size:11px;color:var(--muted)}.source-preview{height:225px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--soft);color:var(--muted)}.source-preview span{font:700 30px "IBM Plex Sans",Arial,sans-serif;color:var(--navy);border:2px solid var(--gold);padding:10px 22px;border-radius:9px}.source-preview small{font-size:11px}.notice{margin-top:24px;padding:16px 20px;background:var(--soft);border:1px solid var(--border);border-radius:11px;color:var(--muted);font-size:12px}.notice b{color:var(--ink)}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.swatch{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px;box-shadow:var(--shadow)}.swatch-color{height:135px;border-radius:10px;background:var(--swatch);margin-bottom:15px}.swatch b,.swatch code,.swatch small{display:block}.swatch b{font-size:14px}.swatch code,.token code{font:12px "IBM Plex Sans",monospace;color:var(--muted)}.swatch small{font-size:11px;color:var(--muted)}.subheading{font-size:17px;margin:36px 0 15px}.token-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}.token{background:var(--surface);border:1px solid var(--border);padding:13px;border-radius:12px;display:flex;flex-direction:column;gap:6px;min-width:0}.token i{height:40px;border-radius:7px;background:var(--swatch);border:1px solid rgba(128,128,128,.16)}.token span{font-size:11px}.token code{font-size:10px}.semantic{grid-template-columns:repeat(4,1fr)}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.type-spec{padding:34px}.type-spec h3{font-size:34px;margin:28px 0 10px}.type-spec p{color:var(--muted)}.type-spec small{color:var(--muted);font-size:11px}.type-spec.english{text-align:left;font-family:"IBM Plex Sans",Arial,sans-serif}.type-scale{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.type-scale div{display:flex;flex-direction:column;gap:8px}.type-scale span,.type-scale code{font-size:10px;color:var(--muted)}.scale-1{font-size:38px}.scale-2{font-size:27px}.scale-3{font-size:17px}.scale-4{font-size:13px}
.component-demo{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;box-shadow:var(--shadow)}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:17px}.live-dot{font-size:10px;color:var(--success)}.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.demo-stats article{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:18px;display:flex;flex-direction:column}.demo-stats small,.demo-stats span{font-size:11px;color:var(--muted)}.demo-stats b{font:600 30px "IBM Plex Sans Arabic",sans-serif;color:var(--navy)}[data-theme=dark] .demo-stats b{color:var(--gold-bright)}.demo-lower{display:grid;grid-template-columns:1.4fr .6fr;gap:16px}.demo-panel{border:1px solid var(--border);border-radius:13px;padding:18px}.activity{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid var(--border)}.activity:last-child{border:0}.activity>span{display:flex;flex-direction:column;flex:1}.activity b{font-size:12px}.activity small{font-size:10px;color:var(--muted)}.avatar{width:32px;height:32px;display:grid;place-items:center;background:#e5edf5;color:var(--navy);border-radius:50%;font-style:normal}.avatar.gold{background:#f5ead4;color:#8d641c}.pill{font-size:10px;font-style:normal;border-radius:20px;padding:3px 9px}.pill.success{background:#e8f3ec;color:#216c40}.pill.warning{background:#fff4df;color:#94600b}.pill.info{background:#e4f3f5;color:#086777}.action-panel{display:flex;flex-direction:column;gap:11px}.action-panel small{font-size:10px;color:var(--muted)}
.rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.rules-grid article{padding:23px}.rules-grid article>b{font:600 12px "IBM Plex Sans",Arial,sans-serif;color:var(--gold)}.rules-grid h3{font-size:16px;margin:15px 0 6px}.rules-grid p{font-size:12px;color:var(--muted);margin:0}.approval-strip{margin-top:22px;background:linear-gradient(120deg,#0b2746,#153f65);color:#fff;border-radius:18px;padding:30px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 20px 45px rgba(19,51,95,.16)}.approval-strip h3{font-size:21px;margin:8px 0}.approval-strip p{font-size:12px;color:#d4dfeb;margin:0}.approval-state{border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:15px 23px;text-align:center;display:flex;flex-direction:column}.approval-state b{font:10px "IBM Plex Sans",Arial,sans-serif;letter-spacing:1.5px;color:#d5dfeb}.approval-state strong{font:700 18px "IBM Plex Sans",Arial,sans-serif;color:#e4c27f}.footer{border-top:1px solid var(--border);background:var(--surface);padding:30px clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:18px}.footer p,.footer>a:last-child{font-size:11px;color:var(--muted)}
.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal.is-visible{opacity:1;transform:none}
@keyframes mark-float{0%,100%{transform:rotate(-35deg) translateY(0)}50%{transform:rotate(-32deg) translateY(-13px)}}@keyframes mark-one{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(49deg) translate(-5px,-4px)}}@keyframes mark-two{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(41deg) translate(5px,3px)}}@keyframes mark-three{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(49deg) translate(-3px,5px)}}@keyframes orbit-drift{0%{transform:rotate(-25deg) scale(1)}100%{transform:rotate(-18deg) scale(1.045)}}
@media(max-width:980px){.main-nav{gap:12px}.hero{padding-inline:6vw}.identity-grid{grid-template-columns:1fr 1fr}.identity-card.featured{grid-column:1/-1}.logo-grid{grid-template-columns:repeat(2,1fr)}.token-grid{grid-template-columns:repeat(3,1fr)}.type-scale{grid-template-columns:repeat(2,1fr)}.rules-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 18px;gap:10px}.main-nav{order:3;width:100%;overflow:auto;justify-content:flex-start;padding:5px 0;white-space:nowrap}.hero{min-height:auto;grid-template-columns:1fr;padding:58px 24px 25px;gap:15px}.hero-art{height:270px;grid-row:1}.hero-copy{grid-row:2}.hero-symbol{transform:scale(.82) rotate(-35deg)}.orbit-one{width:270px;height:190px}.orbit-two{width:320px;height:230px}.hero-foot{font-size:8px;gap:10px;letter-spacing:.7px}.section{padding:62px 18px}.section-head{align-items:flex-start;flex-direction:column}.identity-grid,.logo-grid,.type-grid{grid-template-columns:1fr}.identity-card.featured{grid-column:auto}.palette{grid-template-columns:1fr 1fr}.palette .primary-swatch{grid-column:1/-1}.token-grid,.semantic{grid-template-columns:repeat(2,1fr)}.type-scale{grid-template-columns:1fr 1fr}.demo-stats{grid-template-columns:1fr}.demo-lower{grid-template-columns:1fr}.rules-grid{grid-template-columns:1fr 1fr}.approval-strip{align-items:flex-start;flex-direction:column}.footer{flex-wrap:wrap}.hero h1{font-size:clamp(47px,12vw,64px)}.hero-actions{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}