.welcome-page { background:radial-gradient(circle at 78% 2%,rgba(255,122,26,.15),transparent 30%),linear-gradient(180deg,#0b0d0f,#0e1114); }
.welcome-main { padding:70px 0 0; }
.welcome-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.52fr); gap:60px; align-items:end; padding-bottom:38px; }
.welcome-intro .eyebrow { grid-column:1 / -1; margin-bottom:-24px; }
.welcome-intro h1 { max-width:800px; margin:0; font-size:clamp(56px,7.2vw,94px); line-height:.92; }
.welcome-intro > p { margin:0 0 4px; color:#c0c6cc; font-size:18px; line-height:1.6; }
.welcome-primary-routes { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.welcome-primary-card { min-width:0; min-height:390px; position:relative; overflow:hidden; padding:30px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto; gap:24px; border:1px solid #394149; border-radius:12px; background:linear-gradient(145deg,#181d22,#101316 72%); color:inherit; cursor:pointer; font:inherit; text-align:left; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.welcome-primary-card:hover,.welcome-primary-card[aria-expanded="true"] { transform:translateY(-3px); border-color:rgba(255,122,26,.72); background:linear-gradient(145deg,rgba(255,122,26,.12),#111519 65%); }
.welcome-primary-number { color:#69747d; font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.1em; }
.welcome-primary-glyph { width:142px; height:142px; position:relative; display:grid; place-items:center; filter:drop-shadow(0 18px 24px rgba(0,0,0,.42)); transition:transform .28s ease,filter .28s ease; }
.welcome-primary-glyph img { width:100%; height:100%; display:block; object-fit:contain; }
.welcome-primary-card:hover .welcome-primary-glyph,.welcome-primary-card[aria-expanded="true"] .welcome-primary-glyph { transform:translateY(-4px) scale(1.035); filter:drop-shadow(0 22px 30px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,122,26,.13)); }
.welcome-primary-card > div { grid-column:1 / -1; align-self:end; max-width:570px; }
.welcome-primary-card > div > span { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.13em; }
.welcome-primary-card h2 { margin:8px 0 10px; font-size:40px; letter-spacing:-.04em; }
.welcome-primary-card p { margin:0; color:#929ca5; font-size:13px; line-height:1.6; }
.welcome-primary-card > strong { grid-column:1 / -1; padding-top:18px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #323a41; color:#e0e4e7; font-size:13px; }
.route-arrow { color:var(--accent); font-size:23px; transition:transform .18s ease; }
.welcome-primary-card[aria-expanded="true"] .route-arrow { transform:rotate(180deg); }
.design-options { margin-top:16px; padding:28px; border:1px solid rgba(255,122,26,.35); border-radius:10px; background:linear-gradient(135deg,rgba(255,122,26,.06),#111519 60%); scroll-margin-top:92px; }
.design-options-heading { margin-bottom:22px; display:flex; align-items:end; justify-content:space-between; gap:40px; }
.design-options-heading span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.13em; }
.design-options-heading h2 { margin:6px 0 0; font-size:28px; }
.design-options-heading p { max-width:430px; margin:0; color:#838d96; font-size:11px; }
.design-option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.design-option { min-height:218px; padding:20px; display:flex; flex-direction:column; border:1px solid #343d44; border-radius:7px; background:#111519; transition:border-color .16s ease,transform .16s ease; }
.design-option:hover { transform:translateY(-2px); border-color:var(--accent); }
.design-option > span { color:#c27842; font-size:8px; font-weight:900; letter-spacing:.1em; }
.design-option h3 { margin:16px 0 8px; font-size:20px; }
.design-option p { margin:0; color:#818c95; font-size:11px; line-height:1.55; }
.design-option strong { margin-top:auto; padding-top:20px; color:#d6dbe0; font-size:11px; }
.welcome-help { margin-top:36px; padding:28px 0; display:flex; align-items:center; justify-content:space-between; gap:50px; border-top:1px solid #30383f; border-bottom:1px solid #30383f; }
.welcome-help span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.12em; }
.welcome-help h2 { margin:7px 0 0; font-size:25px; }
.welcome-help > div:last-child { min-width:310px; display:grid; gap:9px; }
.welcome-help a { padding:10px 12px; display:flex; justify-content:space-between; border:1px solid #333b42; background:#12161a; color:#b8c0c7; font-size:11px; }
.welcome-help a:hover { border-color:var(--accent); color:#fff; }
@media (max-width:900px) { .welcome-intro { grid-template-columns:1fr; gap:22px; } .welcome-intro .eyebrow { margin-bottom:0; } .design-option-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .welcome-main { padding-top:46px; } .welcome-primary-routes { grid-template-columns:1fr; } .welcome-primary-card { min-height:340px; } .design-options { padding:20px; } .design-options-heading { align-items:flex-start; flex-direction:column; gap:12px; } .welcome-help { align-items:flex-start; flex-direction:column; gap:22px; } .welcome-help > div:last-child { width:100%; min-width:0; } }
@media (max-width:420px) { .welcome-primary-card { min-height:320px; padding:22px; } .welcome-primary-card h2 { font-size:34px; } .welcome-primary-glyph { width:108px; height:108px; } }