@import url("main.css");

/** @brief Shared product-page canvas and rhythm. */
.product-page{min-height:100svh;background:linear-gradient(180deg,var(--bg-soft),var(--bg) 42rem)}
.product-main{padding-top:28px}.product-hero{display:grid;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(46px,8vw,124px);align-items:center;min-height:540px;padding:52px 0 82px}.product-kicker{margin:0 0 18px;color:var(--accent);font:.63rem var(--font-mono);letter-spacing:.1em}.product-hero h1{max-width:640px;margin:0;font-size:clamp(3rem,5.55vw,5.8rem);font-weight:650;line-height:1.03;letter-spacing:-.085em}.product-hero h1 span,.product-hero h1 em{color:var(--accent);font-style:normal}.product-lead{max-width:465px;margin:24px 0 30px;color:var(--muted);font-size:1rem}.product-actions{display:flex;flex-wrap:wrap;gap:10px}.product-demo{position:relative;min-height:405px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 88%,var(--bg));box-shadow:var(--shadow)}
.demo-label{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 20px;border-bottom:1px solid var(--line);color:var(--muted);font:.59rem var(--font-mono);letter-spacing:.07em}.demo-label b{color:var(--text);font-weight:500}.demo-label span{color:var(--accent)}
.product-content{padding:74px 0;border-top:1px solid var(--line)}.product-content h2{max-width:720px;margin:0 0 15px;font-size:clamp(2rem,4vw,4rem);line-height:1.08;letter-spacing:-.075em}.product-content>p{max-width:640px;margin:0;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.feature-card{min-height:190px;padding:22px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 90%,var(--bg));transition:transform .25s,border-color .25s,box-shadow .25s}.feature-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 16px 30px rgba(27,34,62,.07)}.feature-card b{display:block;margin-bottom:35px;color:var(--accent);font:.6rem var(--font-mono);letter-spacing:.07em}.feature-card h3{margin:0 0 8px;font-size:1.12rem;letter-spacing:-.04em}.feature-card p{margin:0;color:var(--muted);font-size:.86rem}.release-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:38px;padding:21px 23px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card) 90%,var(--bg))}.release-panel strong{font-size:.95rem}.release-panel p{margin:7px 0 0;color:var(--muted);font-size:.72rem}.release-panel code{word-break:break-all;color:var(--accent);font:.61rem/1.5 var(--font-mono)}.product-footer{display:flex;justify-content:space-between;gap:18px;padding:22px 0 34px;border-top:1px solid var(--line);color:var(--muted);font:.64rem var(--font-mono)}.product-footer a:hover{color:var(--text)}

/** @brief OTA Console: task stages share the standard product shell. */
.console-demo{background:linear-gradient(135deg,var(--glow),transparent 58%),var(--card)}.console-stage{display:grid;grid-template-columns:154px 1fr;min-height:346px}.console-steps{display:grid;align-content:center;gap:3px;padding:18px;border-right:1px solid var(--line)}.console-step{display:flex;align-items:center;gap:10px;width:100%;padding:10px 9px;border:0;border-radius:8px;background:transparent;color:var(--muted);text-align:left;font:.61rem var(--font-mono);cursor:pointer}.console-step i{width:7px;height:7px;border:1px solid var(--line-strong);border-radius:50%}.console-step.is-active{background:var(--bg-soft);color:var(--text)}.console-step.is-active i{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--glow)}.console-workspace{display:grid;grid-template-rows:auto 1fr;padding:25px}.console-metric{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:21px;border-bottom:1px solid var(--line)}.console-metric span{color:var(--muted);font:.58rem var(--font-mono)}.console-metric strong{display:block;margin-top:7px;font-size:1.26rem;letter-spacing:-.05em}.console-metric b{color:var(--accent);font:.67rem var(--font-mono)}.console-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:8px;padding-top:41px}.console-track::before{position:absolute;top:74px;left:4%;right:4%;height:1px;content:"";background:var(--line-strong)}.console-node{position:relative;z-index:1;text-align:center;color:var(--muted);font:.53rem var(--font-mono)}.console-node i{display:block;width:13px;height:13px;margin:0 auto 12px;border:3px solid var(--bg);border-radius:50%;background:var(--line-strong)}.console-node.is-done i{background:var(--accent)}.console-node.is-current i{background:var(--accent-2);box-shadow:0 0 0 7px var(--glow)}.console-note{padding:0 25px 22px;color:var(--muted);font:.59rem var(--font-mono)}

