:root{
--ink:#181a1e;
--paper:#fbfaf6;
--muted:#7c8088;
--red:#d32f2f;
--gold:#f5b300;
--gold-deep:#d49600;
--gold-soft:#fff7db;
--red-soft:#fdeeed;
--line:#ede7d5;
--surface:#ffffff;
--font-sans:'Plus Jakarta Sans', Inter, 'Segoe UI', sans-serif;
}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;scroll-padding-top:95px}
body{
margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
button,a{
-webkit-tap-highlight-color:transparent}
button{
font:inherit;cursor:pointer}
a{
color:inherit;text-decoration:none}
button,a{
touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{
outline:3px solid var(--red);outline-offset:5px}
button{
border:0}
h1,h2,h3,p{
margin:0}
.wrap{
max-width:1240px;margin:auto;padding:0 48px}
.eyebrow{
display:flex;gap:10px;align-items:center;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2px}
.eyebrow:before{
content:'';width:22px;height:2px;background:var(--red)}
.logo{
display:flex;gap:11px;align-items:center;font-size:20px;letter-spacing:-.7px;font-weight:900}
.logo b{
color:var(--gold)}
.mark{
width:32px;height:35px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);display:grid;place-items:center;color:#fff;font-size:23px;font-weight:900;padding-bottom:5px}
.nav{
height:82px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.header{
position:sticky;top:0;z-index:40;background:rgba(251,250,246,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
nav{
display:flex;gap:28px;font-size:12px;font-weight:600;align-items:center}
nav a:hover{
color:var(--red)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:17px 23px;border-radius:5px;font-size:12px;font-weight:700;line-height:1.3;background:var(--red);color:#fff;transition:background .2s,transform .2s}
.btn:hover{
background:#b71c1c;transform:translateY(-2px)}
.btn.light{
background:var(--surface);color:var(--ink)}
.btn.outline{
background:transparent;border:1px solid #f5b30055;color:#fff}
.btn.small{
padding:12px 18px}
.menu{
display:none;background:none;padding:10px;font-size:20px}
.hero{
overflow:hidden;position:relative;background:var(--ink);color:#fff}
.hero-grid{
min-height:650px;display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:40px;padding-top:66px;padding-bottom:64px}
.hero .eyebrow{
color:var(--gold)}
.hero h1{
font-size:clamp(46px,4.8vw,69px);line-height:1.06;letter-spacing:-3px;font-weight:750;margin:25px 0}
.hero h1 em{
font-style:normal;color:var(--gold)}
.hero-copy>p{
font-size:15px;line-height:1.85;color:#c8ccd0;max-width:400px}
.actions{
display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-note{
margin-top:23px!important;font-size:11px!important;display:flex;align-items:center;gap:8px}
.hero-note span{
width:5px;height:5px;background:var(--gold);border-radius:100%}
.scene{
height:520px;position:relative;display:flex;align-items:center;justify-content:center}
.orbit{
position:absolute;width:520px;height:520px;border:1px solid #3a4048;border-radius:50%;opacity:.5}
.orbit:before,.orbit:after{
content:'';position:absolute;border:1px solid #3a4048;border-radius:50%;inset:48px}
.orbit:after{
inset:99px}
.scene:before{
content:'ONE';position:absolute;left:-5px;top:175px;letter-spacing:-15px;font-size:160px;font-weight:900;color:#2a2e33;transform:rotate(-90deg)}
.phone{
width:263px;min-height:470px;position:relative;z-index:2;background:#f7f7f4;color:var(--ink);border:7px solid #2a2e33;border-radius:36px;box-shadow:0 25px 55px #0005;padding:16px 17px 20px;transform:rotate(6deg)}
.phone-top{
display:flex;justify-content:space-between;font-size:10px;font-weight:700;padding:0 5px 19px}
.island{
height:14px;width:70px;background:var(--ink);border-radius:10px;margin-top:-4px}
.phone-greet{
display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;font-size:10px}
.phone-greet strong{
font-size:15px;display:block;margin-top:5px}
.avatar{
background:var(--gold-soft);color:#855e00;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:10px;font-weight:bold}
.id-card{
position:relative;overflow:hidden;background:linear-gradient(135deg,#fcc419 0%,#f5af00 50%,#e59b00 100%);border-radius:12px;color:#181a1e;padding:17px}
.id-card:before{
content:'';position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border:22px solid #ffffff06;border-radius:50%}
.id-top{
font-weight:bold;font-size:11px;display:flex;align-items:center;gap:6px;justify-content:space-between;margin-bottom:25px}
.id-top img{width:18px;height:24px;object-fit:contain;flex-shrink:0}
.id-top span{
color:#855e00;font-size:8px;font-weight:800}
.id-label{
font-size:7px;letter-spacing:1px;color:#524317}
.id-name{
font-size:15px;margin:6px 0}
.id-no{
font-family:monospace;color:#181a1e;font-size:9px;font-weight:800}
.id-foot{
border-top:1px solid #181a1e25;margin-top:16px;padding-top:11px;display:flex;justify-content:space-between;font-size:8px}
.phone-section{
display:flex;justify-content:space-between;margin:21px 0 10px;font-size:11px;font-weight:bold}
.phone-section span{
font-size:9px;color:var(--red)}
.phone-event{
border:1px solid var(--line);border-radius:9px;background:var(--surface);display:flex;gap:10px;padding:12px 9px;align-items:center}
.date{
padding:7px;background:var(--red-soft);border-radius:5px;text-align:center;color:var(--red);font-size:8px}
.date b{
display:block;font-size:18px}
.event-info{
font-size:10px;line-height:1.5}
.event-info small{
font-size:8px;color:var(--muted)}
.phone-tabs{
display:flex;justify-content:space-between;margin-top:24px;font-size:8px;color:#777;text-align:center}
.phone-tabs span:first-child{
color:var(--red)}
.phone-tabs b{
display:block;font-size:16px;margin-bottom:5px}
.float{
position:absolute;z-index:3;border-radius:9px;box-shadow:0 12px 24px #0002;background:#f6f5f0;color:var(--ink);padding:15px 18px;display:flex;align-items:center;gap:12px}
.float.one{
top:85px;left:-7px;transform:rotate(-5deg)}
.float.two{
bottom:69px;right:-5px;transform:rotate(-3deg)}
.float strong{
display:block;font-size:12px;margin-bottom:5px}
.float small{
font-size:9px;color:var(--muted)}
.badge-icon{
width:32px;height:32px;border:1px solid #fae4a2;border-radius:50%;display:grid;place-items:center;color:#855e00}
.scene-caption{
position:absolute;bottom:-5px;font-size:9px;letter-spacing:1px;color:#9aa2b2;text-transform:uppercase}
.principles{
border-bottom:1px solid var(--line)}
.principles .wrap{
display:grid;grid-template-columns:repeat(3,1fr);padding-top:28px;padding-bottom:28px}
.principle{
display:flex;align-items:center;gap:20px;padding:0 28px;border-right:1px solid var(--line)}
.principle:first-child{
padding-left:0}
.principle:last-child{
border:0}
.principle b{
font-size:30px;font-weight:500;color:var(--red);letter-spacing:-1px}
.principle strong{
font-size:13px;display:block;margin-bottom:5px}
.principle p{
font-size:11px;color:var(--muted)}
section.content{
padding:95px 0}
.section-head{
display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:45px}
h2{
font-size:42px;line-height:1.15;letter-spacing:-1.7px;margin-top:20px;font-weight:600}
.section-head>p{
font-size:14px;color:var(--muted);line-height:1.8;max-width:360px}
.features{
display:grid;grid-template-columns:1.13fr 1fr;gap:20px}
.feature-main{
padding:37px;background:var(--gold-soft);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:410px}
.feature-num{
font-family:monospace;font-size:11px;color:var(--muted)}
.feature-main h3,.feature-side h3{
font-size:23px;font-weight:600;letter-spacing:-.6px;margin:19px 0 12px}
.feature-main p,.feature-side p{
font-size:13px;line-height:1.75;color:var(--muted);max-width:340px}
.identity-flow{
display:flex;align-items:center;gap:16px;margin-top:37px;flex:1}
.identity-core{
min-width:106px;width:106px;height:106px;background:var(--ink);color:var(--gold);border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:14px;font-weight:bold;border:7px solid #fae4a2}
.identity-core small{
font-size:8px;font-weight:normal;color:#c8ccd0;margin-top:5px}
.identity-line{
height:1px;width:28px;background:#b5b6aa}
.role-chips{
display:flex;flex-wrap:wrap;gap:8px;max-width:200px}
.role-chips span{
background:#fff9;border:1px solid #d3d4c9;border-radius:30px;padding:8px 12px;font-size:10px}
.feature-stack{
display:grid;gap:20px}
.feature-side{
padding:29px 32px;background:var(--surface);border:1px solid var(--line);border-radius:10px;position:relative}
.feature-side h3{
margin:12px 0 8px;font-size:21px}
.feature-side .symbol{
position:absolute;right:26px;top:24px;font-size:28px;color:var(--gold)}
.role-section{
background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.role-layout{
display:grid;grid-template-columns:280px 1fr;gap:60px;margin-top:40px}
.role-tabs{
display:flex;flex-direction:column;gap:4px}
.role-tab{
background:transparent;color:var(--muted);text-align:left;padding:18px 20px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font-size:16px;border-radius:4px}
.role-tab[aria-selected="true"]{
color:#fff;background:var(--ink);border-color:var(--ink)}
.role-tab span:last-child{
color:var(--gold)}
.role-panel{
background:var(--paper);border-radius:10px;padding:37px 40px;display:grid;grid-template-columns:1fr 170px;gap:30px;min-height:293px}
.role-panel h3{
font-size:27px;letter-spacing:-.7px;margin:12px 0}
.role-panel p{
color:var(--muted);font-size:13px;line-height:1.8}
.role-panel ul{
padding:0;list-style:none;font-size:12px;line-height:2.2;margin-bottom:0}
.role-panel li:before{
content:'✓';color:var(--red);font-weight:bold;margin-right:10px}
.role-art{
display:flex;align-items:center;justify-content:center;position:relative}
.role-art svg{
width:160px;height:185px}
.role-art:before{
content:'';position:absolute;width:155px;height:155px;border:1px solid var(--line);border-radius:50%}
.small-note{
font-size:11px;color:var(--muted);margin-top:20px;line-height:1.7}
.journey{
display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:48px}
.step{
border-top:1px solid var(--line);padding-top:22px}
.step-no{
font-family:monospace;color:var(--red);font-size:12px;display:flex;justify-content:space-between}
.step h3{
font-size:20px;margin:23px 0 12px;font-weight:600}
.step p{
font-size:13px;line-height:1.8;color:var(--muted)}
.callout{
background:var(--gold);color:var(--ink);border-radius:10px;padding:49px 55px;display:flex;justify-content:space-between;align-items:center;gap:35px;margin-top:80px;position:relative;overflow:hidden;box-shadow:0 10px 28px #d4960025}
.callout h2{
font-size:36px;max-width:520px;margin-top:0}
.callout p{
font-size:12px;color:#524317;margin-top:15px;line-height:1.7;font-weight:600}
.callout .btn.light{
background:var(--ink);color:#fff}
.callout .btn{
white-space:nowrap;position:relative}
.faq{
display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding-top:15px!important}
.faq h2{
font-size:34px}
.faq-list details{
border-bottom:1px solid var(--line);padding:20px 0}
.faq-list summary{
cursor:pointer;list-style:none;font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:20px}
.faq-list summary:after{
content:'+';color:var(--red);font-size:20px}
.faq-list details[open] summary:after{
content:'−'}
.faq-list summary::-webkit-details-marker{
display:none}
.faq-list p{
font-size:13px;line-height:1.8;color:var(--muted);padding-top:14px}
footer{
background:var(--ink);color:#c8ccd0;padding:42px 0 24px}
.footer-top{
display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-top .logo{
color:#fff}
.footer-top p{
font-size:10px;letter-spacing:2px;text-transform:uppercase}
.footer-bottom{
border-top:1px solid #2d333b;padding-top:22px;margin-top:35px;display:flex;justify-content:space-between;gap:20px;font-size:10px;line-height:1.8;color:#8b929c}
.footer-bottom a{
color:#f3f5f9}
.preview-tag{
position:absolute;top:24px;right:48px;font-size:9px;letter-spacing:1.3px;color:var(--gold);border:1px solid #ffffff25;padding:7px 10px;border-radius:30px}
dialog{
border:0;border-radius:14px;padding:0;color:var(--ink);width:min(550px,calc(100% - 28px));background:var(--paper);box-shadow:0 25px 100px #0005}
dialog::backdrop{
background:#181a1ecc;backdrop-filter:blur(5px)}
.modal-head{
padding:22px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px}
.modal-head strong{
font-size:15px}
.close{
width:33px;height:33px;font-size:24px;background:var(--gold-soft);border-radius:50%;color:var(--ink)}
.portal-body{
padding:27px}
.portal-body>p{
font-size:13px;line-height:1.7;color:var(--muted);margin-bottom:23px}
a.portal-option,button.portal-option,.portal-option{
padding:20px;border:1px solid var(--line);border-radius:7px;background:var(--surface);width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;margin-top:12px;text-decoration:none}
.portal-option:hover{
border-color:var(--red)}
.portal-option b{
font-size:16px;display:block;margin-bottom:7px}
.portal-option small{
font-size:11px;color:var(--muted)}
.portal-option>span{
color:var(--red)}
dialog.viewer{
width:calc(100% - 32px);max-width:1440px;height:calc(100dvh - 32px);max-height:none}
.viewer .modal-head{
height:65px;padding:12px 22px}
.viewer iframe{
display:block;width:100%;height:calc(100% - 65px);border:0;background:#f5f5f3}
.viewer-head-actions{
display:flex;align-items:center;gap:14px}
.back{
background:none;color:var(--red);font-size:12px;font-weight:bold}
.sr-only{
position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media(min-width:1500px){
.hero-grid{
min-height:720px}
}
@media(max-width:1000px){
.wrap{
padding-left:30px;padding-right:30px}
.hero-grid{
gap:15px}
.hero h1{
font-size:clamp(36px,5.2vw,52px);letter-spacing:-1.8px}
.faq{
display:block;gap:24px}
.principles .wrap{
grid-template-columns:1fr;gap:0}
.principle{
border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
.principle:last-child{border-bottom:0}
.scene{
transform:scale(.9);transform-origin:center}
.float.one{
left:-20px}
.float.two{
right:-20px}
.role-layout{
gap:30px;grid-template-columns:230px 1fr}
.role-panel{
grid-template-columns:1fr;padding:30px}
.role-art{
display:none}
.section-head{
gap:30px}
.callout{
padding:40px}
nav{
gap:20px}
.identity-flow{
gap:8px}
.identity-line{
width:12px}
}

@media(max-width:760px){
.wrap{
padding-left:22px;padding-right:22px}
.nav{
height:70px}
.logo{
font-size:19px}
.menu{
display:block}
nav{
display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:20px 24px;box-shadow:0 15px 20px #0001;flex-direction:column;align-items:stretch}
nav.open{
display:flex}
nav a{
padding:7px 0}
.nav>.btn{
margin-left:auto}
.hero-grid{
grid-template-columns:1fr;padding-top:64px;padding-bottom:22px;gap:0}
.hero h1{
font-size:51px;letter-spacing:-2.3px}
.hero-copy>p{
max-width:440px}
.hero-copy{
position:relative;z-index:4}
.hero .eyebrow{
font-size:10px}
.scene{
margin-top:20px;height:490px;transform:scale(.92);width:100%;max-width:430px;justify-self:center}
.float.one{
left:-3px;top:78px}
.float.two{
right:-4px;bottom:58px}
.preview-tag{
top:18px;right:22px;font-size:8px}
.scene-caption{
bottom:-6px}
.principles .wrap{
padding-top:24px;padding-bottom:24px}
.principle{
padding:0 12px;display:block}
.principle b{
font-size:26px;display:block;margin-bottom:10px}
.principle strong{
font-size:11px}
.principle p{
font-size:10px;line-height:1.5}
.principle:last-child{
padding-right:0}
section.content{
padding:65px 0}
.section-head{
display:block;margin-bottom:30px}
h2{
font-size:34px;letter-spacing:-1.2px}
.section-head>p{
margin-top:22px;max-width:450px}
.features{
grid-template-columns:1fr}
.feature-main{
padding:28px;min-height:350px}
.feature-side{
padding:26px 28px}
.identity-flow{
gap:15px}
.identity-line{
width:25px}
.role-layout{
display:block;margin-top:30px}
.role-tabs{
flex-direction:row;gap:5px;overflow-x:auto;padding-bottom:12px}
.role-tab{
font-size:12px;white-space:nowrap;padding:13px 15px;border:1px solid var(--line)}
.role-tab span:last-child{
display:none}
.role-panel{
padding:29px 25px;min-height:294px}
.role-panel h3{
font-size:25px}
.journey{
grid-template-columns:1fr;gap:27px;margin-top:32px}
.step{
padding-top:16px}
.step h3{
margin:15px 0 10px}
.step p{
max-width:420px}
.callout{
margin-top:48px;padding:32px 27px;display:block}
.callout h2{
font-size:30px}
.callout .btn{
margin-top:25px}
.faq{
display:block}
.faq h2{
margin-bottom:18px}
.footer-top,.footer-bottom{
flex-direction:column;align-items:start}
.footer-top p{
font-size:9px;line-height:1.8}
.footer-bottom{
gap:12px;margin-top:25px}
.viewer .modal-head{
padding:12px;gap:5px}
.viewer .modal-head strong{
font-size:12px}
.viewer-head-actions{
gap:8px}
.back{
font-size:10px}
.viewer{
height:calc(100dvh - 16px)!important;width:calc(100% - 16px)!important}
.btn{
gap:16px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*{
transition:none!important}
}

html{overflow-x:hidden}
body{overflow-x:hidden}
.header .wrap{position:relative}
.nav{min-width:0}
.logo{flex-shrink:0;min-width:0}
.logo .crest{width:40px;height:52px;display:block;flex-shrink:0;filter:drop-shadow(0 2px 6px #f5b30040)}
.logo .crest img{width:100%;height:100%;object-fit:contain;display:block}
.hero-grid{min-width:0}
.hero-copy,.scene{min-width:0}
.hero h1{overflow-wrap:break-word}
.scene{max-width:100%}
.phone{max-width:100%}
.section-head{min-width:0}
.features,.role-layout,.faq,.journey,.callout,.footer-top,.footer-bottom{min-width:0}
.lookup-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 8px 28px #d4960010}
.lookup-input-wrap{display:flex;gap:10px;flex-wrap:wrap}
.lookup-input{flex:1;min-width:220px;padding:14px 16px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;outline:none}
.lookup-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f5b30025}
.lookup-btn{padding:14px 20px;border-radius:8px;background:var(--gold);color:var(--ink);font-weight:800;font-size:13px}
.lookup-btn:hover{background:#e59b00}
.lookup-samples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:12px;color:var(--muted)}
.sample-chip{background:var(--gold-soft);border:1px solid #fae4a2;color:#855e00;padding:6px 10px;border-radius:999px;cursor:pointer;font-weight:700;font-size:11px}
.sample-chip:hover{background:var(--gold);color:var(--ink)}
.lookup-results{margin-top:18px;display:none}
.result-card{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.result-card:last-child{border-bottom:0}
.result-card h4{font-size:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.result-id{font-family:monospace;font-size:12px;color:#855e00;background:var(--gold-soft);padding:2px 8px;border-radius:5px}
.result-details,.result-roles{font-size:12px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:10px}
.btn-verify-card{display:inline-flex;padding:10px 14px;border-radius:8px;background:var(--red);color:#fff;font-size:12px;font-weight:800}
@media(max-width:1080px){
.menu{display:block}
nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--paper);padding:18px 24px 22px;box-shadow:0 16px 28px #181a1e14;flex-direction:column;align-items:stretch;z-index:30;border-bottom:1px solid var(--line)}
nav.open{display:flex}
nav a{padding:10px 0;font-size:14px}
.nav>.btn{margin-left:auto}
}
@media(max-width:760px){
.hero h1{font-size:clamp(32px,9vw,42px);letter-spacing:-1.5px;margin:18px 0}
.scene:before{display:none}
.float{display:none}
.phone{transform:none}
.scene{transform:none;height:auto;min-height:440px;padding-bottom:28px}
.preview-tag{position:static;display:inline-flex;margin:16px 0 0 22px}
.lookup-input-wrap{flex-direction:column}
.lookup-btn{width:100%}
}