:root {
  --bg: #08090c;
  --bg-soft: #0d0f14;
  --panel: rgba(255,255,255,.055);
  --panel-strong: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.11);
  --text: #f6f7f8;
  --muted: #a1a6af;
  --orange: #ff971f;
  --blue: #16b8f3;
  --green: #38d56f;
  --yellow: #f4d332;
  --radius-xl: 34px;
  --radius-lg: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -10%, rgba(63, 81, 111, .18), transparent 34%),
    linear-gradient(180deg, #0c0e13 0%, var(--bg) 26%, #07080a 100%);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.ambient { position: fixed; pointer-events: none; z-index: -2; filter: blur(100px); opacity: .18; }
.ambient-one { width: 620px; height: 620px; border-radius: 50%; background: #ff7a00; left: -350px; top: 420px; }
.ambient-two { width: 520px; height: 520px; border-radius: 50%; background: #238cff; right: -340px; top: 90px; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }


.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.02em; }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 7px 18px rgba(0,0,0,.28); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 650; border-radius: 999px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 0 17px; }
.button-ghost { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.button-ghost:hover { background: rgba(255,255,255,.11); }
.button-primary { padding: 0 23px; min-height: 54px; color: #0a0a0a; background: linear-gradient(180deg, #fff 0%, #e6e8eb 100%); box-shadow: 0 8px 30px rgba(255,255,255,.12); }
.button-primary:hover { box-shadow: 0 12px 38px rgba(255,255,255,.18); }
.button-primary svg { width: 18px; height: 18px; fill: #111; }
.button-large { min-height: 58px; padding-inline: 28px; }

.hero { min-height: 720px; display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; gap: 60px; padding: 95px 0 75px; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 700; color: #b5bac3; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(56,213,111,.8); }
.hero h1 { margin: 28px 0 24px; line-height: .93; letter-spacing: -.064em; font-weight: 650; }
.hero-title { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-name { display: block; font-size: clamp(78px, 9vw, 132px); color: #f5f6f8; letter-spacing: -.075em; text-shadow: 0 8px 38px rgba(255,255,255,.07); }
.hero-tagline { display: block; font-size: clamp(34px, 4.3vw, 62px); line-height: 1; color: #7e838c; letter-spacing: -.055em; }
.statement h2 span, .gallery-head h2 span { color: #7e838c; }
.hero-lede { max-width: 640px; color: #a8adb5; font-size: clamp(18px, 2vw, 21px); line-height: 1.62; letter-spacing: -.02em; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.text-link { color: #c9ccd2; font-size: 14px; font-weight: 600; }
.text-link span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, 3px); }
.compatibility { margin-top: 18px; color: #6f747d; font-size: 12px; }

.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.halo { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,149,24,.18), rgba(55,84,118,.11) 46%, transparent 72%); filter: blur(2px); }
.app-icon-wrap { width: min(440px, 86%); position: relative; transform: perspective(1000px) rotateY(-7deg) rotateX(4deg); animation: float 6s ease-in-out infinite; }
.app-icon { width: 100%; display: block; filter: drop-shadow(0 42px 50px rgba(0,0,0,.5)); }
.icon-shadow { position: absolute; left: 16%; right: 16%; height: 44px; bottom: -16px; background: #000; filter: blur(35px); opacity: .55; z-index: -1; }
.orange { background: var(--orange); }
@keyframes float { 0%,100%{transform:perspective(1000px) rotateY(-7deg) rotateX(4deg) translateY(0)} 50%{transform:perspective(1000px) rotateY(-5deg) rotateX(3deg) translateY(-10px)} }

.preview-wrap { padding-bottom: 140px; }
.window-frame { overflow: hidden; border-radius: 27px; border: 1px solid rgba(255,255,255,.12); background: #12151a; box-shadow: 0 60px 120px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.025) inset; }
.window-topbar { height: 51px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.07); background: #15181d; }
.traffic { display: flex; gap: 8px; }
.traffic span { width: 11px; height: 11px; border-radius: 50%; background: #444950; }
.window-title { color: #878c94; font-size: 12px; font-weight: 600; }
.window-pill { justify-self: end; padding: 5px 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); border-radius: 999px; color: #767b83; font-size: 10px; }
.window-frame img { width: 100%; display: block; }

.statement { padding: 110px 0 120px; text-align: center; }
.statement h2, .gallery-head h2, .download h2 { margin: 18px 0 20px; font-size: clamp(44px, 6vw, 74px); line-height: 1.02; letter-spacing: -.052em; font-weight: 620; }
.statement > p:last-child { max-width: 700px; margin: 0 auto; color: #969ca6; font-size: 18px; line-height: 1.7; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 150px; }
.feature-card { min-height: 430px; position: relative; overflow: hidden; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(160deg, rgba(255,255,255,.066), rgba(255,255,255,.028)); box-shadow: 0 28px 80px rgba(0,0,0,.16); }
.feature-card-wide { grid-column: 1 / -1; min-height: 530px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; }
.feature-number { display: inline-block; color: #686e78; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.feature-card h3 { max-width: 470px; margin: 20px 0 12px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; font-weight: 610; }
.feature-card p { max-width: 490px; margin: 0; color: #969ca6; font-size: 16px; line-height: 1.65; }
.pinboard-demo { min-height: 390px; position: relative; border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 24% 18%, rgba(255,132,31,.11), transparent 35%), linear-gradient(145deg, #222528, #131518); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 35px 70px rgba(0,0,0,.3); }
.demo-widget { position: absolute; padding: 17px; border-radius: 18px; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(180deg, rgba(68,70,72,.88), rgba(42,44,46,.88)); box-shadow: 0 18px 32px rgba(0,0,0,.26); }
.demo-widget small { display: block; color: #91969c; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.demo-widget strong { display: block; margin-top: 13px; font-size: 35px; letter-spacing: -.05em; }
.demo-widget span { display: block; color: #9c9fa5; margin-top: 3px; font-size: 11px; }
.demo-clock { left: 6%; top: 10%; width: 195px; }
.demo-note { right: 7%; top: 12%; width: 190px; height: 140px; }
.demo-note span { margin-top: 19px; color: #e8e8e8; font-size: 13px; }
.demo-battery { right: 18%; bottom: 10%; width: 220px; }
.meter { height: 6px; border-radius: 99px; background: #777; margin-top: 17px; overflow: hidden; }
.meter i { display: block; width: 90%; height: 100%; background: var(--green); border-radius: inherit; }
.plus-orb { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; margin: 64px 0 42px auto; font-size: 58px; line-height: 1; font-weight: 200; color: #090b0d; background: linear-gradient(180deg, #fff, #cfd3d8); box-shadow: 0 15px 50px rgba(255,255,255,.12); }
.shortcut-keys { margin: 76px 0 56px; display: flex; align-items: center; gap: 12px; }
.shortcut-keys kbd { min-width: 82px; height: 72px; padding: 0 20px; display: grid; place-items: center; border-radius: 17px; border: 1px solid rgba(255,255,255,.13); border-bottom-color: rgba(255,255,255,.2); background: linear-gradient(180deg, #30343a, #1b1e22); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 9px 16px rgba(0,0,0,.22); color: #f6f7f8; font: 600 17px Inter, sans-serif; }
.shortcut-keys span { color: #656b74; }

.gallery { padding-bottom: 160px; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 52px; }
.gallery-head > p { max-width: 430px; margin-bottom: 8px; color: #969ca6; line-height: 1.7; }
.gallery-head h2 { margin-bottom: 0; font-size: clamp(40px, 5vw, 64px); }
.widget-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.widget-card { min-height: 250px; padding: 25px; border-radius: 25px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.038); }
.widget-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 46px; color: #0a0b0d; font-size: 20px; font-weight: 800; }
.widget-icon.cyan { background: #3dd1ff; }.widget-icon.orange { background: #ff9a28; }.widget-icon.yellow { background: #f2d83c; }.widget-icon.green { background: #42dd75; }.widget-icon.amber { background: #ef8e2f; }
.widget-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.02em; }
.widget-card p { margin: 0; color: #8d939c; font-size: 13px; line-height: 1.6; }

.download { min-height: 620px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 48px; border-radius: 38px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); }
.download-glow { position: absolute; width: 620px; height: 450px; border-radius: 50%; top: -270px; background: radial-gradient(circle, rgba(255,140,24,.28), rgba(48,103,165,.1) 45%, transparent 70%); filter: blur(20px); }
.download-icon { width: 104px; height: 104px; margin-bottom: 30px; filter: drop-shadow(0 20px 25px rgba(0,0,0,.42)); }
.download h2 { font-size: clamp(42px, 5vw, 66px); }
.download > p:not(.section-kicker) { margin: 0 0 30px; color: #9ba1aa; font-size: 17px; }
.download small { margin-top: 14px; color: #666c74; }

.site-footer { min-height: 120px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; color: #737983; font-size: 12px; }
.site-footer .brand { color: #d8dae0; font-size: 14px; }
.site-footer .brand-icon { width: 30px; height: 30px; border-radius: 8px; }
.copyright { justify-self: end; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0ms); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 86px; text-align: center; }
  .hero-title { align-items: center; }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 440px; }
  .app-icon-wrap { width: min(390px, 70%); }
  .feature-card-wide { grid-template-columns: 1fr; }
  .pinboard-demo { min-height: 350px; }
  .widget-strip { grid-template-columns: repeat(2, 1fr); }
  .widget-card:last-child { grid-column: 1 / -1; }
  .gallery-head { align-items: start; flex-direction: column; gap: 20px; }
}

@media (max-width: 700px) {
  .section-shell { width: min(100% - 28px, 1180px); }
    .brand-icon { width: 34px; height: 34px; }
    .button-small { min-height: 40px; }
  .hero { min-height: auto; gap: 25px; padding: 82px 0 52px; }
  .hero-name { font-size: clamp(72px, 21vw, 104px); }
  .hero-tagline { font-size: clamp(31px, 9vw, 46px); }
  .hero-lede { font-size: 17px; }
  .hero-actions { gap: 16px; flex-direction: column; }
  .hero-visual { min-height: 360px; }
  .app-icon-wrap { width: min(330px, 82%); }
    .preview-wrap { width: calc(100% - 16px); padding-bottom: 100px; }
  .window-frame { border-radius: 20px; }
  .window-topbar { height: 42px; }
  .statement { padding: 80px 0 90px; }
  .statement > p:last-child { font-size: 16px; }
  .feature-grid { grid-template-columns: 1fr; padding-bottom: 110px; }
  .feature-card, .feature-card-wide { grid-column: auto; min-height: 390px; padding: 26px; border-radius: 28px; }
  .pinboard-demo { min-height: 330px; }
  .demo-clock { width: 165px; }.demo-note { width: 160px; }.demo-battery { right: 7%; width: 190px; }
  .plus-orb { margin-top: 54px; }
  .gallery { padding-bottom: 110px; }
  .widget-strip { grid-template-columns: 1fr; }
  .widget-card:last-child { grid-column: auto; }
  .widget-card { min-height: 205px; }
  .widget-icon { margin-bottom: 32px; }
  .download { width: calc(100% - 20px); min-height: 560px; border-radius: 28px; padding-inline: 20px; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 30px 0 50px; }
  .copyright { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}