:root { color-scheme: light; --ink:#18283b; --muted:#65758a; --line:#dfe7ef; --teal:#087f83; --teal-dark:#056469; --gold:#dba647; --paper:#fff; --bg:#f3f7fa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 12% 0%,#dff4f0 0,transparent 35%),linear-gradient(145deg,#f7fafc,#eef4f8); color:var(--ink); font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
.shell { width:min(980px,calc(100% - 32px)); margin:0 auto; padding:50px 0 28px; }
.hero { display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.brand-mark { width:62px; height:62px; display:grid; place-items:center; border-radius:20px 20px 8px 20px; background:linear-gradient(140deg,var(--teal),#0aa39b); color:#fff; font-size:34px; font-weight:800; box-shadow:0 15px 35px #087f8338; }
.eyebrow { margin:0 0 5px; color:var(--teal); font-size:13px; font-weight:700; letter-spacing:.04em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; } .lead { margin-bottom:0; color:var(--muted); font-size:17px; }
.device-card,.apps-section { border:1px solid var(--line); border-radius:24px; background:#ffffffde; box-shadow:0 20px 60px #28445b12; padding:26px; backdrop-filter:blur(6px); }
.apps-section { margin-top:18px; transition:opacity .2s ease,filter .2s ease; } .apps-section.is-locked { opacity:.56; filter:saturate(.5); }
.section-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; } .step { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; background:#e1f3f1; color:var(--teal-dark); font-weight:800; }
h2 { margin-bottom:5px; font-size:21px; } .section-heading p { margin:0; color:var(--muted); font-size:14px; }
label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; } .device-row { display:flex; gap:10px; } input { width:100%; min-height:48px; padding:0 15px; border:1px solid #c7d5e0; border-radius:12px; background:#fff; color:var(--ink); font:inherit; direction:ltr; text-align:left; } input:focus { outline:3px solid #0aa39b32; border-color:var(--teal); }
button { min-width:120px; border:0; border-radius:12px; background:var(--teal); color:#fff; font:inherit; font-weight:700; cursor:pointer; } button:hover { background:var(--teal-dark); }
.hint { margin:11px 0 0; color:var(--muted); font-size:12px; } .status { min-height:18px; margin:10px 0 0; font-size:13px; } .status.error { color:#b03636; } .status.success { color:#157857; }
.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .app-card { display:flex; align-items:center; gap:13px; min-height:108px; padding:18px; border:1px solid var(--line); border-radius:17px; background:#fff; color:var(--ink); text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .app-card:hover { transform:translateY(-2px); border-color:#86c9c5; box-shadow:0 12px 25px #28445b17; }
.app-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:13px; background:#e5f5f2; color:var(--teal-dark); font-size:22px; font-weight:800; } .app-icon.alt { background:#fff0d7; color:#a7701e; } .app-copy { display:flex; flex-direction:column; gap:5px; flex:1; } .app-copy strong { font-size:16px; } .app-copy small { color:var(--muted); font-size:12px; line-height:1.5; } .arrow { color:var(--teal); font-size:22px; }
.desktop-link { display:inline-block; margin-top:17px; color:var(--teal-dark); font-size:13px; font-weight:700; text-decoration:none; } .desktop-link:hover { text-decoration:underline; }
footer { display:flex; justify-content:space-between; gap:14px; margin-top:18px; color:#7c8997; font-size:11px; }
@media (max-width:680px) { .shell { padding-top:26px; } .device-row,.app-grid { display:flex; flex-direction:column; } button { min-height:48px; } footer { flex-direction:column; } }