/** @brief Device Simulator: state changes are demonstrated in the shared frame. */
.simulator-demo{background:radial-gradient(circle at 67% 42%,var(--glow),transparent 30%),var(--card)}.simulator-board{display:grid;grid-template-columns:1fr 172px;gap:20px;padding:28px}.simulator-device{position:relative;display:grid;place-items:center;min-height:280px;border:1px dashed var(--line-strong);border-radius:14px}.device-ring{position:relative;width:174px;height:174px;border:1px solid var(--line-strong);border-radius:50%;box-shadow:inset 0 0 0 17px var(--bg-soft)}.device-ring::before,.device-ring::after{position:absolute;content:"";border-radius:50%}.device-ring::before{inset:32px;border:1px solid var(--accent)}.device-ring::after{inset:61px;background:var(--accent);box-shadow:0 0 0 12px var(--glow)}.device-ring[data-device-state="offline"]::after{background:#929aa8;box-shadow:none}.device-ring[data-device-state="updating"]::before{border-top-color:transparent;animation:spin 1.15s linear infinite}.device-ring[data-device-state="fault"]::after{background:#e56775;box-shadow:0 0 0 12px rgba(229,103,117,.12)}.device-caption{position:absolute;bottom:23px;text-align:center;color:var(--muted);font:.58rem var(--font-mono)}.device-caption b{display:block;margin-bottom:4px;color:var(--text);font-weight:500}.simulator-controls{display:flex;flex-direction:column;gap:7px}.simulator-controls button{padding:12px 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);text-align:left;font:.6rem var(--font-mono);cursor:pointer}.simulator-controls button:hover,.simulator-controls button.is-active{border-color:var(--line);background:var(--bg-soft);color:var(--text)}.simulator-log{margin:0 28px 24px;padding:12px 14px;border-top:1px solid var(--line);color:var(--muted);font:.58rem var(--font-mono)}.simulator-log b{color:var(--accent-2);font-weight:500}

/** @brief Curio Vault: content changes while retaining the same interface language. */
.curio-demo{background:radial-gradient(circle at 69% 44%,var(--glow),transparent 31%),var(--card)}.curio-shelf{display:grid;grid-template-columns:1fr 1.23fr;gap:20px;padding:25px}.curio-list{display:grid;align-content:center;gap:8px}.curio-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.curio-item::before{width:8px;height:8px;content:"";border-radius:50%;background:var(--line-strong)}.curio-item.is-active{border-color:var(--line);background:var(--bg-soft);color:var(--text)}.curio-item.is-active::before{background:var(--accent);box-shadow:0 0 0 5px var(--glow)}.curio-object{display:flex;flex-direction:column;justify-content:space-between;min-height:270px;padding:23px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--bg) 30%,transparent),transparent),var(--card)}.curio-object small{color:var(--muted);font:.58rem var(--font-mono)}.curio-figure{position:relative;display:grid;place-items:center;height:125px}.curio-figure::before{width:105px;height:105px;content:"";border:1px solid var(--accent);border-radius:48% 52% 45% 55%;background:radial-gradient(circle at 33% 29%,color-mix(in srgb,var(--bg) 80%,#fff),transparent 26%),linear-gradient(140deg,var(--accent-2),var(--accent));box-shadow:14px 15px 0 var(--glow);transform:rotate(-10deg)}.curio-object h3{margin:0;font-size:1.1rem;letter-spacing:-.04em}.curio-object p{margin:4px 0 0;color:var(--muted);font-size:.75rem}.curio-footer{display:flex;justify-content:space-between;color:var(--muted);font:.56rem var(--font-mono)}

@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:840px){.product-hero{grid-template-columns:1fr;gap:32px;min-height:0;padding-top:34px}.product-demo{max-width:690px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:0}.product-content{padding:58px 0}.product-footer{flex-direction:column}}
@media(max-width:540px){.product-main{padding-top:17px}.product-hero h1{font-size:clamp(2.7rem,12vw,4rem)}.product-demo{min-height:360px;border-radius:12px}.console-stage{grid-template-columns:1fr;min-height:0}.console-steps{grid-template-columns:repeat(4,1fr);border-right:0;border-bottom:1px solid var(--line);padding:10px}.console-step{justify-content:center;padding:10px 3px;font-size:0}.console-step i{margin:0}.console-workspace{padding:19px}.console-track{padding-top:30px}.console-note{padding:0 19px 19px}.simulator-board{grid-template-columns:1fr;padding:18px}.simulator-device{min-height:205px}.simulator-controls{display:grid;grid-template-columns:1fr 1fr}.simulator-log{margin:0 18px 18px}.curio-shelf{grid-template-columns:1fr;padding:18px}.curio-list{grid-template-columns:repeat(3,1fr)}.curio-item{justify-content:center;font-size:0}.curio-item::before{margin:0}.release-panel{align-items:flex-start;flex-direction:column}.product-actions .button{width:100%}}

/** @brief Adds the shared cinematic-glass surface used by every portfolio product. */
.product-page {
  --product-haze-a: rgba(56, 108, 255, .18);
  --product-haze-b: rgba(63, 220, 240, .13);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 56% 42% at 84% 9%, var(--product-haze-a), transparent 71%),
    radial-gradient(ellipse 50% 40% at 6% 95%, var(--product-haze-b), transparent 73%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-soft) 92%, #dceaff 8%), var(--bg) 57%);
}

.product-page::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(118deg, transparent 0 49.85%, color-mix(in srgb, var(--accent) 12%, transparent) 49.9% 50.1%, transparent 50.15% 100%);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 53%);
  opacity: .28;
}

