:root{ --accent:#9b6cff; --accent2:#ffb02e; --sync-ink:#160e2b; }

.sync-hero{ min-height:900px; }
.sync-hero .wrap{ justify-content:space-between; }
.sync-kicker{ margin:20px 0 0; color:var(--accent2); font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.16em; }
.sync-hero .app-hero-text{ max-width:600px; }
.sync-hero .app-hero-text h1{ font-size:clamp(42px,6.6vw,72px); }
.hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.hero-pills span,.privacy-tags span{ padding:6px 10px; border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line)); background:rgba(11,13,16,.72); color:#c9bddf; font-family:'VT323',monospace; font-size:17px; }

.sync-pair{ position:relative; width:min(470px,44vw); height:600px; flex:none; }
.phone-device{ position:absolute; left:0; top:0; z-index:2; width:270px; height:560px; padding:12px; overflow:hidden; background:#07080b; border:4px solid #282d37; border-radius:36px; box-shadow:0 28px 60px rgba(0,0,0,.65),0 0 45px color-mix(in srgb,var(--accent) 26%,transparent); transform:rotate(-5deg); }
.phone-device::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.13); border-radius:26px; pointer-events:none; }
.phone-device img{ width:100%; height:100%; object-fit:cover; border-radius:23px; image-rendering:auto; }
.phone-speaker{ position:absolute; z-index:3; left:50%; top:18px; transform:translateX(-50%); width:72px; height:12px; border-radius:10px; background:#050507; }
.watch-device{ position:absolute; right:0; bottom:15px; z-index:4; width:250px; height:370px; display:grid; place-items:center; filter:drop-shadow(0 30px 28px rgba(0,0,0,.7)); transform:rotate(8deg); }
.watch-dial{ position:relative; z-index:2; width:235px; height:235px; padding:10px; border:9px solid #282d37; border-radius:50%; background:#050507; box-shadow:inset 0 0 0 2px #555d68,0 0 0 4px #0a0d10,0 0 38px color-mix(in srgb,var(--accent2) 30%,transparent); }
.watch-dial::after{ content:""; position:absolute; right:-18px; top:62px; width:12px; height:42px; background:#343a43; border:3px solid #090b0e; }
.watch-dial img{ width:100%; height:100%; object-fit:cover; border-radius:50%; image-rendering:auto; }
.watch-device .watch-strap{ position:absolute; left:50%; translate:-50% 0; z-index:1; width:102px; height:95px; background:linear-gradient(90deg,#12151b,#313642 50%,#12151b); border:4px solid #07090b; }
.watch-strap-top{ top:0; border-radius:22px 22px 4px 4px; }
.watch-strap-bottom{ bottom:0; border-radius:4px 4px 22px 22px; }
.sync-badge{ position:absolute; z-index:5; left:78px; bottom:6px; padding:10px 14px; display:flex; flex-direction:column; background:#10141a; border:2px solid var(--accent2); box-shadow:6px 6px 0 var(--shadow); }
.sync-badge b{ color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:9px; }
.sync-badge span{ color:var(--muted); font-size:16px; }
.signal{ position:absolute; z-index:1; left:42%; top:35%; width:250px; height:250px; border:2px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:50%; animation:signal-pulse 3s steps(8) infinite; }
.signal-two{ animation-delay:1.5s; }
@keyframes signal-pulse{ from{ opacity:.75; transform:scale(.3); } to{ opacity:0; transform:scale(1.25); } }

.sync-flow{ position:relative; z-index:3; border-top:4px solid var(--shadow); border-bottom:4px solid var(--shadow); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel),color-mix(in srgb,var(--accent2) 10%,var(--panel))); }
.flow-grid{ min-height:150px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:24px; }
.flow-grid div{ display:flex; align-items:center; gap:16px; }
.flow-grid b{ color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:20px; text-shadow:0 4px 0 #000; }
.flow-grid span{ color:#cdd3d4; font-size:20px; line-height:1.15; }
.flow-grid i{ color:var(--accent); font-style:normal; font-size:34px; }

.sync-features{ grid-template-columns:repeat(4,1fr); }
.feature-symbol{ width:52px; height:52px; display:grid; place-items:center; margin-bottom:18px; border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--bg)); color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:12px; box-shadow:inset 0 0 0 2px var(--shadow); }
.watch-gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.watch-gallery figure,.phone-gallery figure{ margin:0; }
.watch-gallery figure{ position:relative; padding:12px 12px 34px; border:4px solid var(--shadow); background:var(--panel); box-shadow:inset 0 0 0 2px var(--line); transition:.15s steps(2); }
.watch-gallery figure:hover{ transform:translateY(-6px); box-shadow:inset 0 0 0 2px var(--accent),0 6px 0 var(--shadow); }
.watch-gallery img{ width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; image-rendering:auto; }
.watch-gallery figcaption,.phone-gallery figcaption{ position:absolute; left:0; right:0; bottom:7px; color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:8px; text-align:center; }

.phone-layout{ display:grid; grid-template-columns:minmax(280px,.8fr) minmax(550px,1.4fr); gap:60px; align-items:center; }
.capability-list{ display:grid; gap:12px; padding:0; margin:32px 0 0; list-style:none; }
.capability-list li{ display:grid; grid-template-columns:86px 1fr; align-items:center; gap:16px; padding:14px 16px; border-left:4px solid var(--accent); background:var(--panel); }
.capability-list b{ color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:10px; }
.capability-list span{ color:var(--muted); font-size:18px; }
.phone-gallery{ display:flex; align-items:center; justify-content:center; gap:18px; min-height:620px; }
.phone-gallery figure{ position:relative; width:30%; padding:9px 9px 36px; background:#07080b; border:4px solid #303640; border-radius:25px; box-shadow:0 22px 45px rgba(0,0,0,.6); }
.phone-gallery figure:nth-child(2){ width:34%; z-index:2; transform:translateY(-18px); border-color:color-mix(in srgb,var(--accent) 45%,#303640); }
.phone-gallery img{ width:100%; aspect-ratio:1080/2460; border-radius:15px; object-fit:cover; image-rendering:auto; }

.privacy-section{ background:radial-gradient(circle at 18% 50%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 30%); }
.privacy-grid{ display:grid; grid-template-columns:260px 1fr; gap:70px; align-items:center; max-width:980px; }
.privacy-mark{ width:220px; height:220px; display:grid; place-items:center; border:4px solid var(--accent2); background:var(--panel); font-size:80px; box-shadow:inset 0 0 0 4px var(--shadow),12px 12px 0 var(--shadow),0 0 36px color-mix(in srgb,var(--accent2) 20%,transparent); }
.privacy-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }

.setup-section .wrap{ max-width:900px; }
.setup-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0; margin:34px 0; list-style:none; text-align:left; counter-reset:none; }
.setup-steps li{ min-height:180px; padding:20px 16px; border:4px solid var(--shadow); background:linear-gradient(180deg,var(--panel),var(--panel2)); box-shadow:inset 0 0 0 2px var(--line); }
.setup-steps b{ display:block; margin-bottom:14px; color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:24px; }
.setup-steps span{ color:#c5ced0; font-size:18px; line-height:1.25; }
.coming-badge{ display:inline-flex; padding:12px 18px; border:2px solid var(--accent2); background:var(--shadow); color:var(--accent2); font-family:'Press Start 2P',monospace; font-size:10px; box-shadow:6px 6px 0 color-mix(in srgb,var(--accent) 40%,#000); }

@media(max-width:1050px){
  .sync-hero .wrap{ justify-content:center; padding-top:80px; }
  .sync-pair{ width:470px; max-width:100%; }
  .sync-features{ grid-template-columns:repeat(2,1fr); }
  .watch-gallery{ grid-template-columns:repeat(3,1fr); }
  .phone-layout{ grid-template-columns:1fr; }
}
@media(max-width:680px){
  .sync-hero{ min-height:auto; padding-top:40px; }
  .sync-pair{ width:330px; height:460px; margin:10px auto 0; }
  .phone-device{ width:205px; height:425px; }
  .watch-device{ width:188px; height:285px; }
  .watch-dial{ width:180px; height:180px; border-width:7px; }
  .watch-device .watch-strap{ width:78px; height:70px; }
  .sync-badge{ left:25px; bottom:0; }
  .flow-grid{ grid-template-columns:1fr; padding:28px 20px; }
  .flow-grid i{ display:none; }
  .sync-features,.setup-steps{ grid-template-columns:1fr; }
  .watch-gallery{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .phone-gallery{ gap:8px; min-height:auto; }
  .phone-gallery figure{ width:32%; padding:5px 5px 28px; border-width:2px; border-radius:13px; }
  .phone-gallery figure:nth-child(2){ width:36%; }
  .phone-gallery img{ border-radius:8px; }
  .privacy-grid{ grid-template-columns:1fr; gap:30px; }
  .privacy-mark{ width:130px; height:130px; font-size:52px; }
  .setup-steps li{ min-height:auto; }
}
@media(prefers-reduced-motion:reduce){ .signal{ animation:none; display:none; } }