/* Optical layers: transparent body, bright rim, directional specular light. */
:root {
  --glass-spring: cubic-bezier(.2, 1.08, .3, 1);
  --glass-rim: inset 0 .5px .5px #ffffff55, inset .5px 0 .5px #ffffff14,
    inset -.5px 0 .5px #ffffff0a, inset 0 -.5px .5px #ffffff22;
}
.topbar .brand {
  color:#f3f2ef;
  font-weight:400;
}
.topbar,
.topbar.dense {
  background:linear-gradient(115deg,#fcfcfc18,#eaeaea05 35%,#dddddd12),#0f0f0f70;
  border:1px solid #f1f1f140;
  backdrop-filter:blur(24px) saturate(100%);
  -webkit-backdrop-filter:blur(24px) saturate(100%);
  box-shadow:var(--glass-rim),0 10px 36px #00000055,0 1px 7px #efefef0a;
}
.glass,
.hero-float {
  background:
    radial-gradient(ellipse at var(--gx,20%) var(--gy,0%),#ffffff1c,transparent 62%),
    linear-gradient(135deg,#fcfcfc13 0%,#ffffff02 40%,#dadada0d 100%),#14141455;
  border:1px solid #ececec45;
  backdrop-filter:blur(18px) saturate(100%);
  -webkit-backdrop-filter:blur(18px) saturate(100%);
  box-shadow:var(--glass-rim),inset 0 0 18px #ffffff04,0 16px 42px #00000055;
}
.hero-float {
  border-radius:24px;
  text-shadow:0 1px 8px #000000bb;
  background:
    radial-gradient(ellipse at 10% 0%,#ffffff2c,transparent 65%),
    linear-gradient(115deg,#f5f5f512,transparent 50%,#d6d6d616),#14141485;
}
.hero-float small { color:#eaeaea; }
.hero-float span:not(.float-icon):not(.privacy-icon) { color:#d8d8d8; }
.float-icon,.privacy-icon {
  box-shadow:inset 0 1px 1px #ffffff5c,inset 0 -1px 1px #ffffff17;
  background:linear-gradient(140deg,#ffffff20,#ffffff04);
}
.memory-console:hover,.widget-card:hover {
  box-shadow:var(--glass-rim),0 22px 50px #00000055;
}

/* Controls share the same material and pointer-relative light. */
:is(.cta,.platform-pills a,.gesture-tabs button,.view-switch button,.motion-toggle,.top-link,.menu-toggle) {
  position:relative;
  isolation:isolate;
  touch-action:manipulation;
  transition:scale .35s var(--glass-spring),background .25s,box-shadow .25s,border-color .25s;
  -webkit-tap-highlight-color:transparent;
}
:is(.cta,.platform-pills a,.gesture-tabs button,.motion-toggle,.top-link) {
  background:
    radial-gradient(ellipse at var(--lx,35%) var(--ly,0%),#ffffff27,transparent 68%),
    linear-gradient(140deg,#ffffff1b,#ffffff05 55%,#d2d2d212),#21212165;
  border:1px solid #f5f5f54d;
  color:#f4f4f4;
  backdrop-filter:blur(16px) saturate(100%);
  -webkit-backdrop-filter:blur(16px) saturate(100%);
  box-shadow:var(--glass-rim),0 6px 22px #00000033;
}
.cta.cta {
  background:
    radial-gradient(ellipse at var(--lx,25%) var(--ly,0%),#ffffff80,transparent 65%),
    linear-gradient(120deg,#f5f5f56b,#bdbdbd45),#b9b9b93d;
  color:#ffffff;
  border-color:#f8f8f8a6;
  text-shadow:0 1px 4px #2a2a2a55;
  box-shadow:var(--glass-rim),inset 0 0 20px #f8f8f812,0 6px 28px #d0d0d018;
}
.cta::before { display:none; }
.cta:hover,.platform-pills a:hover,.motion-toggle:hover,.top-link:hover {
  border-color:#ffffff55;
  box-shadow:var(--glass-rim),0 8px 30px #dcdcdc25;
}
.platform-pills a { border-radius:16px; }
.platform-pills small { color:#cecece; }
.gesture-tabs button { border-radius:22px; }
.gesture-tabs button[aria-selected='true'] {
  background:linear-gradient(125deg,#f6f6f62b,#c1c1c120);
  color:#ffffff;
  box-shadow:var(--glass-rim),0 5px 16px #00000022;
  border-color:#f3f3f37a;
}
.gesture-tabs button[aria-selected='true']::after { display:none; }
.gesture-tabs.has-liquid-lens { position:relative; isolation:isolate; }
.gesture-tabs.has-liquid-lens button { z-index:1; background:transparent; }
.gesture-tabs.has-liquid-lens button[aria-selected='true'] { box-shadow:none; border-color:transparent; }
.gesture-lens {
  position:absolute;
  top:0;
  left:0;
  width:var(--lens-width,0px);
  height:var(--lens-height,0px);
  translate:var(--lens-x,0px) var(--lens-y,0px);
  border-radius:22px;
  background:linear-gradient(125deg,#f6f6f63d,#bcbcbc22);
  border:1px solid #fcfcfc7a;
  box-shadow:var(--glass-rim),0 6px 16px #00000033;
  transition:translate .62s var(--glass-spring),width .5s var(--glass-spring),height .5s var(--glass-spring);
  pointer-events:none;
}
.view-switch { border:1px solid #eaeaea24; background:#00000020; }
.view-switch.has-indicator::before {
  background:linear-gradient(130deg,#fbfbfb40,#cccccc26);
  border:1px solid #fcfcfc66;
  box-shadow:var(--glass-rim),0 4px 12px #00000033;
  transition:transform .58s var(--glass-spring),width .58s var(--glass-spring);
}
.view-switch button[aria-selected='true'] { color:#ffffff; }
.view-switch button { z-index:1; }
.liquid-pressed { scale:.985; }
.liquid-wave {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(ellipse at var(--press-x,50%) var(--press-y,50%),#ffffff30,transparent 70%),
    linear-gradient(115deg,transparent 25%,#ffffff10 48%,transparent 70%);
  mix-blend-mode:screen;
}
.champ input:focus,.champ textarea:focus {
  border-color:#f0f0f09c;
  background:#f0f0f008;
  box-shadow:inset 0 1px 1px #ffffff30,0 0 0 3px #eaeaea10;
}
@media(hover:hover) and (pointer:fine) {
  :is(.cta,.platform-pills a,.motion-toggle,.top-link):hover { scale:1.008; }
}
@media(prefers-reduced-motion:reduce) {
  .gesture-lens,.view-switch.has-indicator::before { transition:none; }
  .liquid-pressed { scale:1; }
}
[data-motion='paused'] .gesture-lens,
[data-motion='paused'] .view-switch.has-indicator::before { transition:none; }
@supports not (backdrop-filter:blur(1px)) {
  .topbar,.topbar.dense,.glass,.hero-float { background:#232323; }
  .cta,.platform-pills a,.gesture-tabs button { background:#3f3f3f; }
}
@media(forced-colors:active) {
  .gesture-lens,.liquid-wave { display:none; }
  .gesture-tabs.has-liquid-lens button[aria-selected='true'],.view-switch button[aria-selected='true'] { border:2px solid Highlight; }
}

/* Quiet silver finish. Fine edges, no colored bloom. */
.topbar,.topbar.dense { border-color:#ffffff1f; box-shadow:var(--glass-rim),0 8px 30px #0003; }
.glass,.hero-float { border-color:#ffffff26; }
.hero-float { border-radius:20px; }
:is(.platform-pills a,.gesture-tabs button,.motion-toggle,.top-link) { border-color:#ffffff26; box-shadow:var(--glass-rim),0 4px 14px #0002; }
.cta.cta { background:radial-gradient(ellipse at var(--lx,25%) var(--ly,0%),#fff8,transparent 65%),linear-gradient(130deg,#f5f5f5ed,#c4c4c4d9); color:#181818; border-color:#ffffff60; text-shadow:none; box-shadow:inset 0 .5px 0 #fff9,0 4px 18px #0003; }
.cta:hover,.platform-pills a:hover,.motion-toggle:hover,.top-link:hover { box-shadow:var(--glass-rim),0 6px 20px #0003; }
.gesture-lens,.view-switch.has-indicator::before { border-color:#ffffff38; }
.hero-device img { filter:drop-shadow(0 25px 28px #0008); }
.hero .liquid-orbit { opacity:.24; }
.device-halo { opacity:.5; }
.orbit-caption { opacity:.65; }
.float-icon,.privacy-icon { color:#e3e3e3; border-color:#ffffff26; }
.waveform i { background:linear-gradient(#eeeeee,#999999); }
:focus-visible { outline-color:#dedede; }

.cta:hover,.cta:active { transform:translate(var(--mx,0px),var(--my,0px)); }

/* Wide, quiet platform links above the discovery action. */
.hero .platform-pills {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:440px;
  margin:0 0 24px;
}
.hero .platform-pills a {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  min-height:58px;
  padding:10px 19px;
  border-radius:12px;
  border:1px solid #ffffff24;
  background:linear-gradient(120deg,#ffffff0d,#ffffff03);
  box-shadow:inset 0 .5px 0 #ffffff26,0 3px 12px #0002;
  text-align:left;
}
.hero .platform-pills a:hover {
  background:linear-gradient(120deg,#ffffff16,#ffffff06);
  border-color:#ffffff45;
}
.hero .platform-pills .platform-icon {
  display:block;
  width:25px;
  height:28px;
  flex:0 0 25px;
  fill:currentColor;
  color:#e7e7e7;
}
.hero .platform-pills .android-icon {
  width:29px;
  flex-basis:29px;
  margin-left:-2px;
  margin-right:-2px;
}
.hero .platform-label {
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}
.hero .platform-label small {
  font-size:11px;
  font-weight:400;
  color:#aaa;
  letter-spacing:.015em;
}
.hero .platform-label strong {
  font-size:16px;
  font-weight:400;
  color:#eee;
  letter-spacing:.01em;
}
.hero .platform-pills .platform-arrow {
  margin-left:auto;
  font-size:13px;
  color:#969696;
}
@media(max-width:760px) {
  .hero .platform-pills { margin:0 auto 19px; max-width:390px; gap:10px; }
  .hero .platform-pills a { padding:10px 13px; gap:11px; min-height:56px; }
}
@media(max-width:360px) {
  .hero .platform-pills a { padding-inline:10px; gap:9px; }
  .hero .platform-pills .platform-arrow { display:none; }
}

/* The material is graphite glass: a little body tint keeps it visible on dark sections. */
.topbar,.topbar.dense {
  background:linear-gradient(115deg,#ffffff16,#ffffff03 42%,#bdbbb212),#30302d72;
  border-color:#e6e3d944;
}
.glass,.hero-float {
  background:radial-gradient(ellipse at var(--gx,20%) var(--gy,0%),#ffffff20,transparent 62%),linear-gradient(135deg,#ffffff14,#ffffff04 45%,#b7b4aa0d),#5b5a5480;
  border-color:#ebe8df3b;
  box-shadow:inset 0 .5px .5px #fff8,inset .5px 0 .5px #fff2,inset 0 -.5px .5px #0003,0 16px 42px #0006;
}
.hero-float { background:radial-gradient(ellipse at 10% 0%,#ffffff2b,transparent 65%),linear-gradient(115deg,#ffffff14,transparent 50%,#bbb8ad10),#55544f99; }
:is(.cta,.platform-pills a,.gesture-tabs button,.motion-toggle,.top-link) {
  background:radial-gradient(ellipse at var(--lx,35%) var(--ly,0%),#ffffff2c,transparent 68%),linear-gradient(140deg,#ffffff18,#ffffff05 55%,#aaa79d14),#37373378;
  border-color:#ebe8df44;
}
.cta { background:radial-gradient(ellipse at var(--lx,25%) var(--ly,0%),#fff9,transparent 65%),linear-gradient(120deg,#f2f1edee,#bdbcB7d9); }
.gesture-tabs button[aria-selected='true'] { background:linear-gradient(125deg,#ffffff28,#bbb8ae1c); }
.gesture-lens,.view-switch.has-indicator::before { background:linear-gradient(125deg,#ffffff30,#aaa79d22); border-color:#fff5; }
.hero .platform-pills a { background:linear-gradient(120deg,#ffffff11,#ffffff03),#29292566; }
.hero .platform-pills a:hover { background:linear-gradient(120deg,#ffffff1c,#ffffff06),#38383270; }

/* Pearl and graphite: neutral surfaces with low-saturation reflected light. */
:root { --bg:#111214; --ink:#f0efec; --muted:#b9bdbe; --faint:#969c9e; --line:#d9dfe022; }
body { background:var(--bg); color:var(--ink); }
.hero {
  background:radial-gradient(ellipse at 77% 40%,#adb3bb20,transparent 49%),radial-gradient(ellipse at 13% 83%,#bdb7a90c,transparent 55%),#101113;
}
.hero::after { background:linear-gradient(0deg,#111214,transparent 30%); }
.hero .liquid-orbit { filter:grayscale(.85); opacity:.32; }
.hero h1 span {
  background:linear-gradient(110deg,#e5e9e5 3%,#bfcac9 34%,#cfced8 68%,#efeeea);
  background-clip:text;
  -webkit-background-clip:text;
}
.hero-lede { color:#bac0c1; }
.display em { color:#cccfd2; }
.product { background:radial-gradient(ellipse at 85% 50%,#aab4b411,transparent 65%),linear-gradient(130deg,#1c1e20,#131416); }
.memory,.widgets { background:#141517; }
.privacy { background:radial-gradient(ellipse at 50% 45%,#b8bebc15,transparent 65%),#161819; }
#prix { background:linear-gradient(135deg,#1d1f21,#121315); }
.closing { background:radial-gradient(ellipse at 50% 60%,#a9b1b11a,transparent 64%),#151719; }
#contact { background:#141617; }
.ambient-glow { background:radial-gradient(ellipse at 85% 40%,#b6bfc30d,transparent 60%); }
.topbar,.topbar.dense {
  background:linear-gradient(115deg,#f4f4ee13,#ffffff03 45%,#dbe5e810),#20242685;
  border-color:#e0e5e52b;
}
.glass,.hero-float {
  background:radial-gradient(ellipse at var(--gx,20%) var(--gy,0%),#f2f4ef24,transparent 65%),linear-gradient(135deg,#e5efed0e,transparent 50%,#e0deeb0b),#2b303477;
  border-color:#e0e7e533;
  box-shadow:inset 0 .5px .5px #fff6,inset 0 -.5px .5px #ffffff17,0 18px 45px #0005;
}
.hero-float {
  background:radial-gradient(ellipse at var(--hx,15%) var(--hy,0%),#fffff524,transparent 68%),linear-gradient(120deg,#d7e1e10d,transparent 45%,#e0daea0c),#3236399c;
}
.hero-float small { font-size:9px; letter-spacing:.11em; color:#e0e4e3; }
.hero-float p { color:#f2f2ef; }
.device-halo { opacity:.7; border-color:#d3dddf1c; box-shadow:0 0 90px #dce1d607,inset 0 0 70px #e1e4ef08; }
.device-halo::after { border-style:solid; border-color:#d3dddf0a; }
.hero .platform-pills a { background:linear-gradient(120deg,#edf2ed12,#ffffff03),#252a2c50; border-color:#e0e5e52c; }
.hero .platform-pills a:hover { background:linear-gradient(120deg,#edf2ed1b,#ffffff06),#2d333650; }
.cta.cta {
  background:radial-gradient(ellipse at var(--lx,25%) var(--ly,0%),#ffffffa0,transparent 68%),linear-gradient(115deg,#e8ede7ed,#bec6c9e3 65%,#d1ced9e3);
  color:#202425;
  box-shadow:inset 0 .5px 0 #ffffffe0,inset 0 -.5px 0 #6b78784a,0 5px 20px #0003;
}
.cta > span,.platform-arrow { transition:translate .35s cubic-bezier(.2,.8,.2,1); }
.cta:hover > span,.platform-pills a:hover .platform-arrow { translate:2px -2px; }
.hero-secondary { color:#b9c0c1; }
.hero-secondary:hover { color:#f0f1ed; }
.desktop-nav a { padding:8px 11px; border-radius:30px; transition:background .25s,color .25s; }
.desktop-nav { gap:10px; }
.desktop-nav a:hover,.desktop-nav a[aria-current] { background:#ffffff09; color:#f2f2ef; }
.desktop-nav a::after { display:none; }
.optical-rim {
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  z-index:4;
  background:radial-gradient(ellipse at var(--gx,var(--hx,20%)) var(--gy,var(--hy,0%)),#f2f7f387,transparent 57%),linear-gradient(130deg,#faf3e825,transparent 35%,#d5dfed18 80%,transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.device-caption { color:#b7bebe; font-size:10px; letter-spacing:.12em; }
#gesture-counter { font-variant-numeric:tabular-nums; }
.hero-float .float-icon { color:#d9d8e0; }
.hero-float .privacy-icon { color:#d2dfd9; border-color:#d2dfd933; }
.waveform i { background:linear-gradient(#dde4e2,#aab5b9); }
@media(max-width:760px) {
  .hero-float small { font-size:8px; }
  .hero-float p { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .cta > span,.platform-arrow { transition:none; }
  .cta:hover > span,.platform-pills a:hover .platform-arrow { translate:none; }
}
[data-motion='paused'] .cta > span,[data-motion='paused'] .platform-arrow { transition:none; translate:none; }
@supports not (backdrop-filter:blur(1px)) {
  .topbar,.topbar.dense,.glass,.hero-float { background:#25292c; }
}
@supports not (mask-composite:exclude) {
  .optical-rim { display:none; }
}