:root[data-theme="dark"] .product-page {
  background:
    radial-gradient(ellipse 56% 42% at 84% 9%, color-mix(in srgb, var(--product-haze-a) 135%, transparent), transparent 71%),
    radial-gradient(ellipse 50% 40% at 6% 95%, color-mix(in srgb, var(--product-haze-b) 130%, transparent), transparent 73%),
    linear-gradient(160deg, #0a1425, var(--bg) 57%);
}

.product-ota-console { --accent: #2f69f4; --accent-2: #3ccae9; --glow: rgba(48, 107, 250, .19); --product-haze-a: rgba(50, 100, 255, .19); --product-haze-b: rgba(70, 224, 241, .13); }
.product-ota-device-simulator { --accent: #0caa99; --accent-2: #68d9bd; --glow: rgba(12, 170, 153, .18); --product-haze-a: rgba(12, 170, 153, .18); --product-haze-b: rgba(75, 216, 187, .13); }
.product-curio-vault { --accent: #7b61e8; --accent-2: #b897f8; --glow: rgba(123, 97, 232, .18); --product-haze-a: rgba(123, 97, 232, .19); --product-haze-b: rgba(189, 135, 247, .13); }
:root[data-theme="dark"] .product-ota-console { --accent: #77a6ff; --accent-2: #76e3ff; --glow: rgba(92, 164, 255, .25); }
:root[data-theme="dark"] .product-ota-device-simulator { --accent: #55d7bd; --accent-2: #8be8d2; --glow: rgba(85, 215, 189, .24); }
:root[data-theme="dark"] .product-curio-vault { --accent: #b39aff; --accent-2: #d6c0ff; --glow: rgba(179, 154, 255, .24); }

.product-page .site-header {
  position: relative;
  z-index: 20;
  background: color-mix(in srgb, var(--header) 72%, transparent);
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
}

.product-main,
.product-footer { position: relative; z-index: 1; }
.product-main { padding-top: 34px; }

.product-hero {
  min-height: 560px;
  padding: 46px 0 80px;
}

.product-hero h1 {
  max-width: 600px;
  font-size: clamp(2.85rem, 5.08vw, 5.28rem);
}

.product-lead { max-width: 455px; font-size: .98rem; }

.product-demo,
.feature-card,
.release-panel {
  border-color: color-mix(in srgb, var(--line-strong) 72%, rgba(255, 255, 255, .42));
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, .18)), color-mix(in srgb, var(--card) 78%, transparent));
  box-shadow: 0 24px 70px color-mix(in srgb, var(--shadow) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(22px) saturate(132%);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
}

.product-demo { border-radius: 18px; }
.demo-label { background: color-mix(in srgb, var(--card) 44%, transparent); }

.feature-card {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.feature-card::after {
  position: absolute;
  right: -30px;
  bottom: -35px;
  width: 94px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid color-mix(in srgb, var(--accent) 33%, transparent);
  border-radius: 50%;
  opacity: .36;
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), opacity .35s ease;
}

.feature-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: 0 24px 54px color-mix(in srgb, var(--accent) 15%, transparent); }
.feature-card:hover::after { opacity: .7; transform: scale(1.18); }
.release-panel { border-radius: 18px; }
.product-footer { border-color: color-mix(in srgb, var(--line) 75%, transparent); }
.product-footer a { transition: color .24s ease, transform .24s ease; }
.product-footer a:hover { color: var(--accent); transform: translateX(3px); }

.console-demo { background: radial-gradient(circle at 79% 22%, var(--glow), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, .18)), color-mix(in srgb, var(--card) 78%, transparent)); }
.simulator-demo { background: radial-gradient(circle at 67% 42%, var(--glow), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, .18)), color-mix(in srgb, var(--card) 78%, transparent)); }
.curio-demo { background: radial-gradient(circle at 69% 44%, var(--glow), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, rgba(255, 255, 255, .18)), color-mix(in srgb, var(--card) 78%, transparent)); }

