/* /styles.css */
:root { --navy:#06254b; --ink:#102f55; --blue:#10a9e0; --blue-dark:#0964b0; --paper:#fff; --muted:#4d627c; --line:#dce6f1; --pale:#f2f6fc; --blue-light:#e8f3ff; --blue-bright:#63c8ff; --on-dark:#ccdef2; --on-dark-muted:#acc9eb; --art-border:#96b9dd; --art-fill:#173b65; --art-code:#1c4573; --dark-line:#597aa3; --shadow:rgb(6 37 75 / 13%); --shadow-soft:rgb(6 37 75 / 5%); --text-body:1.375rem; --text-small:1.125rem; --text-label:1rem; --radius:24px; --max:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--blue-dark); outline-offset:6px; border-radius:4px; }
::selection { background:var(--blue-light); color:var(--navy); }
.container { width:calc(100% - 112px); max-width:var(--max); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:16px; padding:16px; background:var(--navy); color:var(--paper); z-index:10; }
.skip-link:focus { top:16px; }
.header { background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { height:100px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.brand { position:relative; display:block; overflow:hidden; width:145px; height:45px; flex-shrink:0; }
.brand img { position:absolute; width:141%; height:auto; max-width:none; left:-20.5%; top:50%; transform:translateY(-50%); }
nav { display:flex; align-items:center; gap:36px; font-size:var(--text-body); font-weight:600; }
nav a { display:inline-flex; align-items:center; min-height:48px; }
nav a:hover,.text-link:hover { color:var(--blue-dark); }
.nav-contact { gap:25px; }
.hero { position:relative; min-height:730px; display:grid; grid-template-columns:1.12fr 1fr; align-items:center; padding-top:55px; padding-bottom:115px; gap:28px; }
.eyebrow { font-size:var(--text-small); letter-spacing:1.4px; line-height:1.7; font-weight:700; margin:0 0 27px; }
.hero .eyebrow { letter-spacing:1px; font-size:var(--text-small); display:flex; align-items:center; gap:9px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0; }
h1 { font-size:clamp(54px,5.2vw,76px); line-height:1.04; letter-spacing:-4px; font-weight:600; margin:0 0 30px; }
h1>span { color:var(--blue-dark); }
.hero-description { color:var(--muted); line-height:1.7; font-size:var(--text-body); margin:0 0 32px; }
.button { min-height:54px; padding:16px 22px; display:inline-flex; align-items:center; gap:34px; border-radius:7px; font-size:var(--text-body); font-weight:600; transition:transform .2s,background .2s; }
.button-dark { color:var(--paper); background:var(--navy); }
.button:hover { transform:translateY(-3px); background:var(--blue-dark); }
.button span { font-size:20px; }
.hero-art { position:relative; height:470px; background:radial-gradient(ellipse at center,var(--blue-light),transparent 68%); isolation:isolate; }
.orbit { position:absolute; border:1px solid var(--line); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1; }
.orbit-one { width:400px; height:400px; }
.orbit-two { width:490px; height:490px; border-style:dashed; opacity:.7; }
.phone { position:absolute; height:405px; width:213px; left:50%; top:25px; transform:translateX(-50%) rotate(9deg); background:var(--paper); border:6px solid var(--navy); border-radius:36px; box-shadow:25px 30px 60px var(--shadow), inset 0 0 0 1px var(--line); padding:14px; }
.phone-top { display:flex; justify-content:space-between; font-size:8px; font-weight:700; }
.phone-island { width:57px; height:15px; background:var(--navy); border-radius:20px; position:absolute; top:9px; left:50%; transform:translateX(-50%); }
.app-heading { margin-top:34px; display:flex; align-items:center; gap:13px; font-size:13px; line-height:1.35; font-weight:700; }
.app-mark { font-size:38px; letter-spacing:-5px; padding-right:5px; }.app-mark span{color:var(--blue);}
.app-graphic { position:relative; height:185px; margin-top:21px; overflow:hidden; border-radius:15px; background:var(--blue-light); }
.graphic-arc { position:absolute; width:160px; height:160px; border-radius:50%; border:36px solid var(--blue); }
.arc-back { top:-60px; right:-60px; }.arc-front{ left:-30px; bottom:-75px; border-color:var(--navy); }
.graphic-dot { width:31px; height:31px; border-radius:50%; background:var(--blue); position:absolute; left:24px; top:30px; }
.app-graphic>span { position:absolute; top:69px; left:25px; font-size:12px; font-weight:700; line-height:1.5; }
.app-bottom { margin-top:16px; display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; }
.circle-arrow { padding:6px 9px; border-radius:50%; background:var(--navy); color:var(--paper); font-size:15px; }
.app-line { width:63px; height:3px; background:var(--navy); margin:15px auto 0; border-radius:4px; }
.code-tag { position:absolute; top:35px; left:12px; font-family:monospace; color:var(--blue-dark); padding:12px 15px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:var(--text-body); transform:rotate(-8deg); }
.art-cross { position:absolute; color:var(--blue); font-size:24px; }.cross-one{right:15px;top:130px;}.cross-two{left:25px;bottom:98px;font-size:17px;}
.floating-label { line-height:1.3; position:absolute; right:-5px; bottom:25px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); box-shadow:0 12px 30px var(--shadow-soft); border-radius:12px; padding:17px; background:var(--paper); font-size:var(--text-small); font-weight:700; }
.label-icon { padding:9px 7px; border-radius:8px; background:var(--blue-light); color:var(--blue-dark); font-family:monospace; }
.floating-label small { line-height:1.4; display:block; color:var(--muted); font-size:var(--text-label); margin-top:6px; font-weight:400; }
.art-caption { position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:100%; text-align:center; font-family:monospace; letter-spacing:1px; font-size:var(--text-label); color:var(--muted); }
.scroll-cue { position:absolute; bottom:32px; left:0; display:flex; align-items:center; gap:14px; min-height:48px; font-size:var(--text-small); color:var(--muted); }
.scroll-cue>span { border:1px solid var(--line); border-radius:50%; padding:10px 14px; font-size:17px; color:var(--navy); }
.hero-index { line-height:1.6; position:absolute; right:0; bottom:51px; font-family:monospace; font-size:var(--text-label); letter-spacing:1px; color:var(--muted); }
.section { padding-block:105px; }
h2 { font-size:clamp(40px,3.8vw,54px); font-weight:500; line-height:1.15; letter-spacing:-1.8px; margin:0; }
.intro { border-top:1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; }
.intro h2 span { color:var(--muted); }.intro-description p{margin:0 0 17px;font-size:var(--text-body);line-height:1.9;color:var(--muted);}
.focus { background:var(--pale); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:48px; }
.section-heading>p { font-size:var(--text-body); line-height:1.8; color:var(--muted); margin:0; }
.focus-grid { display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:18px; }
.focus-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; overflow:hidden; }
.focus-feature { background:var(--navy); color:var(--paper); border-color:var(--navy); }
.card-top { display:flex; align-items:center; justify-content:space-between; font-size:18px; }
.card-number { font-family:monospace; font-size:var(--text-small); opacity:.75; }.card-platform{font-size:var(--text-label);letter-spacing:1px;opacity:.75;}
h3 { font-size:28px; letter-spacing:-.6px; font-weight:500; line-height:1.3; margin:0 0 14px; }
.focus-card p { font-size:var(--text-body); line-height:1.75; color:var(--muted); margin:0; }.focus-feature p{color:var(--on-dark);}
.mini-phones,.web-art,.growth-art { height:185px; position:relative; margin-bottom:25px; }
.mini-phone { position:absolute; width:97px; height:164px; border-radius:18px; border:3px solid var(--art-border); background:var(--art-fill); top:20px; left:50%; transform:translateX(-80%) rotate(-12deg); }.mini-phone.front{transform:translateX(-10%) rotate(12deg);background:var(--blue-light);border-color:var(--paper);top:12px;}
.mini-phone>span{position:absolute;width:30px;height:7px;background:var(--navy);top:5px;left:30px;border-radius:9px;}.mini-phone i{position:absolute;width:40px;height:3px;bottom:6px;left:26px;background:var(--blue);border-radius:3px;}.mini-symbol{position:absolute;inset:30px 0;display:grid;place-items:center;color:var(--blue-dark);font-size:30px;font-family:monospace;}
.web-art { width:100%; max-width:210px; height:135px; border:1px solid var(--line); border-radius:9px; background:var(--pale); transform:rotate(-6deg); margin:39px auto 61px; box-shadow:10px 12px 0 var(--blue-light); }
.browser-bar { height:24px; display:flex; align-items:center; gap:4px; padding-left:10px; border-bottom:1px solid var(--line); }.browser-bar i{width:4px;height:4px;border-radius:50%;background:var(--blue-dark);}
.browser-content{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:17px;}.browser-content span{height:38px;border-radius:4px;background:var(--blue-light);}.browser-content span:first-child{grid-column:span 2;height:14px;background:var(--navy);width:70%;}.browser-content span:last-child{background:var(--blue);}
.growth-art { display:flex; gap:9px; align-items:flex-end; justify-content:center; padding-bottom:27px; padding-top:30px; }.growth-art>span{width:28px;border-radius:6px 6px 0 0;background:var(--blue-light);height:30%;}.growth-art>span:nth-child(2){height:47%;}.growth-art>span:nth-child(3){height:66%;background:var(--blue);}.growth-art>span:nth-child(4){height:88%;background:var(--navy);}.growth-art i{position:absolute;top:16px;left:40px;color:var(--blue-dark);font-size:45px;font-style:normal;}
.approach { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.approach-heading>p:not(.eyebrow){font-size:var(--text-body);color:var(--muted);line-height:1.8;margin:25px 0;}
.text-link { font-size:var(--text-body); display:inline-flex; align-items:center; gap:30px; min-height:48px; }
.steps { margin:0; padding:0; list-style:none; }.steps li{display:flex;gap:25px;padding:28px 0;border-bottom:1px solid var(--line);}.steps li:first-child{padding-top:0;}.step-number{font-family:monospace;color:var(--blue-dark);font-size:var(--text-small);padding-top:5px;}.steps h3{font-size:28px;}.steps p{font-size:var(--text-body);color:var(--muted);line-height:1.8;margin:0;}
.contact { background:var(--navy); color:var(--paper); position:relative; overflow:hidden; }
.contact-inner { position:relative; }.contact .eyebrow{color:var(--on-dark-muted);font-size:var(--text-label);}.contact h2{font-size:clamp(64px,7.5vw,104px);letter-spacing:-4px;line-height:1.02;}.contact h2 span{color:var(--blue-bright);}.contact p:not(.eyebrow){font-size:var(--text-body);line-height:1.9;color:var(--on-dark);margin:30px 0;}
.email-link { display:inline-flex;align-items:center;gap:60px;font-size:clamp(20px,2.5vw,32px);padding-block:12px;letter-spacing:-.5px; }.email-link:hover{color:var(--blue-bright);}.contact-code{position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(-12deg);font-family:monospace;color:var(--art-code);font-size:clamp(50px,9vw,125px);pointer-events:none;}
.footer { padding-block:45px 25px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center; }.footer-wordmark{font-size:25px;font-weight:700;letter-spacing:-1.3px;}.footer-wordmark span{color:var(--blue-dark);}.footer p{font-size:var(--text-small);color:var(--muted);line-height:1.6;}.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;font-size:var(--text-small);color:var(--muted);}.footer-meta a{display:inline-flex;align-items:center;min-height:48px;}.brand-note{flex-basis:100%;border-top:1px solid var(--line);margin:0;padding-top:18px;font-size:var(--text-small)!important;}
.reveal-pending { opacity:0; transform:translateY(24px); }.reveal{transition:opacity .7s ease,transform .7s ease;}.reveal-visible{opacity:1;transform:translateY(0);}
@media(min-width:1500px){.hero{min-height:810px;}}
@media(max-width:1050px){.container{width:calc(100% - 72px);}.hero{grid-template-columns:1.15fr 1fr;gap:0;min-height:690px;}h1{font-size:59px;letter-spacing:-3px;}.hero-art{transform:scale(.86);transform-origin:center;}.desktop-break{display:none;}.hero-description{max-width:460px;}.focus-card{padding:23px;}.focus-grid{gap:12px;}.focus-card h3{font-size:26px;}.approach{gap:60px;}.intro-grid{gap:40px;}.contact-code{font-size:85px;right:-10px;}}
@media(min-width:761px) and (max-width:1100px){.focus-grid{grid-template-columns:1fr;}.focus-card{padding:32px;}.mini-phones,.web-art,.growth-art{max-width:240px;margin-inline:auto;}.approach{gap:40px;}}
@media(max-width:760px){.container{width:calc(100% - 40px);}.header-inner{height:80px;}.brand{width:117px;height:37px;}nav{gap:19px;font-size:var(--text-small);}nav a:not(.nav-contact){display:none;}.nav-contact{gap:19px;}.hero{grid-template-columns:1fr;padding-top:50px;padding-bottom:90px;min-height:0;}.hero .eyebrow{font-size:var(--text-small);letter-spacing:.6px;margin-bottom:24px;}h1{font-size:clamp(48px,9.8vw,72px);letter-spacing:-2.8px;max-width:560px;}.hero-description{font-size:var(--text-body);max-width:560px;line-height:1.7;}.hero-art{height:465px;width:100%;max-width:440px;margin:18px auto -12px;transform:scale(.9);}.orbit-two{width:410px;height:410px;}.orbit-one{width:335px;height:335px;}.floating-label{right:0;}.code-tag{left:0;}.hero-index{display:none;}.scroll-cue{bottom:19px;}.section{padding-block:70px;}.intro-grid,.approach{grid-template-columns:1fr;gap:30px;}.intro h2{font-size:40px;}.intro-description p{font-size:var(--text-body);}.section-heading{display:block;margin-bottom:30px;}.section-heading>p{margin-top:22px;font-size:var(--text-body);}h2{font-size:40px;}.focus-grid{grid-template-columns:1fr;gap:16px;}.focus-card{padding:27px;}.focus-card p{font-size:var(--text-body);}.focus-card h3{font-size:28px;}.mini-phones{height:185px;}.web-art{margin-top:35px;margin-bottom:60px;}.growth-art{max-width:240px;margin-inline:auto;}.steps li:first-child{padding-top:20px;}.approach{gap:24px;}.contact h2{font-size:69px;letter-spacing:-3px;}.contact-code{display:none;}.contact .eyebrow{font-size:var(--text-label);letter-spacing:1.3px;}.email-link{gap:36px;font-size:25px;}.footer{padding-top:35px;gap:15px;}.footer-meta{flex-wrap:wrap;gap:22px;}.footer-meta a{min-height:48px;}.brand-note{font-size:var(--text-small)!important;}}
@media(max-width:380px){.hero-art{transform:scale(.76);margin-left:-8%;width:116%;margin-block:-20px -45px;}.hero .eyebrow{font-size:var(--text-small);}.contact h2{font-size:60px;}.email-link{font-size:22px;gap:25px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none!important;animation:none!important;}.reveal-pending{opacity:1;transform:none;}}