@media (max-width: 840px) {
  .product-main { padding-top: 22px; }
  .product-hero { min-height: 0; padding-top: 34px; }
}

@media (max-width: 540px) {
  .product-page::before { background-size: 26px 26px; opacity: .2; }
  .product-hero h1 { font-size: clamp(2.55rem, 11.3vw, 4rem); line-height: 1.05; }
  .product-demo,
  .release-panel { border-radius: 14px; }
  .feature-card { min-height: 0; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-demo,
  .feature-card,
  .release-panel { background: var(--card); }
}
/** @brief Makes product content safe to render when opened directly from disk or under a slow local file server. */
.product-page .reveal{opacity:1;transform:none;}
.product-page .product-hero .reveal{animation:product-rise .72s cubic-bezier(.2,.75,.2,1) both;}
.product-page .product-content .reveal{animation:product-rise .72s .08s cubic-bezier(.2,.75,.2,1) both;}

/** @brief Adds depth without reducing text contrast or relying on a dark-only treatment. */
.product-page::after{
  position:fixed;
  z-index:0;
  inset:0;
  content:"";
  pointer-events:none;
  background:
    radial-gradient(ellipse 38% 44% at 75% 34%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 70%),
    linear-gradient(105deg,transparent 0 53%,color-mix(in srgb,var(--accent-2) 7%,transparent) 62%,transparent 78%);
  opacity:.72;
}
.product-page .product-demo,
.product-page .feature-card,
.product-page .release-panel{position:relative;z-index:1;}
.product-page .product-demo{box-shadow:0 30px 90px color-mix(in srgb,var(--accent) 13%,transparent),inset 0 1px 0 rgba(255,255,255,.3);}
.product-page .feature-card{background:linear-gradient(145deg,color-mix(in srgb,var(--card) 92%,white 8%),color-mix(in srgb,var(--card) 84%,transparent));}
.product-page .release-panel{background:linear-gradient(110deg,color-mix(in srgb,var(--card) 94%,white 6%),color-mix(in srgb,var(--card) 82%,transparent));}
@keyframes product-rise{from{transform:translateY(12px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.product-page .product-hero .reveal,.product-page .product-content .reveal{animation:none;}}