{"product_id":"eufy-security-solocam-s230-s40-brand-new","title":"eufy Security SoloCam S230 (S40) | Brand New","description":"\u003c!--\n  =====================================================\n  eufy SoloCam S230 — FLAGSHIP showcase build\n  CamGuard Australia · \"Sunset Watch · Driven by One Clock\"\n  =====================================================\n  Headline technique: a single @property `--s230f-clock`\n  drives EVERY element in the hero via calc() + sin\/cos.\n  One source of truth — sun, moon, stars, sky, lens flare,\n  status indicators all derive from it.\n  Plus: procedural starfield (single-element box-shadow),\n  SVG turbulence grain filter, lens flare ghost cascade,\n  multi-axis variable font (Recursive), 3D camera rotation,\n  magnetic hover via :has(), offset-path bird, mask reveal,\n  custom linear() easings.\n  =====================================================\n  Pure CSS · No JS · Shopify-safe · Scoped to .s230f\n  =====================================================\n--\u003e\n\n\u003cstyle\u003e\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@200..900\u0026family=DM+Sans:opsz,wght@9..40,300..700\u0026family=JetBrains+Mono:wght@400;500;700\u0026display=swap');\n\n\/* ════════════ REGISTERED PROPERTIES ════════════ *\/\n\/* The headline trick — one master clock drives everything *\/\n@property --s230f-clock     { syntax: '\u003cnumber\u003e';     inherits: true;  initial-value: 0; }\n@property --s230f-angle     { syntax: '\u003cangle\u003e';      inherits: false; initial-value: 0deg; }\n@property --s230f-glow      { syntax: '\u003ccolor\u003e';      inherits: false; initial-value: oklch(72% 0.15 70); }\n@property --godray-from     { syntax: '\u003cangle\u003e';      inherits: false; initial-value: 0deg; }\n\n.s230f, .s230f *, .s230f *::before, .s230f *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n.s230f {\n  font-family: 'DM Sans', -apple-system, sans-serif;\n  line-height: 1.55;\n  font-size: 16.5px;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: clip;\n  position: relative;\n  color: var(--ink);\n  background: var(--paper);\n\n  \/* Neutrals *\/\n  --ink: oklch(15% 0.03 260);\n  --ink-2: oklch(28% 0.025 260);\n  --ink-3: oklch(48% 0.02 260);\n  --paper: oklch(99% 0.005 80);\n  --paper-2: oklch(96% 0.012 80);\n  --paper-3: oklch(92% 0.018 80);\n  --line: oklch(88% 0.012 80);\n  --line-soft: oklch(94% 0.008 80);\n\n  \/* Sunset palette *\/\n  --coral: oklch(72% 0.18 25);\n  --coral-deep: oklch(58% 0.20 20);\n  --amber: oklch(80% 0.16 75);\n  --amber-deep: oklch(65% 0.17 65);\n  --magenta: oklch(65% 0.22 340);\n  --magenta-deep: oklch(52% 0.22 340);\n  --indigo: oklch(55% 0.20 280);\n  --indigo-deep: oklch(40% 0.18 280);\n  --teal: oklch(72% 0.13 195);\n  --teal-deep: oklch(50% 0.13 195);\n  --mint: oklch(78% 0.15 165);\n  --mint-deep: oklch(58% 0.15 165);\n\n  --night: oklch(18% 0.06 265);\n  --night-deep: oklch(8% 0.05 265);\n\n  \/* Custom organic easings via linear() — these are the magic *\/\n  --ease-spring: linear(0, 0.4 18%, 0.8 30%, 1.05 42%, 0.97 56%, 1.02 72%, 0.99 86%, 1);\n  --ease-bloom: linear(0, 0.2 25%, 0.65 50%, 0.95 75%, 1);\n  --ease-breath: linear(0, 0.5 50%, 1);\n}\n\n.s230f a { color: inherit; text-decoration: none; }\n.s230f img { max-width: 100%; height: auto; display: block; }\n.s230f h1, .s230f h2, .s230f h3, .s230f h4 {\n  font-family: 'Sora', 'DM Sans', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.2, 'slnt' 0, 'MONO' 0;\n  letter-spacing: -0.025em;\n  line-height: 1.05;\n  text-wrap: balance;\n}\n.s230f p { text-wrap: pretty; }\n\n\/* ════════════ ANIMATIONS ════════════ *\/\n@keyframes s230f-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes s230f-text-grad {\n  0%, 100% { background-position: 0% 50%; }\n  50%      { background-position: 100% 50%; }\n}\n@keyframes s230f-shimmer {\n  from { background-position: -200% 50%; }\n  to   { background-position: 200% 50%; }\n}\n@keyframes s230f-marquee {\n  from { transform: translateX(0); }\n  to   { transform: translateX(-50%); }\n}\n\n\/* THE MASTER CLOCK — drives the entire scene *\/\n@keyframes s230f-tick { to { --s230f-clock: 1; } }\n\n\/* Bird flies along offset-path *\/\n@keyframes s230f-bird-fly { to { offset-distance: 100%; } }\n\n\/* Cloud drift *\/\n@keyframes s230f-cloud {\n  from { transform: translateX(-140px); }\n  to   { transform: translateX(calc(100vw + 140px)); }\n}\n\n\/* Halo spin *\/\n@keyframes s230f-halo-spin { to { --s230f-angle: 360deg; } }\n\n\/* Variable font weight morph on scroll (Sora supports wght axis only) *\/\n@keyframes s230f-type-breathe {\n  from { font-variation-settings: 'wght' 400; }\n  to   { font-variation-settings: 'wght' 900; }\n}\n\n\/* Bloom — for the spotlight beam *\/\n@keyframes s230f-bloom {\n  from { opacity: 0; transform: translateX(-50%) scaleY(0.94); filter: blur(12px); }\n  to   { opacity: 1; transform: translateX(-50%) scaleY(1); filter: blur(5px); }\n}\n\n\/* Mask reveal — conic gradient scans across *\/\n@keyframes s230f-mask-scan {\n  to { --s230f-angle: 360deg; }\n}\n\n@supports (animation-timeline: view()) {\n  .s230f-reveal {\n    animation: s230f-fade-up 1.4s var(--ease-spring) both;\n    animation-timeline: view();\n    animation-range: entry 5% cover 30%;\n  }\n  .s230f-stagger \u003e * {\n    animation: s230f-fade-up 1.4s var(--ease-spring) both;\n    animation-timeline: view();\n    animation-range: entry 5% cover 30%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .s230f *, .s230f *::before, .s230f *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition: none !important;\n  }\n}\n\n.s230f-container {\n  max-width: 1100px;\n  margin-inline: auto;\n  padding-inline: clamp(20px, 4vw, 32px);\n}\n\n\/* ════════════ NAV ════════════ *\/\n.s230f-nav {\n  background: color-mix(in oklch, var(--paper) 92%, transparent);\n  backdrop-filter: saturate(180%) blur(20px);\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  padding-block: 14px;\n  position: sticky; top: 0; z-index: 100;\n  border-bottom: 1px solid var(--line-soft);\n}\n.s230f-nav-inner {\n  display: flex; justify-content: space-between; align-items: center;\n  gap: 14px; flex-wrap: wrap;\n}\n.s230f-logo {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.5, 'slnt' 0;\n  font-size: clamp(15px, 2vw, 18px);\n  letter-spacing: -0.01em;\n  color: var(--ink);\n}\n.s230f-logo span {\n  background: linear-gradient(135deg, var(--coral-deep), var(--amber-deep), var(--magenta-deep), var(--teal-deep));\n  background-size: 300% 300%;\n  animation: s230f-text-grad 6s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n}\n.s230f-nav-status {\n  display: inline-flex; align-items: center; gap: 8px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 10.5px; font-weight: 600;\n  letter-spacing: 0.16em; text-transform: uppercase;\n  color: var(--ink-3);\n}\n.s230f-nav-dot {\n  inline-size: 7px; block-size: 7px; border-radius: 50%;\n  background: var(--mint);\n  box-shadow: 0 0 0 0 color-mix(in oklch, var(--mint) 50%, transparent);\n  animation: s230f-mint-pulse 2.4s ease-in-out infinite;\n}\n@keyframes s230f-mint-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--mint) 50%, transparent); }\n  50% { box-shadow: 0 0 0 10px color-mix(in oklch, var(--mint) 0%, transparent); }\n}\n\n\/* ════════════ HERO — driven by ONE master clock ════════════ *\/\n.s230f-hero {\n  position: relative;\n  background: var(--night-deep);\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.s230f-stage {\n  \/* ═════ THE MASTER CLOCK ═════\n     One variable. Drives the whole atmosphere — sun, moon,\n     stars, sky, lens flares, status indicators, AND weather\n     (god rays, rain, lightning, aurora, fog) via calc() chains. *\/\n  --s230f-clock: 0;\n  animation: s230f-tick 40s linear infinite;\n\n  \/* ── DERIVED CORE VALUES ── *\/\n  \/* Sun: peaks at clock 0.25 (midday) *\/\n  --sun-progress: max(0, sin(calc(var(--s230f-clock) * 360deg)));\n  --sun-x: calc(5% + var(--s230f-clock) * 180%);\n  --sun-y: calc(var(--sun-progress) * 70%);\n  --sun-vis: calc(var(--sun-progress) * 2.5);\n\n  \/* Moon: peaks at clock 0.75 (midnight) — rises east (left), sets west (right), same as sun *\/\n  --moon-progress: max(0, calc(-1 * sin(calc(var(--s230f-clock) * 360deg))));\n  --moon-x: calc(5% + (var(--s230f-clock) - 0.5) * 180%);\n  --moon-y: calc(var(--moon-progress) * 60%);\n  --moon-vis: calc(var(--moon-progress) * 2.5);\n\n  \/* Night state — drives stars, spotlight, status pills *\/\n  --night-vis: calc(var(--moon-progress) * 1.4);\n  --bird-vis: clamp(0, calc(var(--sun-progress) - 0.5), 1);\n\n  \/* Sky phase opacities *\/\n  --sky-day-opacity: var(--sun-progress);\n  --sky-night-opacity: var(--moon-progress);\n  --twilight-bias: calc(1 - var(--sun-progress) - var(--moon-progress));\n  --sky-dawn-opacity: clamp(0, calc(var(--twilight-bias) * (1 - var(--s230f-clock) * 2)), 1);\n  --sky-dusk-opacity: clamp(0, calc(var(--twilight-bias) * (var(--s230f-clock) * 2 - 1)), 1);\n\n  \/* ── DERIVED WEATHER VALUES (new) ──\n     Each weather phase is a \"bell curve\" around a clock value.\n     formula: max(0, 1 - abs(clock - peak) * width) *\/\n\n  \/* God rays — peak at clock 0.25 (midday), visible 0.15-0.35 *\/\n  --rays-vis: max(0, calc(1 - abs(calc(var(--s230f-clock) - 0.25)) * 10));\n\n  \/* Storm (rain + clouds darken) — peak at clock 0.42, visible 0.34-0.50 *\/\n  --storm-vis: max(0, calc(1 - abs(calc(var(--s230f-clock) - 0.42)) * 12));\n\n  \/* Fog — peaks at twilight (0.0 and 0.55) *\/\n  --fog-dawn-vis: max(0, calc(1 - abs(var(--s230f-clock)) * 15));\n  --fog-dusk-vis: max(0, calc(1 - abs(calc(var(--s230f-clock) - 0.55)) * 14));\n  --fog-vis: max(var(--fog-dawn-vis), var(--fog-dusk-vis));\n\n  \/* Aurora — peak at clock 0.78 (late night), visible 0.68-0.88 *\/\n  --aurora-vis: max(0, calc(1 - abs(calc(var(--s230f-clock) - 0.78)) * 9));\n\n  position: relative;\n  block-size: clamp(620px, 82vh, 820px);\n  inline-size: 100%;\n  overflow: hidden;\n}\n\n\/* SKY LAYERS — each opacity reads from master clock *\/\n.s230f-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }\n\n.s230f-sky-dawn {\n  background:\n    radial-gradient(ellipse 70% 40% at 30% 100%, color-mix(in oklch, var(--coral) 45%, transparent) 0%, transparent 70%),\n    linear-gradient(180deg, var(--indigo-deep) 0%, var(--indigo) 22%, var(--magenta) 50%, var(--coral) 75%, var(--amber) 100%);\n  opacity: var(--sky-dawn-opacity);\n}\n.s230f-sky-day {\n  background:\n    radial-gradient(ellipse 70% 40% at 50% 100%, color-mix(in oklch, var(--teal) 30%, transparent) 0%, transparent 70%),\n    linear-gradient(180deg, oklch(60% 0.16 220) 0%, oklch(75% 0.10 215) 35%, oklch(85% 0.06 200) 70%, oklch(95% 0.03 80) 100%);\n  opacity: var(--sky-day-opacity);\n}\n.s230f-sky-dusk {\n  background:\n    radial-gradient(ellipse 70% 50% at 70% 100%, color-mix(in oklch, var(--amber) 50%, transparent) 0%, transparent 70%),\n    linear-gradient(180deg, var(--night) 0%, var(--indigo) 18%, var(--magenta) 38%, var(--coral) 65%, var(--amber) 92%, oklch(95% 0.1 80) 100%);\n  opacity: var(--sky-dusk-opacity);\n}\n.s230f-sky-night {\n  background:\n    radial-gradient(ellipse 70% 50% at 50% 100%, color-mix(in oklch, var(--indigo) 50%, transparent) 0%, transparent 70%),\n    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 30%, oklch(22% 0.08 270) 60%, var(--indigo-deep) 100%);\n  opacity: var(--sky-night-opacity);\n}\n\n\/* SUN — position + opacity computed from master clock.\n   translate: -50% 50% centres the element ON (--sun-x, --sun-y) —\n   so --sun-y is now the SUN'S CENTRE, not its bottom edge.\n   This means godrays and lens flares share the exact same anchor. *\/\n.s230f-sun {\n  position: absolute;\n  left: var(--sun-x);\n  bottom: var(--sun-y);\n  translate: -50% 50%;\n  inline-size: 90px; block-size: 90px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 35%, oklch(98% 0.06 90) 0%, oklch(85% 0.14 80) 30%, var(--amber) 65%, var(--coral) 100%);\n  box-shadow: 0 0 60px color-mix(in oklch, var(--amber) 60%, transparent),\n              0 0 120px color-mix(in oklch, var(--coral) 35%, transparent);\n  opacity: var(--sun-vis);\n  z-index: 1; pointer-events: none;\n}\n@media (max-width: 640px) { .s230f-sun { inline-size: 64px; block-size: 64px; } }\n\n\/* MOON — same centring convention as sun *\/\n.s230f-moon {\n  position: absolute;\n  left: var(--moon-x);\n  bottom: var(--moon-y);\n  translate: -50% 50%;\n  inline-size: 70px; block-size: 70px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 35%, oklch(98% 0.01 240) 0%, oklch(90% 0.02 240) 50%, oklch(78% 0.04 250) 100%);\n  box-shadow: 0 0 40px color-mix(in oklch, oklch(90% 0.04 250) 50%, transparent),\n              0 0 80px color-mix(in oklch, oklch(75% 0.08 270) 25%, transparent);\n  opacity: var(--moon-vis);\n  z-index: 1; pointer-events: none;\n}\n.s230f-crater { position: absolute; border-radius: 50%; background: oklch(70% 0.04 270 \/ 0.4); }\n.s230f-crater:nth-child(1) { inline-size: 12px; block-size: 12px; top: 22px; left: 22px; }\n.s230f-crater:nth-child(2) { inline-size: 8px; block-size: 8px; top: 38px; left: 42px; }\n.s230f-crater:nth-child(3) { inline-size: 6px; block-size: 6px; top: 28px; left: 50px; }\n@media (max-width: 640px) { .s230f-moon { inline-size: 50px; block-size: 50px; } .s230f-crater { display: none; } }\n\n\/* ════════════ PROCEDURAL STARFIELD ════════════ *\/\n\/* ONE element. 80+ stars rendered via compound box-shadow. *\/\n.s230f-starfield {\n  position: absolute;\n  top: 12%; left: 50%;\n  inline-size: 1px; block-size: 1px;\n  background: white;\n  border-radius: 50%;\n  opacity: var(--night-vis);\n  pointer-events: none;\n  z-index: 1;\n  box-shadow:\n    -560px 12px 0 white, -480px 38px 0 oklch(95% 0.05 80 \/ 0.7), -400px 8px 0 white,\n    -320px 56px 0 oklch(90% 0.05 60 \/ 0.8), -240px 22px 0 white, -160px 42px 0 oklch(98% 0 0 \/ 0.9),\n    -80px 18px 0 white, 0 32px 0 oklch(95% 0.05 80 \/ 0.6), 80px 14px 0 white,\n    160px 48px 0 oklch(98% 0.04 90 \/ 0.85), 240px 24px 0 white, 320px 58px 0 oklch(94% 0.05 70 \/ 0.7),\n    400px 18px 0 white, 480px 36px 0 oklch(92% 0.04 80 \/ 0.6), 560px 10px 0 white,\n    -540px 88px 0 oklch(98% 0 0 \/ 0.8), -460px 122px 0 white, -380px 92px 0 oklch(94% 0.04 75 \/ 0.7),\n    -300px 138px 0 white, -220px 102px 0 oklch(96% 0.03 60 \/ 0.65), -140px 128px 0 white,\n    -60px 96px 0 oklch(90% 0.05 80 \/ 0.8), 20px 122px 0 white, 100px 88px 0 oklch(95% 0.04 70 \/ 0.7),\n    180px 138px 0 white, 260px 102px 0 oklch(93% 0.05 60 \/ 0.6), 340px 122px 0 white,\n    420px 92px 0 oklch(95% 0.04 80 \/ 0.85), 500px 138px 0 white, 580px 108px 0 oklch(94% 0.04 65 \/ 0.7),\n    -520px 168px 0 white, -440px 198px 0 oklch(92% 0.04 75 \/ 0.7), -360px 182px 0 white,\n    -280px 212px 0 oklch(96% 0.03 80 \/ 0.7), -200px 178px 0 white, -120px 218px 0 oklch(95% 0.04 70 \/ 0.65),\n    -40px 188px 0 white, 40px 212px 0 oklch(94% 0.05 60 \/ 0.75), 120px 168px 0 white,\n    200px 218px 0 oklch(98% 0 0 \/ 0.85), 280px 188px 0 white, 360px 218px 0 oklch(94% 0.04 80 \/ 0.7),\n    440px 178px 0 white, 520px 208px 0 oklch(93% 0.04 65 \/ 0.6),\n    -500px 248px 0 oklch(95% 0.04 70 \/ 0.7), -420px 278px 0 white, -340px 262px 0 oklch(92% 0.04 80 \/ 0.6),\n    -260px 288px 0 white, -180px 258px 0 oklch(96% 0.03 60 \/ 0.7), -100px 282px 0 white,\n    -20px 252px 0 oklch(95% 0.04 75 \/ 0.8), 60px 282px 0 white, 140px 252px 0 oklch(94% 0.05 65 \/ 0.65),\n    220px 282px 0 white, 300px 252px 0 oklch(95% 0.04 70 \/ 0.7), 380px 282px 0 white,\n    460px 248px 0 oklch(94% 0.04 80 \/ 0.75), 540px 278px 0 white;\n}\n\n\/* ════════════ LENS FLARE GHOSTS ════════════\n   Real lens flares form a LINE through the sun and screen\n   center. Each ghost sits at parameter `t` along that line:\n     position = sun + t × (center − sun)\n   t = 0   → at sun\n   t = 1   → at screen center\n   t = 2   → diagonally opposite the sun\n   As the sun arcs across the sky, the whole line of ghosts\n   rotates around the centre — exactly like a real lens. *\/\n.s230f-flare {\n  position: absolute;\n  border-radius: 50%;\n  filter: blur(20px);\n  mix-blend-mode: screen;\n  pointer-events: none;\n  z-index: 1;\n  \/* Center each ghost on its calculated position *\/\n  translate: -50% 50%;\n  opacity: calc(var(--sun-vis) * var(--g-strength, 0.5));\n}\n\n\/* Ghost 1 — close to sun (t = 0.25) *\/\n.s230f-flare-1 {\n  --g-strength: 0.6;\n  inline-size: 70px; block-size: 70px;\n  left:   calc(var(--sun-x) + 0.25 * (50% - var(--sun-x)));\n  bottom: calc(var(--sun-y) + 0.25 * (50% - var(--sun-y)));\n  background: radial-gradient(circle, oklch(85% 0.18 25 \/ 0.7) 0%, transparent 60%);\n}\n\n\/* Ghost 2 — between sun and center (t = 0.55) *\/\n.s230f-flare-2 {\n  --g-strength: 0.5;\n  inline-size: 90px; block-size: 90px;\n  left:   calc(var(--sun-x) + 0.55 * (50% - var(--sun-x)));\n  bottom: calc(var(--sun-y) + 0.55 * (50% - var(--sun-y)));\n  background: radial-gradient(circle, oklch(82% 0.20 340 \/ 0.55) 0%, transparent 60%);\n}\n\n\/* Ghost 3 — AT screen center (t = 1.0) — main bright ring *\/\n.s230f-flare-3 {\n  --g-strength: 0.45;\n  inline-size: 140px; block-size: 140px;\n  left:   50%;\n  bottom: 50%;\n  background: radial-gradient(circle, oklch(95% 0.12 75 \/ 0.55) 0%, transparent 60%);\n}\n\n\/* Ghost 4 — past center, opposite direction (t = 1.5) *\/\n.s230f-flare-4 {\n  --g-strength: 0.5;\n  inline-size: 80px; block-size: 80px;\n  left:   calc(var(--sun-x) + 1.5 * (50% - var(--sun-x)));\n  bottom: calc(var(--sun-y) + 1.5 * (50% - var(--sun-y)));\n  background: radial-gradient(circle, oklch(75% 0.22 0 \/ 0.6) 0%, transparent 60%);\n}\n\n\/* Ghost 5 — diagonally opposite the sun (t = 2.0) *\/\n.s230f-flare-5 {\n  --g-strength: 0.45;\n  inline-size: 55px; block-size: 55px;\n  left:   calc(var(--sun-x) + 2 * (50% - var(--sun-x)));\n  bottom: calc(var(--sun-y) + 2 * (50% - var(--sun-y)));\n  background: radial-gradient(circle, oklch(70% 0.20 280 \/ 0.65) 0%, transparent 60%);\n}\n\n\/* ════════════ CLOUDS ════════════ *\/\n.s230f-cloud {\n  position: absolute; block-size: 22px; border-radius: 100px;\n  background: oklch(98% 0 0 \/ 0.55);\n  z-index: 2; pointer-events: none;\n  opacity: var(--sky-day-opacity);\n}\n.s230f-cloud::before, .s230f-cloud::after {\n  content: ''; position: absolute; background: inherit; border-radius: 50%;\n}\n.s230f-cloud::before { inline-size: 60%; block-size: 160%; top: -50%; left: 16%; }\n.s230f-cloud::after  { inline-size: 40%; block-size: 130%; top: -30%; left: 56%; }\n.s230f-c1 { top: 14%; inline-size: 70px; animation: s230f-cloud 80s linear infinite; }\n.s230f-c2 { top: 22%; inline-size: 60px; animation: s230f-cloud 110s linear infinite; animation-delay: -40s; }\n.s230f-c3 { top: 8%; inline-size: 80px; animation: s230f-cloud 95s linear infinite; animation-delay: -25s; }\n\n\/* ════════════ BIRD — flies along SVG offset-path ════════════ *\/\n.s230f-bird {\n  position: absolute;\n  inset: 0;\n  font-size: 16px;\n  color: oklch(20% 0.05 250 \/ 0.75);\n  offset-path: path('M -50 280 Q 200 100, 500 220 T 1200 240');\n  offset-rotate: auto;\n  animation: s230f-bird-fly 18s linear infinite;\n  z-index: 3;\n  opacity: var(--bird-vis);\n  pointer-events: none;\n}\n\n\/* ════════════ TREE ════════════ *\/\n.s230f-tree { position: absolute; bottom: 22%; left: 4%; z-index: 4; }\n.s230f-tree-trunk {\n  inline-size: 10px; block-size: 80px;\n  background: linear-gradient(180deg, oklch(35% 0.05 50), oklch(25% 0.05 50));\n  margin-inline: auto; border-radius: 3px;\n}\n.s230f-tree-canopy {\n  inline-size: 100px; block-size: 110px;\n  background: radial-gradient(circle at 30% 30%, var(--mint) 0%, var(--teal-deep) 60%, oklch(35% 0.10 175) 100%);\n  border-radius: 50%; margin-bottom: -15px; position: relative;\n  box-shadow:\n    -22px 12px 0 -8px oklch(40% 0.10 170),\n    22px 10px 0 -10px var(--teal-deep),\n    -4px -22px 0 -14px var(--mint);\n}\n@media (max-width: 768px) {\n  .s230f-tree { left: 1%; bottom: 22%; transform: scale(0.7); transform-origin: bottom left; }\n}\n\n\/* ════════════ WALL — clean, no grid texture ════════════ *\/\n.s230f-wall {\n  position: absolute;\n  inset-inline: 0; bottom: 0;\n  block-size: 25%;\n  background: linear-gradient(180deg,\n    color-mix(in oklch, var(--paper-3) 100%, transparent) 0%,\n    color-mix(in oklch, var(--paper-3) 92%, var(--ink-3)) 100%);\n  z-index: 3;\n}\n.s230f-wall::before {\n  \/* Soft horizon shadow at the top of the wall — replaces grid texture *\/\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  block-size: 14px;\n  background: linear-gradient(180deg, oklch(0% 0 0 \/ 0.12), transparent);\n  pointer-events: none;\n}\n\n\/* ════════════ WEATHER LAYER — drives by master clock ════════════ *\/\n\n\/* GOD RAYS — radial light beams from sun, peaks at midday.\n   Element CENTRE is at the sun's centre via bottom + translate.\n   Gradient is rotated by animating its `from` angle (via @property)\n   instead of rotating the element — keeps the centre anchored. *\/\n.s230f-godrays {\n  position: absolute;\n  left: var(--sun-x);\n  bottom: var(--sun-y);\n  inline-size: 1100px; block-size: 1100px;\n  translate: -50% 50%;\n  background:\n    radial-gradient(circle at center,\n      color-mix(in oklch, var(--amber) 35%, transparent) 0%,\n      color-mix(in oklch, var(--amber) 12%, transparent) 12%,\n      transparent 25%),\n    conic-gradient(from var(--godray-from) at center,\n      transparent 0deg,   color-mix(in oklch, var(--amber) 38%, transparent) 2deg,  transparent 5deg,\n      transparent 19deg,  color-mix(in oklch, var(--amber) 30%, transparent) 22deg, transparent 25deg,\n      transparent 39deg,  color-mix(in oklch, var(--amber) 35%, transparent) 42deg, transparent 45deg,\n      transparent 59deg,  color-mix(in oklch, var(--amber) 28%, transparent) 62deg, transparent 65deg,\n      transparent 79deg,  color-mix(in oklch, var(--amber) 34%, transparent) 82deg, transparent 85deg,\n      transparent 99deg,  color-mix(in oklch, var(--amber) 30%, transparent) 102deg, transparent 105deg,\n      transparent 119deg, color-mix(in oklch, var(--amber) 36%, transparent) 122deg, transparent 125deg,\n      transparent 139deg, color-mix(in oklch, var(--amber) 28%, transparent) 142deg, transparent 145deg,\n      transparent 159deg, color-mix(in oklch, var(--amber) 34%, transparent) 162deg, transparent 165deg,\n      transparent 179deg, color-mix(in oklch, var(--amber) 32%, transparent) 182deg, transparent 185deg,\n      transparent 199deg, color-mix(in oklch, var(--amber) 36%, transparent) 202deg, transparent 205deg,\n      transparent 219deg, color-mix(in oklch, var(--amber) 28%, transparent) 222deg, transparent 225deg,\n      transparent 239deg, color-mix(in oklch, var(--amber) 34%, transparent) 242deg, transparent 245deg,\n      transparent 259deg, color-mix(in oklch, var(--amber) 30%, transparent) 262deg, transparent 265deg,\n      transparent 279deg, color-mix(in oklch, var(--amber) 36%, transparent) 282deg, transparent 285deg,\n      transparent 299deg, color-mix(in oklch, var(--amber) 28%, transparent) 302deg, transparent 305deg,\n      transparent 319deg, color-mix(in oklch, var(--amber) 34%, transparent) 322deg, transparent 325deg,\n      transparent 339deg, color-mix(in oklch, var(--amber) 30%, transparent) 342deg, transparent 345deg,\n      transparent 360deg);\n  mix-blend-mode: screen;\n  filter: blur(1.5px);\n  opacity: calc(var(--rays-vis) * var(--sun-vis));\n  z-index: 1; pointer-events: none;\n  animation: s230f-rays-spin 90s linear infinite;\n}\n\/* Rotate the gradient's \"from\" angle — element itself stays anchored *\/\n@keyframes s230f-rays-spin { to { --godray-from: 360deg; } }\n\n\/* STORM SKY OVERLAY — overall darkening during storm phase *\/\n.s230f-storm-clouds {\n  position: absolute; inset: 0;\n  background:\n    radial-gradient(ellipse 80% 60% at 50% 20%, oklch(20% 0.03 250 \/ 0.85) 0%, transparent 70%),\n    linear-gradient(180deg, oklch(25% 0.04 250) 0%, oklch(40% 0.03 250) 50%, transparent 100%);\n  opacity: calc(var(--storm-vis) * 0.7);\n  z-index: 2; pointer-events: none;\n}\n\n\/* INDIVIDUAL STORM CLOUDS — big billowing dark masses *\/\n.s230f-storm-cloud {\n  position: absolute;\n  border-radius: 100px;\n  background: oklch(16% 0.04 260);\n  z-index: 2;\n  pointer-events: none;\n  filter: blur(6px);\n}\n.s230f-storm-cloud::before, .s230f-storm-cloud::after {\n  content: ''; position: absolute;\n  background: inherit; border-radius: 50%;\n}\n.s230f-storm-cloud::before { inline-size: 70%; block-size: 200%; top: -65%; left: 10%; }\n.s230f-storm-cloud::after  { inline-size: 55%; block-size: 170%; top: -50%; left: 50%; }\n\n.s230f-sc1 { top: 4%;  left: 6%;  inline-size: 260px; block-size: 56px; opacity: calc(var(--storm-vis) * 0.95); animation: s230f-storm-drift-a 55s linear infinite; }\n.s230f-sc2 { top: 14%; left: 28%; inline-size: 320px; block-size: 70px; opacity: var(--storm-vis); animation: s230f-storm-drift-b 75s linear infinite; }\n.s230f-sc3 { top: 2%;  left: 52%; inline-size: 240px; block-size: 50px; opacity: calc(var(--storm-vis) * 0.9);  animation: s230f-storm-drift-a 65s linear infinite -25s; }\n.s230f-sc4 { top: 17%; left: 68%; inline-size: 300px; block-size: 60px; opacity: calc(var(--storm-vis) * 0.85); animation: s230f-storm-drift-b 85s linear infinite -35s; }\n.s230f-sc5 { top: 7%;  left: 84%; inline-size: 220px; block-size: 48px; opacity: calc(var(--storm-vis) * 0.9);  animation: s230f-storm-drift-a 70s linear infinite -45s; }\n\n\/* Subtler middle-distance clouds for depth *\/\n.s230f-sc6 { top: 22%; left: 12%; inline-size: 280px; block-size: 50px; opacity: calc(var(--storm-vis) * 0.65); animation: s230f-storm-drift-b 95s linear infinite -15s; background: oklch(25% 0.04 260); filter: blur(10px); }\n.s230f-sc7 { top: 25%; left: 50%; inline-size: 260px; block-size: 48px; opacity: calc(var(--storm-vis) * 0.6);  animation: s230f-storm-drift-a 100s linear infinite -55s; background: oklch(28% 0.04 260); filter: blur(12px); }\n\n@keyframes s230f-storm-drift-a {\n  0%, 100% { transform: translateX(-40px); }\n  50%      { transform: translateX(40px); }\n}\n@keyframes s230f-storm-drift-b {\n  0%, 100% { transform: translateX(30px); }\n  50%      { transform: translateX(-30px); }\n}\n\n\/* RAIN — individual drops with varied positions, speeds and trails.\n   30 absolutely-positioned spans, each with its own --x \/ --d \/ --s.\n   Looks organic instead of \"wallpaper repeating lines\". *\/\n.s230f-rain {\n  position: absolute; inset: 0;\n  z-index: 4; pointer-events: none;\n  opacity: var(--storm-vis);\n  overflow: hidden;\n}\n.s230f-drop {\n  position: absolute;\n  left: var(--x);\n  top: -10%;\n  inline-size: 1.5px;\n  block-size: var(--len, 20px);\n  background: linear-gradient(180deg,\n    transparent 0%,\n    oklch(88% 0.04 230 \/ 0.4) 30%,\n    oklch(92% 0.05 230 \/ 0.85) 80%,\n    oklch(98% 0.04 230 \/ 0.95) 100%);\n  border-radius: 1px;\n  transform: rotate(10deg);\n  filter: blur(0.4px);\n  animation: s230f-drop-fall var(--s, 0.7s) linear var(--d, 0s) infinite;\n  mix-blend-mode: screen;\n}\n@keyframes s230f-drop-fall {\n  0%   { top: -10%; opacity: 0; }\n  10%  { opacity: 1; }\n  90%  { opacity: 1; }\n  100% { top: 110%; opacity: 0; }\n}\n\n\/* LIGHTNING — sharp white flashes during storm *\/\n.s230f-lightning {\n  position: absolute; inset: 0;\n  background: linear-gradient(180deg, oklch(98% 0.04 220) 0%, oklch(94% 0.05 230) 30%, transparent 70%);\n  opacity: 0;\n  z-index: 5; pointer-events: none;\n  mix-blend-mode: screen;\n  animation: s230f-lightning-flash 40s steps(1, end) infinite;\n}\n@keyframes s230f-lightning-flash {\n  0%, 36%, 36.4%, 37%, 37.3%, 39%, 39.3%, 41%, 41.3%, 100% { opacity: 0; }\n  36.2%, 37.2%, 39.2%, 41.2% { opacity: calc(var(--storm-vis) * 0.85); }\n}\n\n\/* AURORA — wavy ethereal curtain during late night *\/\n.s230f-aurora {\n  position: absolute;\n  inset-inline: -10%;\n  top: -5%;\n  block-size: 60%;\n  background:\n    linear-gradient(180deg,\n      transparent 0%,\n      color-mix(in oklch, var(--mint) 38%, transparent) 18%,\n      color-mix(in oklch, var(--teal) 32%, transparent) 38%,\n      color-mix(in oklch, var(--indigo) 24%, transparent) 60%,\n      transparent 85%);\n  filter: blur(28px);\n  mix-blend-mode: screen;\n  opacity: var(--aurora-vis);\n  z-index: 1; pointer-events: none;\n  transform-origin: center top;\n  animation: s230f-aurora-wave 11s ease-in-out infinite;\n}\n@keyframes s230f-aurora-wave {\n  0%, 100% { transform: scaleY(1) skewX(-5deg); filter: blur(28px) hue-rotate(0deg); }\n  50% { transform: scaleY(1.12) skewX(5deg); filter: blur(34px) hue-rotate(25deg); }\n}\n\n\/* Second aurora layer for shimmer\/depth *\/\n.s230f-aurora-2 {\n  position: absolute;\n  inset-inline: -5%;\n  top: 3%;\n  block-size: 45%;\n  background:\n    linear-gradient(180deg,\n      transparent 0%,\n      color-mix(in oklch, var(--magenta) 22%, transparent) 30%,\n      color-mix(in oklch, var(--indigo) 18%, transparent) 65%,\n      transparent 90%);\n  filter: blur(36px);\n  mix-blend-mode: screen;\n  opacity: calc(var(--aurora-vis) * 0.7);\n  z-index: 1; pointer-events: none;\n  animation: s230f-aurora-wave-2 14s ease-in-out infinite;\n}\n@keyframes s230f-aurora-wave-2 {\n  0%, 100% { transform: scaleY(1) skewX(4deg) translateX(-2%); }\n  50% { transform: scaleY(0.92) skewX(-4deg) translateX(2%); }\n}\n\n\/* FOG — horizontal mist layer at twilight (dawn + dusk) *\/\n.s230f-fog {\n  position: absolute;\n  inset-inline: -5%;\n  bottom: 22%;\n  block-size: 38%;\n  background: linear-gradient(180deg,\n    transparent 0%,\n    oklch(88% 0.02 80 \/ 0.45) 35%,\n    oklch(84% 0.03 80 \/ 0.55) 65%,\n    oklch(86% 0.02 80 \/ 0.35) 90%,\n    transparent 100%);\n  filter: blur(20px);\n  opacity: var(--fog-vis);\n  z-index: 3; pointer-events: none;\n  animation: s230f-fog-drift 28s ease-in-out infinite;\n}\n@keyframes s230f-fog-drift {\n  0%, 100% { transform: translateX(-3%) scaleX(1); }\n  50% { transform: translateX(3%) scaleX(1.04); }\n}\n\n\/* TREE wind sway — intensifies during storm *\/\n.s230f-tree-canopy { transform-origin: bottom center; animation: s230f-tree-sway 4s ease-in-out infinite; }\n@keyframes s230f-tree-sway {\n  0%, 100% { transform: rotate(calc(-2deg - var(--storm-vis, 0) * 4deg)); }\n  50% { transform: rotate(calc(2deg + var(--storm-vis, 0) * 4deg)); }\n}\n\n\/* ════════════ 3D CAMERA — preserve-3d + perspective ════════════ *\/\n.s230f-camera-scene {\n  position: absolute;\n  bottom: 25%;\n  right: 14%;\n  perspective: 1200px;\n  z-index: 6;\n  cursor: pointer;\n}\n.s230f-camera-3d {\n  position: relative;\n  inline-size: 80px; block-size: 70px;\n  transform-style: preserve-3d;\n  transition: transform 1.4s var(--ease-spring);\n}\n.s230f-camera-scene:hover .s230f-camera-3d {\n  transform: rotateY(24deg) rotateX(-12deg);\n}\n.s230f-cam-mount {\n  inline-size: 8px; block-size: 18px;\n  background: linear-gradient(180deg, oklch(60% 0.02 250), oklch(40% 0.02 250));\n  margin-inline: auto;\n  border-radius: 2px 2px 0 0;\n  transform: translateZ(-10px);\n}\n.s230f-cam-body {\n  position: relative;\n  inline-size: 64px; block-size: 50px;\n  margin-inline: auto;\n  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);\n  border-radius: 22% 22% 28% 28% \/ 26% 26% 32% 32%;\n  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);\n  box-shadow:\n    0 4px 12px oklch(0% 0 0 \/ 0.2),\n    inset 0 -2px 0 oklch(0% 0 0 \/ 0.06);\n  transform: translateZ(0);\n}\n.s230f-cam-solar {\n  position: absolute;\n  top: -6px; left: 14%; right: 14%;\n  block-size: 9px;\n  background: linear-gradient(180deg, oklch(28% 0.04 250), oklch(18% 0.04 250));\n  border-radius: 12% 12% 4% 4% \/ 28% 28% 4% 4%;\n  transform: translateZ(8px);\n}\n.s230f-cam-lens {\n  position: absolute;\n  top: 30%; left: 50%;\n  inline-size: 26px; block-size: 26px;\n  background: radial-gradient(circle at 35% 35%,\n    oklch(40% 0.02 250) 0%, oklch(20% 0.02 250) 50%, oklch(8% 0.02 250) 100%);\n  border-radius: 50%;\n  border: 2px solid oklch(45% 0.02 250);\n  transform: translate(-50%, 0) translateZ(20px);\n  box-shadow: inset 0 0 4px oklch(0% 0 0 \/ 0.4);\n}\n.s230f-cam-lens::after {\n  content: '';\n  position: absolute;\n  inline-size: 6px; block-size: 6px;\n  background: oklch(98% 0 0 \/ 0.4);\n  border-radius: 50%;\n  top: 4px; left: 4px;\n}\n.s230f-cam-led {\n  position: absolute;\n  top: 6px; right: 10px;\n  inline-size: 5px; block-size: 5px;\n  border-radius: 50%;\n  background: color-mix(in oklch, var(--mint) calc(100% - var(--night-vis) * 100%), var(--coral));\n  box-shadow:\n    0 0 8px currentColor,\n    0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);\n  color: color-mix(in oklch, var(--mint) calc(100% - var(--night-vis) * 100%), var(--coral));\n  transform: translateZ(22px);\n}\n@media (max-width: 640px) {\n  .s230f-camera-scene { right: 8%; bottom: 24%; }\n}\n\n\/* ════════════ SPOTLIGHT BEAM ════════════ *\/\n\/* Now a CHILD of the camera-scene element so its apex naturally\n   anchors to the camera lens, regardless of viewport size. *\/\n.s230f-spotlight {\n  position: absolute;\n  top: 65%;           \/* apex at the lens level (near bottom of camera scene) *\/\n  left: 50%;          \/* horizontally centred on the camera scene *\/\n  inline-size: 320px;\n  block-size: 280px;\n  transform: translateX(-50%);\n  background: linear-gradient(180deg,\n    color-mix(in oklch, var(--amber) 60%, transparent) 0%,\n    color-mix(in oklch, var(--amber) 35%, transparent) 35%,\n    color-mix(in oklch, var(--amber) 12%, transparent) 75%,\n    transparent 100%);\n  \/* Narrow apex at top-centre — emanates from the camera lens *\/\n  clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);\n  filter: blur(6px);\n  z-index: 5; pointer-events: none;\n  opacity: var(--night-vis);\n  mix-blend-mode: screen;\n}\n.s230f-spotlight-pool {\n  position: absolute;\n  bottom: -120px;     \/* below the camera, on the wall\/ground *\/\n  left: 50%;\n  inline-size: 240px;\n  block-size: 30px;\n  transform: translateX(-50%);\n  background: radial-gradient(ellipse, color-mix(in oklch, var(--amber) 55%, transparent) 0%, transparent 70%);\n  filter: blur(10px);\n  z-index: 4; pointer-events: none;\n  opacity: var(--night-vis);\n  mix-blend-mode: screen;\n}\n@media (max-width: 640px) {\n  .s230f .s230f-spotlight { inline-size: 240px; block-size: 220px; }\n  .s230f .s230f-spotlight-pool { inline-size: 180px; bottom: -100px; }\n}\n\n\/* ════════════ SVG FILM GRAIN OVERLAY ════════════ *\/\n.s230f-grain {\n  position: absolute; inset: 0;\n  filter: url(#s230f-grain-filter);\n  pointer-events: none;\n  z-index: 10;\n  opacity: 0.18;\n  mix-blend-mode: overlay;\n}\n\n\/* ════════════ STATUS INDICATORS ════════════ *\/\n.s230f-status {\n  position: absolute;\n  background: oklch(99% 0 0 \/ 0.96);\n  backdrop-filter: blur(10px);\n  padding: 7px 14px; border-radius: 12px;\n  display: flex; align-items: center; gap: 7px;\n  font-size: 11px; font-weight: 800;\n  letter-spacing: 0.05em; text-transform: uppercase;\n  color: var(--ink);\n  box-shadow: 0 8px 24px oklch(0% 0 0 \/ 0.2);\n  z-index: 8; white-space: nowrap;\n}\n.s230f-status-dot {\n  inline-size: 8px; block-size: 8px; border-radius: 50%;\n  flex-shrink: 0;\n}\n.s230f-status.solar { bottom: 19%; right: 16%; }\n\/* Dot colour derived from master clock — amber by day *\/\n.s230f-status.solar .s230f-status-dot {\n  background: color-mix(in oklch, oklch(70% 0.01 250) calc((1 - var(--sun-vis)) * 100%), var(--amber));\n  box-shadow:\n    0 0 calc(var(--sun-vis) * 12px) var(--amber),\n    0 0 0 calc(var(--sun-vis) * 4px) color-mix(in oklch, var(--amber) 22%, transparent);\n}\n.s230f-status.spot { bottom: 14%; right: 16%; }\n\/* Spotlight indicator — derived from night-vis *\/\n.s230f-status.spot .s230f-status-dot {\n  background: color-mix(in oklch, oklch(70% 0.01 250) calc((1 - var(--night-vis)) * 100%), var(--magenta));\n  box-shadow:\n    0 0 calc(var(--night-vis) * 12px) var(--magenta),\n    0 0 0 calc(var(--night-vis) * 4px) color-mix(in oklch, var(--magenta) 25%, transparent);\n}\n@media (max-width: 640px) {\n  .s230f-status { font-size: 10px; padding: 5px 10px; }\n  .s230f-status.solar { bottom: 20%; right: 4%; }\n  .s230f-status.spot { bottom: 14%; right: 4%; }\n}\n\n\/* ════════════ HERO TEXT ════════════ *\/\n.s230f-hero-overlay {\n  position: absolute; inset: 0;\n  z-index: 9;\n  display: flex; align-items: center;\n  pointer-events: none;\n}\n.s230f-hero-text {\n  inline-size: 100%;\n  padding: 0 clamp(20px, 4vw, 40px);\n  max-inline-size: 1100px;\n  margin-inline: auto;\n  pointer-events: auto;\n}\n.s230f-hero-eyebrow {\n  display: inline-flex; align-items: center; gap: 10px;\n  background: color-mix(in oklch, var(--paper) 88%, transparent);\n  backdrop-filter: blur(12px);\n  border: 1px solid color-mix(in oklch, var(--paper) 50%, transparent);\n  border-radius: 999px;\n  padding: 8px 16px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--ink-2);\n  margin-bottom: 22px;\n  box-shadow: 0 4px 16px oklch(0% 0 0 \/ 0.08);\n}\n.s230f-hero-eyebrow::before {\n  content: '';\n  inline-size: 6px; block-size: 6px;\n  border-radius: 50%;\n  background: var(--coral);\n  box-shadow: 0 0 6px var(--coral);\n}\n\n\/* Multi-axis variable font on the headline *\/\n.s230f-hero h1 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'CASL' 0.3, 'slnt' 0, 'MONO' 0;\n  font-size: clamp(2.6rem, 8vw, 5.5rem);\n  letter-spacing: -0.04em;\n  line-height: 0.96;\n  color: var(--paper);\n  margin-bottom: 22px;\n  text-shadow: 0 4px 30px oklch(0% 0 0 \/ 0.45);\n}\n.s230f-hero h1 em {\n  font-style: normal;\n  background: linear-gradient(135deg, var(--amber), var(--coral), var(--magenta), var(--amber));\n  background-size: 300% 300%;\n  animation: s230f-text-grad 6s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n  font-variation-settings: 'wght' 900, 'CASL' 0.5, 'slnt' -4, 'MONO' 0;\n}\n\n\/* Multi-axis variable font choreography on scroll *\/\n@supports (animation-timeline: view()) {\n  .s230f-hero h1 em {\n    animation: s230f-type-breathe 1.6s linear both;\n    animation-timeline: view();\n    animation-range: entry 0% cover 40%;\n  }\n}\n\n.s230f-hero-sub {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 350, 'CASL' 0.4, 'slnt' 0;\n  font-size: clamp(15px, 2vw, 20px);\n  color: oklch(94% 0.01 80 \/ 0.92);\n  max-inline-size: 480px;\n  line-height: 1.5;\n  margin-bottom: 26px;\n  text-shadow: 0 2px 12px oklch(0% 0 0 \/ 0.5);\n}\n.s230f-hero-sub strong {\n  background: linear-gradient(135deg, var(--amber), var(--coral));\n  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n  font-variation-settings: 'wght' 700, 'CASL' 0.6;\n}\n.s230f-hero-pills {\n  display: flex; flex-wrap: wrap; gap: 8px;\n}\n.s230f-hero-pill {\n  display: inline-flex; align-items: center; gap: 6px;\n  background: color-mix(in oklch, var(--paper) 12%, transparent);\n  backdrop-filter: blur(10px);\n  border: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);\n  color: var(--paper);\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px; font-weight: 600;\n  letter-spacing: 0.06em;\n  padding: 8px 14px;\n  border-radius: 999px;\n}\n.s230f-hero-pill.amber { color: color-mix(in oklch, var(--amber) 80%, white); border-color: color-mix(in oklch, var(--amber) 35%, transparent); }\n.s230f-hero-pill.coral { color: color-mix(in oklch, var(--coral) 80%, white); border-color: color-mix(in oklch, var(--coral) 35%, transparent); }\n.s230f-hero-pill.mint  { color: color-mix(in oklch, var(--mint) 80%, white); border-color: color-mix(in oklch, var(--mint) 40%, transparent); }\n.s230f-hero-pill.magenta { color: color-mix(in oklch, var(--magenta) 80%, white); border-color: color-mix(in oklch, var(--magenta) 35%, transparent); }\n\n\/* ════════════ MARQUEE STRIP ════════════ *\/\n.s230f-strip {\n  background: linear-gradient(90deg, var(--coral-deep), var(--amber-deep), var(--magenta-deep), var(--teal-deep), var(--indigo-deep), var(--coral-deep));\n  background-size: 400% 100%;\n  animation: s230f-shimmer 18s linear infinite;\n  padding-block: 14px;\n  color: var(--paper);\n  overflow: hidden;\n}\n.s230f-strip-track {\n  display: inline-flex; gap: 36px;\n  white-space: nowrap;\n  animation: s230f-marquee 42s linear infinite;\n  padding-inline-start: 100%;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  letter-spacing: 0.18em;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n.s230f-strip-track span { display: inline-flex; align-items: center; gap: 12px; }\n.s230f-strip-track span::after { content: '◆'; color: oklch(98% 0.05 80); font-size: 8px; }\n\n\/* ════════════ SECTIONS ════════════ *\/\n.s230f-section { padding-block: clamp(64px, 10vh, 120px); }\n\n.s230f-eyebrow {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px; font-weight: 700;\n  letter-spacing: 0.2em; text-transform: uppercase;\n  margin-bottom: 14px;\n  display: inline-flex; align-items: center; gap: 10px;\n}\n.s230f-eyebrow::before { content: ''; inline-size: 22px; block-size: 1px; background: currentColor; }\n.s230f-eyebrow.coral { color: var(--coral-deep); }\n.s230f-eyebrow.amber { color: var(--amber-deep); }\n.s230f-eyebrow.magenta { color: var(--magenta-deep); }\n.s230f-eyebrow.teal { color: var(--teal-deep); }\n.s230f-eyebrow.mint { color: var(--mint-deep); }\n.s230f-eyebrow.indigo { color: var(--indigo-deep); }\n.s230f-eyebrow.muted { color: var(--ink-3); }\n\n.s230f-h2 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'CASL' 0.3, 'slnt' 0;\n  font-size: clamp(2rem, 5vw, 3.8rem);\n  letter-spacing: -0.035em;\n  line-height: 1.02;\n  color: var(--ink);\n  margin-bottom: 20px;\n}\n.s230f-h2 em {\n  font-style: normal;\n  font-variation-settings: 'wght' 900, 'CASL' 0.7, 'slnt' -4;\n  background: linear-gradient(135deg, var(--coral-deep), var(--amber-deep), var(--magenta-deep));\n  background-size: 200% 200%;\n  animation: s230f-text-grad 6s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n}\n.s230f-h2.cool em {\n  background: linear-gradient(135deg, var(--teal-deep), var(--indigo-deep), var(--mint-deep));\n  background-size: 200% 200%;\n  animation: s230f-text-grad 6s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n}\n.s230f-deck {\n  font-size: clamp(15px, 1.8vw, 18px);\n  color: var(--ink-2);\n  max-inline-size: 580px;\n  line-height: 1.65;\n  margin-bottom: 48px;\n}\n.s230f-deck strong { color: var(--ink); font-weight: 600; }\n\n\/* ════════════ BIG IDEA — now with animated battery story ════════════ *\/\n.s230f-bigidea {\n  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);\n  position: relative; overflow: hidden;\n}\n.s230f-bigidea::before {\n  content: '';\n  position: absolute;\n  top: -100px; right: -100px;\n  inline-size: 500px; block-size: 500px;\n  border-radius: 50%;\n  background: radial-gradient(circle, color-mix(in oklch, var(--amber) 25%, transparent), transparent 70%);\n  pointer-events: none;\n}\n.s230f-bigidea::after {\n  content: '';\n  position: absolute;\n  bottom: -100px; left: -100px;\n  inline-size: 500px; block-size: 500px;\n  border-radius: 50%;\n  background: radial-gradient(circle, color-mix(in oklch, var(--coral) 18%, transparent), transparent 70%);\n  pointer-events: none;\n}\n.s230f-bv-grid {\n  position: relative; z-index: 2;\n  display: grid; gap: clamp(32px, 5vw, 60px);\n  max-width: 1080px; margin-inline: auto;\n}\n@media (min-width: 820px) {\n  .s230f .s230f-bv-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; }\n}\n.s230f-bigidea-text p {\n  font-size: clamp(16px, 1.9vw, 19px);\n  color: var(--ink-2);\n  line-height: 1.7;\n  margin-bottom: 12px;\n}\n.s230f-bigidea-text strong { color: var(--ink); font-weight: 600; }\n\n\/* ── BATTERY VIZ CARD ── *\/\n@property --bv-pct {\n  syntax: '\u003cinteger\u003e';\n  inherits: false;\n  initial-value: 93;\n}\n\n.s230f-bv-card {\n  position: relative;\n  background: linear-gradient(135deg, oklch(97% 0.012 80) 0%, oklch(99% 0.005 80) 100%);\n  border: 1px solid var(--line);\n  border-radius: 26px;\n  padding: clamp(28px, 4vw, 44px);\n  overflow: hidden;\n  box-shadow: 0 20px 50px oklch(0% 0 0 \/ 0.06);\n}\n.s230f-bv-card::before {\n  \/* warm halo behind sun *\/\n  content: '';\n  position: absolute;\n  top: -80px; right: -80px;\n  inline-size: 280px; block-size: 280px;\n  border-radius: 50%;\n  background: radial-gradient(circle, color-mix(in oklch, var(--amber) 30%, transparent) 0%, transparent 60%);\n  pointer-events: none;\n  animation: s230f-bv-halo 5s ease-in-out infinite;\n}\n@keyframes s230f-bv-halo {\n  0%, 100% { opacity: 0.7; transform: scale(1); }\n  50% { opacity: 1; transform: scale(1.08); }\n}\n\n\/* Sun icon in top right *\/\n.s230f-bv-sun {\n  position: absolute;\n  top: 28px; right: 32px;\n  font-size: 38px;\n  z-index: 3;\n  filter: drop-shadow(0 0 16px color-mix(in oklch, var(--amber) 70%, transparent));\n  animation: s230f-bv-sun-pulse 3s ease-in-out infinite;\n}\n@keyframes s230f-bv-sun-pulse {\n  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 14px color-mix(in oklch, var(--amber) 55%, transparent)); }\n  50% { transform: scale(1.15) rotate(20deg); filter: drop-shadow(0 0 30px color-mix(in oklch, var(--amber) 90%, transparent)); }\n}\n\n\/* Charge pulse — beam from sun toward battery *\/\n.s230f-bv-pulse {\n  position: absolute;\n  top: 70px; right: 50px;\n  inline-size: 4px; block-size: 100px;\n  background: linear-gradient(180deg, color-mix(in oklch, var(--amber) 85%, transparent) 0%, transparent 100%);\n  border-radius: 2px;\n  filter: blur(1px);\n  z-index: 2;\n  opacity: 0;\n  animation: s230f-bv-pulse-flow 2s ease-out infinite;\n}\n@keyframes s230f-bv-pulse-flow {\n  0%   { opacity: 0; transform: translateY(-12px) scaleY(0.5); }\n  25%  { opacity: 1; }\n  100% { opacity: 0; transform: translateY(50px) scaleY(1.4); }\n}\n\n\/* Animated counter — uses @property + counter() *\/\n.s230f-bv-stat {\n  display: flex; align-items: baseline;\n  gap: 18px;\n  margin-bottom: 26px;\n  position: relative; z-index: 3;\n}\n.s230f-bv-num {\n  --bv-pct: 93;\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'CASL' 0.5, 'slnt' -6;\n  font-size: clamp(4rem, 9vw, 6.5rem);\n  letter-spacing: -0.05em;\n  line-height: 0.85;\n  background: linear-gradient(135deg, var(--mint), var(--teal-deep));\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  display: inline-flex;\n  align-items: baseline;\n  counter-reset: bv-counter var(--bv-pct);\n  animation: s230f-bv-tick 6s linear infinite;\n}\n.s230f-bv-num::before { content: counter(bv-counter); }\n.s230f-bv-num::after  { content: \"%\"; font-size: 0.55em; opacity: 0.8; margin-left: 2px; font-variation-settings: 'wght' 600; }\n@keyframes s230f-bv-tick {\n  0%   { --bv-pct: 93; }\n  18%  { --bv-pct: 96; }\n  36%  { --bv-pct: 91; }\n  52%  { --bv-pct: 95; }\n  68%  { --bv-pct: 92; }\n  84%  { --bv-pct: 94; }\n  100% { --bv-pct: 93; }\n}\n\/* Fallback for older browsers that can't animate counters *\/\n@supports not (counter-reset: x var(--y)) {\n  .s230f-bv-num { animation: none; }\n  .s230f-bv-num::before { content: \"93\"; }\n}\n\n.s230f-bv-stat-lbl {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--mint-deep);\n  max-inline-size: 14ch;\n  line-height: 1.4;\n}\n\n\/* Battery bar *\/\n.s230f-bv-bar {\n  position: relative;\n  inline-size: 100%;\n  block-size: 40px;\n  background: var(--paper-3);\n  border-radius: 10px;\n  overflow: hidden;\n  margin-bottom: 16px;\n  border: 1px solid var(--line);\n  z-index: 2;\n}\n.s230f-bv-fill {\n  position: absolute;\n  top: 3px; bottom: 3px; left: 3px;\n  background: linear-gradient(90deg, var(--mint) 0%, var(--mint-deep) 70%, oklch(80% 0.13 175) 100%);\n  border-radius: 7px;\n  animation: s230f-bv-fill-pulse 6s linear infinite;\n  box-shadow: 0 0 12px color-mix(in oklch, var(--mint) 50%, transparent);\n}\n@keyframes s230f-bv-fill-pulse {\n  0%   { right: 7%; }\n  18%  { right: 4%; }\n  36%  { right: 9%; }\n  52%  { right: 5%; }\n  68%  { right: 8%; }\n  84%  { right: 6%; }\n  100% { right: 7%; }\n}\n.s230f-bv-fill::after {\n  \/* Shimmer highlight sweeping across the bar *\/\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(90deg, transparent 0%, oklch(98% 0 0 \/ 0.5) 50%, transparent 100%);\n  animation: s230f-bv-shimmer 2.4s linear infinite;\n  border-radius: 7px;\n}\n@keyframes s230f-bv-shimmer {\n  from { transform: translateX(-100%); }\n  to   { transform: translateX(100%); }\n}\n\n\/* Day markers *\/\n.s230f-bv-marks {\n  display: flex;\n  justify-content: space-between;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 10.5px;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  color: var(--ink-3);\n  position: relative;\n  z-index: 2;\n}\n.s230f-bv-marks span:first-child,\n.s230f-bv-marks span:last-child {\n  color: var(--ink-2);\n  font-weight: 700;\n}\n.s230f-bv-marks span:last-child::before {\n  content: '◆ ';\n  color: var(--mint-deep);\n}\n\n\/* ════════════ FEATURES — magnetic hover via :has() ════════════ *\/\n.s230f-features { background: var(--paper); }\n.s230f-feat-head { text-align: center; margin-bottom: 56px; }\n.s230f-feat-head .s230f-deck { margin-inline: auto; }\n.s230f-feat-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n@media (min-width: 700px) {\n  .s230f .s230f-feat-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (min-width: 1000px) {\n  .s230f .s230f-feat-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.s230f-feat {\n  background: var(--paper);\n  border: 1px solid var(--line);\n  border-radius: 22px;\n  padding: 30px 28px;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s ease;\n  isolation: isolate;\n  container-type: inline-size;\n}\n.s230f-feat::before {\n  content: '';\n  position: absolute;\n  top: -60px; right: -60px;\n  inline-size: 180px; block-size: 180px;\n  border-radius: 50%;\n  z-index: -1;\n}\n.s230f-feat.coral::before { background: radial-gradient(circle, color-mix(in oklch, var(--coral) 16%, transparent), transparent 70%); }\n.s230f-feat.amber::before { background: radial-gradient(circle, color-mix(in oklch, var(--amber) 18%, transparent), transparent 70%); }\n.s230f-feat.magenta::before { background: radial-gradient(circle, color-mix(in oklch, var(--magenta) 14%, transparent), transparent 70%); }\n.s230f-feat.teal::before { background: radial-gradient(circle, color-mix(in oklch, var(--teal) 16%, transparent), transparent 70%); }\n.s230f-feat.indigo::before { background: radial-gradient(circle, color-mix(in oklch, var(--indigo) 14%, transparent), transparent 70%); }\n.s230f-feat.mint::before { background: radial-gradient(circle, color-mix(in oklch, var(--mint) 18%, transparent), transparent 70%); }\n\n.s230f-feat:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 20px 50px oklch(0% 0 0 \/ 0.08);\n  border-color: color-mix(in oklch, var(--ink) 12%, transparent);\n}\n\n\/* MAGNETIC HOVER — siblings of hovered card tilt toward it via :has() *\/\n.s230f-feat-grid:has(.s230f-feat:nth-child(1):hover) .s230f-feat:nth-child(2) { transform: translateX(-3px) rotate(-0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(2):hover) .s230f-feat:nth-child(1) { transform: translateX(3px) rotate(0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(2):hover) .s230f-feat:nth-child(3) { transform: translateX(-3px) rotate(-0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(3):hover) .s230f-feat:nth-child(2) { transform: translateX(3px) rotate(0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(4):hover) .s230f-feat:nth-child(5) { transform: translateX(-3px) rotate(-0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(5):hover) .s230f-feat:nth-child(4) { transform: translateX(3px) rotate(0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(5):hover) .s230f-feat:nth-child(6) { transform: translateX(-3px) rotate(-0.4deg); }\n.s230f-feat-grid:has(.s230f-feat:nth-child(6):hover) .s230f-feat:nth-child(5) { transform: translateX(3px) rotate(0.4deg); }\n\n.s230f-feat-icon {\n  inline-size: 48px; block-size: 48px;\n  border-radius: 14px;\n  display: grid; place-items: center;\n  margin-bottom: 18px;\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'MONO' 1;\n  font-size: 17px;\n  color: var(--paper);\n  position: relative;\n  isolation: isolate;\n}\n.s230f-feat.coral .s230f-feat-icon { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); }\n.s230f-feat.amber .s230f-feat-icon { background: linear-gradient(135deg, var(--amber), var(--amber-deep)); }\n.s230f-feat.magenta .s230f-feat-icon { background: linear-gradient(135deg, var(--magenta), var(--magenta-deep)); }\n.s230f-feat.teal .s230f-feat-icon { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }\n.s230f-feat.indigo .s230f-feat-icon { background: linear-gradient(135deg, var(--indigo), var(--indigo-deep)); }\n.s230f-feat.mint .s230f-feat-icon { background: linear-gradient(135deg, var(--mint), var(--mint-deep)); }\n\n\/* ════════════ THEMED FEATURE ICON ANIMATIONS ════════════\n   Each feature card gets a mini-animation that demonstrates\n   what the card is about. *\/\n\n\/* CORAL (2K Resolution) — pulsing focus \/ autofocus rings *\/\n.s230f-feat.coral .s230f-feat-icon::before,\n.s230f-feat.coral .s230f-feat-icon::after {\n  content: '';\n  position: absolute;\n  inset: 20%;\n  border: 1.5px solid var(--paper);\n  border-radius: 50%;\n  opacity: 0;\n  z-index: 0;\n  animation: s230f-focus-pulse 2.6s ease-out infinite;\n  pointer-events: none;\n}\n.s230f-feat.coral .s230f-feat-icon::after { animation-delay: 1.3s; }\n@keyframes s230f-focus-pulse {\n  0%   { transform: scale(0.4); opacity: 0; }\n  20%  { opacity: 0.85; }\n  100% { transform: scale(2); opacity: 0; }\n}\n\n\/* AMBER (Solar) — rotating sun-ray pattern emanating from icon *\/\n.s230f-feat.amber .s230f-feat-icon::before {\n  content: '';\n  position: absolute;\n  inset: -60%;\n  background: conic-gradient(from 0deg,\n    transparent 0deg,   oklch(98% 0.05 90 \/ 0.45) 3deg,  transparent 6deg,\n    transparent 27deg,  oklch(98% 0.05 90 \/ 0.45) 30deg, transparent 33deg,\n    transparent 57deg,  oklch(98% 0.05 90 \/ 0.45) 60deg, transparent 63deg,\n    transparent 87deg,  oklch(98% 0.05 90 \/ 0.45) 90deg, transparent 93deg,\n    transparent 117deg, oklch(98% 0.05 90 \/ 0.45) 120deg, transparent 123deg,\n    transparent 147deg, oklch(98% 0.05 90 \/ 0.45) 150deg, transparent 153deg,\n    transparent 177deg, oklch(98% 0.05 90 \/ 0.45) 180deg, transparent 183deg,\n    transparent 207deg, oklch(98% 0.05 90 \/ 0.45) 210deg, transparent 213deg,\n    transparent 237deg, oklch(98% 0.05 90 \/ 0.45) 240deg, transparent 243deg,\n    transparent 267deg, oklch(98% 0.05 90 \/ 0.45) 270deg, transparent 273deg,\n    transparent 297deg, oklch(98% 0.05 90 \/ 0.45) 300deg, transparent 303deg,\n    transparent 327deg, oklch(98% 0.05 90 \/ 0.45) 330deg, transparent 333deg,\n    transparent 360deg);\n  mix-blend-mode: screen;\n  filter: blur(1px);\n  z-index: -1;\n  pointer-events: none;\n  animation: s230f-feat-spin 14s linear infinite;\n  border-radius: 50%;\n}\n@keyframes s230f-feat-spin { to { transform: rotate(360deg); } }\n\n\/* MAGENTA (Spotlight) — pulsing beam cone falling below icon *\/\n.s230f-feat.magenta .s230f-feat-icon::before {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  inline-size: 250%;\n  block-size: 60px;\n  background: linear-gradient(180deg, oklch(98% 0.06 90 \/ 0.7), transparent);\n  clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);\n  transform: translateX(-50%);\n  filter: blur(3px);\n  mix-blend-mode: screen;\n  opacity: 0;\n  z-index: -1;\n  pointer-events: none;\n  animation: s230f-spot-pulse 2.2s ease-in-out infinite;\n}\n@keyframes s230f-spot-pulse {\n  0%, 100% { opacity: 0; }\n  50% { opacity: 0.9; }\n}\n\n\/* TEAL (Standalone) — expanding wifi waves *\/\n.s230f-feat.teal .s230f-feat-icon::before,\n.s230f-feat.teal .s230f-feat-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1.5px solid var(--paper);\n  border-radius: 50%;\n  opacity: 0;\n  z-index: 0;\n  animation: s230f-wave-out 2.4s ease-out infinite;\n  pointer-events: none;\n}\n.s230f-feat.teal .s230f-feat-icon::after { animation-delay: 1.2s; }\n@keyframes s230f-wave-out {\n  0%   { transform: scale(0.3); opacity: 0; }\n  18%  { opacity: 0.95; }\n  100% { transform: scale(2.3); opacity: 0; }\n}\n\n\/* INDIGO (AI Detection) — scanning line moving up\/down *\/\n.s230f-feat.indigo .s230f-feat-icon::before {\n  content: '';\n  position: absolute;\n  inset-inline: 10%;\n  block-size: 2px;\n  background: linear-gradient(90deg, transparent, var(--paper), transparent);\n  box-shadow: 0 0 8px var(--paper);\n  top: 18%;\n  z-index: 0;\n  pointer-events: none;\n  animation: s230f-ai-scan 2s ease-in-out infinite;\n}\n@keyframes s230f-ai-scan {\n  0%, 100% { top: 18%; }\n  50% { top: 82%; }\n}\n\n\/* MINT (IP67) — falling rain drops over icon *\/\n.s230f-feat.mint .s230f-feat-icon::before,\n.s230f-feat.mint .s230f-feat-icon::after {\n  content: '';\n  position: absolute;\n  top: -10%;\n  inline-size: 2px;\n  block-size: 8px;\n  background: oklch(92% 0.06 220 \/ 0.85);\n  border-radius: 1px;\n  z-index: 0;\n  pointer-events: none;\n  animation: s230f-drop-fall 1.2s linear infinite;\n}\n.s230f-feat.mint .s230f-feat-icon::before { left: 32%; animation-delay: 0s; }\n.s230f-feat.mint .s230f-feat-icon::after  { left: 64%; animation-delay: 0.5s; }\n@keyframes s230f-drop-fall {\n  0%   { top: -20%; opacity: 0; }\n  15%  { opacity: 1; }\n  85%  { opacity: 1; }\n  100% { top: 110%; opacity: 0; }\n}\n.s230f-feat-eyebrow {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 10.5px; font-weight: 700;\n  letter-spacing: 0.16em; text-transform: uppercase;\n  margin-bottom: 8px;\n}\n.s230f-feat.coral .s230f-feat-eyebrow { color: var(--coral-deep); }\n.s230f-feat.amber .s230f-feat-eyebrow { color: var(--amber-deep); }\n.s230f-feat.magenta .s230f-feat-eyebrow { color: var(--magenta-deep); }\n.s230f-feat.teal .s230f-feat-eyebrow { color: var(--teal-deep); }\n.s230f-feat.indigo .s230f-feat-eyebrow { color: var(--indigo-deep); }\n.s230f-feat.mint .s230f-feat-eyebrow { color: var(--mint-deep); }\n.s230f-feat h3 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.3;\n  font-size: 22px;\n  letter-spacing: -0.015em;\n  line-height: 1.2;\n  color: var(--ink);\n  margin-bottom: 10px;\n}\n.s230f-feat p {\n  font-size: 14.5px;\n  color: var(--ink-2);\n  line-height: 1.7;\n}\n\n\/* ════════════ AFTER DARK ════════════ *\/\n.s230f-afterdark {\n  background: var(--night-deep);\n  color: var(--paper);\n  position: relative; overflow: hidden; isolation: isolate;\n}\n.s230f-afterdark::before {\n  content: '';\n  position: absolute; inset: 0;\n  background:\n    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in oklch, var(--amber) 38%, transparent), transparent 70%),\n    radial-gradient(ellipse 80% 60% at 50% 110%, color-mix(in oklch, var(--magenta) 25%, transparent), transparent 70%);\n  z-index: -1; pointer-events: none;\n}\n.s230f-afterdark::after {\n  content: '';\n  position: absolute; inset: 0;\n  background-image:\n    radial-gradient(circle at 8% 18%, oklch(98% 0 0 \/ 0.9) 0 1.5px, transparent 1.5px),\n    radial-gradient(circle at 24% 12%, oklch(98% 0 0 \/ 0.6) 0 1px, transparent 1px),\n    radial-gradient(circle at 42% 8%, oklch(98% 0 0 \/ 0.8) 0 1.5px, transparent 1.5px),\n    radial-gradient(circle at 62% 16%, oklch(98% 0 0 \/ 0.5) 0 1px, transparent 1px),\n    radial-gradient(circle at 78% 22%, oklch(98% 0 0 \/ 0.7) 0 1.5px, transparent 1.5px),\n    radial-gradient(circle at 18% 32%, oklch(98% 0 0 \/ 0.55) 0 1px, transparent 1px),\n    radial-gradient(circle at 58% 28%, oklch(98% 0 0 \/ 0.8) 0 1.5px, transparent 1.5px),\n    radial-gradient(circle at 88% 38%, oklch(98% 0 0 \/ 0.6) 0 1px, transparent 1px),\n    radial-gradient(circle at 32% 44%, oklch(98% 0 0 \/ 0.5) 0 1px, transparent 1px);\n  z-index: -1; pointer-events: none;\n}\n.s230f-afterdark-inner {\n  display: grid; gap: clamp(40px, 6vw, 72px); align-items: center;\n}\n@media (min-width: 900px) {\n  .s230f .s230f-afterdark-inner { grid-template-columns: 1.1fr 1fr; }\n}\n.s230f-afterdark .s230f-eyebrow { color: var(--amber); }\n.s230f-afterdark h2 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'CASL' 0.3, 'slnt' 0;\n  font-size: clamp(2.4rem, 6vw, 4.6rem);\n  letter-spacing: -0.035em;\n  line-height: 1.04;\n  margin-bottom: 22px;\n}\n.s230f-afterdark h2 em {\n  font-style: normal;\n  font-variation-settings: 'wght' 900, 'CASL' 0.7, 'slnt' -6;\n  background: linear-gradient(135deg, var(--amber), oklch(85% 0.14 80), var(--coral));\n  background-size: 200% 200%;\n  animation: s230f-text-grad 5s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n}\n.s230f-afterdark p {\n  font-size: clamp(15.5px, 1.8vw, 17.5px);\n  color: oklch(88% 0.01 80);\n  line-height: 1.7;\n  max-inline-size: 52ch;\n  margin-bottom: 22px;\n}\n.s230f-afterdark p strong { color: var(--paper); font-weight: 600; }\n.s230f-afterdark-pills {\n  display: flex; flex-wrap: wrap; gap: 8px;\n}\n.s230f-afterdark-pill {\n  background: color-mix(in oklch, var(--amber) 18%, transparent);\n  border: 1px solid color-mix(in oklch, var(--amber) 35%, transparent);\n  color: color-mix(in oklch, var(--amber) 80%, white);\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  padding: 7px 14px;\n  border-radius: 999px;\n}\n\n\/* SPOTLIGHT VIS with MASK-IMAGE animated reveal *\/\n.s230f-spot-vis {\n  position: relative;\n  aspect-ratio: 4\/5;\n  border-radius: 22px;\n  background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);\n  border: 1px solid color-mix(in oklch, var(--amber) 22%, transparent);\n  overflow: hidden;\n  --s230f-angle: 0deg;\n  \/* Conic gradient mask — scans across product *\/\n  mask: conic-gradient(from var(--s230f-angle),\n    black 0deg, black 120deg,\n    color-mix(in oklch, black 60%, transparent) 200deg,\n    black 320deg, black 360deg);\n  -webkit-mask: conic-gradient(from var(--s230f-angle),\n    black 0deg, black 120deg,\n    color-mix(in oklch, black 60%, transparent) 200deg,\n    black 320deg, black 360deg);\n  animation: s230f-mask-scan 14s linear infinite;\n}\n.s230f-spot-cam-wrap {\n  position: absolute;\n  top: 8%; left: 50%;\n  transform: translateX(-50%);\n  z-index: 5;\n}\n.s230f-spot-cam-mount {\n  inline-size: 6px; block-size: 18px;\n  background: linear-gradient(180deg, oklch(58% 0.02 250), oklch(38% 0.02 250));\n  margin-inline: auto;\n}\n.s230f-spot-cam-body {\n  position: relative;\n  inline-size: 80px; block-size: 60px;\n  background: linear-gradient(180deg, oklch(40% 0.02 250), oklch(25% 0.02 250));\n  border-radius: 22% 22% 28% 28% \/ 26% 26% 32% 32%;\n  border: 1px solid oklch(48% 0.03 250);\n}\n.s230f-spot-cam-body::after {\n  content: '';\n  position: absolute;\n  top: 30%; left: 50%;\n  inline-size: 32px; block-size: 32px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 35%, oklch(60% 0.05 70), oklch(28% 0.02 250) 70%);\n  border: 2px solid oklch(50% 0.03 250);\n  transform: translateX(-50%);\n  box-shadow: 0 0 12px color-mix(in oklch, var(--amber) 40%, transparent);\n}\n.s230f-spot-beam {\n  position: absolute;\n  top: 16%; left: 50%;\n  inline-size: 80%; block-size: 80%;\n  transform: translateX(-50%);\n  background: linear-gradient(180deg,\n    color-mix(in oklch, var(--amber) 80%, transparent) 0%,\n    color-mix(in oklch, var(--amber) 45%, transparent) 35%,\n    color-mix(in oklch, var(--amber) 15%, transparent) 75%,\n    transparent 100%);\n  clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);\n  filter: blur(5px);\n  mix-blend-mode: screen;\n  z-index: 3;\n  animation: s230f-bloom 2.4s var(--ease-bloom) both;\n}\n@supports (animation-timeline: view()) {\n  .s230f .s230f-spot-beam {\n    animation: s230f-bloom 2.4s var(--ease-bloom) both;\n    animation-timeline: view();\n    animation-range: entry 5% cover 40%;\n  }\n}\n.s230f-spot-pool {\n  position: absolute;\n  bottom: 7%; left: 50%;\n  inline-size: 80%; block-size: 9%;\n  transform: translateX(-50%);\n  background: radial-gradient(ellipse, color-mix(in oklch, var(--amber) 70%, transparent), transparent 80%);\n  filter: blur(10px);\n  z-index: 3;\n}\n.s230f-spot-label {\n  position: absolute;\n  bottom: 16px; left: 16px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 10.5px;\n  font-weight: 700;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--amber);\n  z-index: 4;\n}\n\n\/* ═══ MOTION DETECTION DEMO ═══\n   A silhouette walks through the scene, the camera detects them,\n   focus brackets follow the figure, and \"MOTION DETECTED\" flashes. *\/\n.s230f-spot-figure {\n  position: absolute;\n  bottom: 14%;\n  left: -10%;\n  inline-size: 18px;\n  block-size: 44px;\n  background: linear-gradient(180deg, oklch(15% 0.02 250) 0%, oklch(20% 0.02 250) 60%, oklch(10% 0.02 250) 100%);\n  border-radius: 6px 6px 0 0;\n  z-index: 4;\n  animation: s230f-figure-walk 10s ease-in-out infinite;\n  filter: drop-shadow(0 4px 6px oklch(0% 0 0 \/ 0.4));\n}\n.s230f-spot-figure::before {\n  \/* head *\/\n  content: '';\n  position: absolute;\n  top: -12px; left: 50%;\n  inline-size: 14px; block-size: 14px;\n  background: oklch(20% 0.02 250);\n  border-radius: 50%;\n  transform: translateX(-50%);\n}\n.s230f-spot-figure::after {\n  \/* legs (simple V shape via clip-path) *\/\n  content: '';\n  position: absolute;\n  bottom: -10px; left: 50%;\n  inline-size: 18px; block-size: 12px;\n  background: oklch(15% 0.02 250);\n  clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 35% 100%);\n  transform: translateX(-50%);\n}\n@keyframes s230f-figure-walk {\n  0%, 4% { left: -10%; opacity: 0; }\n  8% { opacity: 1; }\n  18% { left: 18%; }\n  35% { left: 38%; }\n  55% { left: 58%; }\n  72% { left: 78%; }\n  88% { left: 96%; opacity: 1; }\n  92% { opacity: 0; left: 110%; }\n  100% { left: 110%; opacity: 0; }\n}\n\n\/* Detection box tracking the figure with corner brackets *\/\n.s230f-spot-detect {\n  position: absolute;\n  bottom: 13%;\n  left: -10%;\n  inline-size: 36px;\n  block-size: 70px;\n  z-index: 5;\n  animation: s230f-detect-follow 10s ease-in-out infinite;\n  opacity: 0;\n}\n.s230f-spot-detect::before,\n.s230f-spot-detect::after {\n  content: '';\n  position: absolute;\n  inline-size: 12px;\n  block-size: 12px;\n  border: 2px solid var(--amber);\n  filter: drop-shadow(0 0 4px color-mix(in oklch, var(--amber) 60%, transparent));\n}\n\/* Top-left + bottom-right corners *\/\n.s230f-spot-detect::before {\n  top: -3px; left: -3px;\n  border-right: none;\n  border-bottom: none;\n}\n.s230f-spot-detect::after {\n  bottom: -3px; right: -3px;\n  border-left: none;\n  border-top: none;\n}\n\/* Inner box with the other two corners *\/\n.s230f-spot-detect-inner {\n  position: absolute;\n  inset: 0;\n}\n.s230f-spot-detect-inner::before,\n.s230f-spot-detect-inner::after {\n  content: '';\n  position: absolute;\n  inline-size: 12px;\n  block-size: 12px;\n  border: 2px solid var(--amber);\n  filter: drop-shadow(0 0 4px color-mix(in oklch, var(--amber) 60%, transparent));\n}\n.s230f-spot-detect-inner::before {\n  top: -3px; right: -3px;\n  border-left: none;\n  border-bottom: none;\n}\n.s230f-spot-detect-inner::after {\n  bottom: -3px; left: -3px;\n  border-right: none;\n  border-top: none;\n}\n@keyframes s230f-detect-follow {\n  0%, 6% { left: -10%; opacity: 0; }\n  10% { opacity: 1; }\n  18% { left: 13%; }\n  35% { left: 33%; }\n  55% { left: 53%; }\n  72% { left: 73%; }\n  88% { left: 91%; opacity: 1; }\n  92%, 100% { opacity: 0; left: 105%; }\n}\n\n\/* \"MOTION DETECTED\" alert badge — flashes during walk *\/\n.s230f-spot-alert {\n  position: absolute;\n  top: 16px; right: 16px;\n  background: linear-gradient(135deg, oklch(55% 0.22 25), oklch(45% 0.22 20));\n  color: oklch(98% 0 0);\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 9px;\n  font-weight: 800;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  padding: 6px 10px;\n  border-radius: 4px;\n  z-index: 6;\n  animation: s230f-alert-flash 10s ease-in-out infinite;\n  opacity: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.s230f-spot-alert::before {\n  content: '';\n  inline-size: 6px; block-size: 6px;\n  border-radius: 50%;\n  background: oklch(95% 0.03 25);\n  box-shadow: 0 0 6px oklch(95% 0.03 25);\n  animation: s230f-alert-blink 0.4s steps(2, end) infinite;\n}\n@keyframes s230f-alert-flash {\n  0%, 6% { opacity: 0; transform: translateX(8px); }\n  10%, 88% { opacity: 1; transform: translateX(0); }\n  92%, 100% { opacity: 0; transform: translateX(8px); }\n}\n@keyframes s230f-alert-blink {\n  0%, 50% { opacity: 1; }\n  50.01%, 100% { opacity: 0.2; }\n}\n\n\/* Security cam HUD — corner brackets in the viewport *\/\n.s230f-spot-hud {\n  position: absolute;\n  inset: 12px;\n  pointer-events: none;\n  z-index: 4;\n}\n.s230f-spot-hud::before,\n.s230f-spot-hud::after,\n.s230f-spot-hud \u003e span::before,\n.s230f-spot-hud \u003e span::after {\n  content: '';\n  position: absolute;\n  inline-size: 16px;\n  block-size: 16px;\n  border: 1.5px solid color-mix(in oklch, var(--amber) 50%, transparent);\n}\n.s230f-spot-hud::before { top: 0; left: 0; border-right: none; border-bottom: none; }\n.s230f-spot-hud::after { top: 0; right: 0; border-left: none; border-bottom: none; }\n.s230f-spot-hud \u003e span { position: absolute; inset: 0; }\n.s230f-spot-hud \u003e span::before { bottom: 0; left: 0; border-right: none; border-top: none; }\n.s230f-spot-hud \u003e span::after { bottom: 0; right: 0; border-left: none; border-top: none; }\n\n\/* REC indicator — red dot pulse top-left of viewport *\/\n.s230f-spot-rec {\n  position: absolute;\n  top: 16px; left: 16px;\n  z-index: 6;\n  display: flex; align-items: center; gap: 6px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: oklch(95% 0.05 25);\n}\n.s230f-spot-rec::before {\n  content: '';\n  inline-size: 7px; block-size: 7px;\n  border-radius: 50%;\n  background: oklch(58% 0.20 25);\n  box-shadow: 0 0 8px oklch(58% 0.20 25);\n  animation: s230f-rec-blink 1.4s ease-in-out infinite;\n}\n@keyframes s230f-rec-blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n\/* ════════════ $0 SECTION ════════════ *\/\n.s230f-zero {\n  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);\n  position: relative; overflow: hidden;\n}\n.s230f-zero-grid {\n  display: grid; gap: clamp(32px, 5vw, 56px);\n}\n@media (min-width: 800px) {\n  .s230f .s230f-zero-grid { grid-template-columns: 1fr 1fr; align-items: center; }\n}\n.s230f-zero-text h2 { margin-bottom: 18px; }\n.s230f-zero-text p {\n  font-size: 16px; color: var(--ink-2); line-height: 1.7; margin-bottom: 14px;\n}\n.s230f-zero-text strong { color: var(--ink); font-weight: 600; }\n.s230f-zero-card {\n  background: linear-gradient(135deg, var(--ink), var(--indigo-deep));\n  border-radius: 28px;\n  padding: 48px 36px;\n  color: var(--paper);\n  position: relative; overflow: hidden;\n  text-align: center;\n  box-shadow: 0 20px 50px color-mix(in oklch, var(--indigo-deep) 30%, transparent);\n}\n.s230f-zero-card::before {\n  content: '';\n  position: absolute; inset: -50%;\n  background: conic-gradient(from var(--s230f-angle),\n    transparent 0deg,\n    color-mix(in oklch, var(--mint) 35%, transparent) 60deg,\n    transparent 120deg,\n    color-mix(in oklch, var(--teal) 25%, transparent) 200deg,\n    transparent 280deg);\n  animation: s230f-halo-spin 18s linear infinite;\n  pointer-events: none;\n  filter: blur(40px);\n  z-index: 0;\n}\n.s230f-zero-num {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 900, 'CASL' 0.6, 'slnt' -8;\n  font-size: clamp(6rem, 18vw, 12rem);\n  letter-spacing: -0.06em;\n  line-height: 0.9;\n  background: linear-gradient(135deg, var(--mint), var(--teal), oklch(85% 0.14 195));\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n  position: relative; z-index: 2;\n}\n.s230f-zero-lbl {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--mint);\n  margin-top: 4px;\n  position: relative; z-index: 2;\n}\n.s230f-zero-sub {\n  font-size: 14px;\n  color: oklch(85% 0.01 80);\n  margin-top: 18px;\n  position: relative; z-index: 2;\n}\n\n\/* ════════════ SPECS ════════════ *\/\n.s230f-specs-section { background: var(--paper); }\n.s230f-specs-head {\n  margin-bottom: 40px;\n  display: flex; justify-content: space-between; align-items: end;\n  flex-wrap: wrap; gap: 16px;\n}\n.s230f-spec-table {\n  inline-size: 100%;\n  border-collapse: collapse;\n  background: var(--paper);\n  border-radius: 18px;\n  overflow: hidden;\n  border: 1px solid var(--line);\n}\n.s230f-spec-table tr {\n  border-bottom: 1px solid var(--line-soft);\n  transition: background 0.2s ease;\n}\n.s230f-spec-table tr:last-child { border-bottom: none; }\n.s230f-spec-table tr:has(td:hover) { background: var(--paper-2); }\n.s230f-spec-table td {\n  padding: 14px 22px; font-size: 14px; vertical-align: top;\n}\n.s230f-spec-table td:first-child {\n  color: var(--ink-3); inline-size: 40%;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n.s230f-spec-table td:last-child {\n  color: var(--ink); font-weight: 500;\n}\n\n\/* ════════════ IN THE BOX ════════════ *\/\n.s230f-inbox {\n  background:\n    linear-gradient(135deg,\n      color-mix(in oklch, var(--coral) 6%, var(--paper)) 0%,\n      color-mix(in oklch, var(--amber) 6%, var(--paper)) 35%,\n      color-mix(in oklch, var(--magenta) 5%, var(--paper)) 70%,\n      color-mix(in oklch, var(--indigo) 5%, var(--paper)) 100%);\n  background-size: 200% 200%;\n  animation: s230f-text-grad 18s ease infinite;\n  border-block: 1px solid var(--line-soft);\n}\n.s230f-inbox-head { text-align: center; margin-bottom: 40px; }\n.s230f-inbox-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));\n  gap: 14px;\n  max-width: 920px;\n  margin-inline: auto;\n}\n.s230f-inbox-item {\n  background: color-mix(in oklch, var(--paper) 80%, transparent);\n  backdrop-filter: blur(12px);\n  border: 1px solid color-mix(in oklch, var(--paper) 60%, transparent);\n  border-radius: 18px;\n  padding: 24px 22px;\n  transition: transform 0.4s var(--ease-spring);\n}\n.s230f-inbox-item:hover { transform: translateY(-3px); }\n.s230f-inbox-num {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px; font-weight: 700;\n  letter-spacing: 0.16em;\n  color: var(--coral-deep);\n  margin-bottom: 10px;\n}\n.s230f-inbox-name {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.3;\n  font-size: 16px;\n  color: var(--ink);\n  margin-bottom: 3px;\n  letter-spacing: -0.01em;\n}\n.s230f-inbox-note { font-size: 12.5px; color: var(--ink-3); }\n\n\/* ════════════ TRUST ════════════ *\/\n.s230f-trust { background: var(--paper); }\n.s230f-trust-head { text-align: center; margin-bottom: 40px; }\n.s230f-trust-grid {\n  display: grid;\n  gap: 14px;\n  max-width: 920px;\n  margin-inline: auto;\n}\n@media (min-width: 600px) {\n  .s230f .s230f-trust-grid {\n    grid-template-columns: repeat(2, 1fr);\n    grid-template-rows: auto auto auto 1fr;\n  }\n  .s230f .s230f-trust-card {\n    grid-row: span 4;\n    display: grid;\n    grid-template-rows: subgrid;\n    gap: 0;\n  }\n}\n.s230f-trust-card {\n  border-radius: 20px;\n  padding: 28px 26px;\n  border: 1px solid;\n  position: relative;\n  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s ease;\n}\n.s230f-trust-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 16px 40px oklch(0% 0 0 \/ 0.06);\n}\n.s230f-trust-card.coral { background: color-mix(in oklch, var(--coral) 10%, var(--paper)); border-color: color-mix(in oklch, var(--coral) 22%, transparent); }\n.s230f-trust-card.amber { background: color-mix(in oklch, var(--amber) 12%, var(--paper)); border-color: color-mix(in oklch, var(--amber) 25%, transparent); }\n.s230f-trust-card.teal { background: color-mix(in oklch, var(--teal) 10%, var(--paper)); border-color: color-mix(in oklch, var(--teal) 22%, transparent); }\n.s230f-trust-card.mint { background: color-mix(in oklch, var(--mint) 14%, var(--paper)); border-color: color-mix(in oklch, var(--mint) 25%, transparent); }\n.s230f-trust-num {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px; font-weight: 700;\n  letter-spacing: 0.18em;\n  padding-bottom: 12px;\n}\n.s230f-trust-card.coral .s230f-trust-num { color: var(--coral-deep); }\n.s230f-trust-card.amber .s230f-trust-num { color: var(--amber-deep); }\n.s230f-trust-card.teal .s230f-trust-num { color: var(--teal-deep); }\n.s230f-trust-card.mint .s230f-trust-num { color: var(--mint-deep); }\n.s230f-trust-card h3 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.3;\n  font-size: 17px;\n  letter-spacing: -0.015em;\n  color: var(--ink);\n  padding-bottom: 10px;\n}\n.s230f-trust-card p {\n  font-size: 14px;\n  color: var(--ink-2);\n  line-height: 1.65;\n}\n\n\/* ════════════ SHIPPING ════════════ *\/\n.s230f-ship {\n  background: var(--paper-2);\n  border-block: 1px solid var(--line-soft);\n}\n.s230f-ship-head { text-align: center; margin-bottom: 40px; }\n.s230f-ship-grid {\n  display: grid;\n  gap: 14px;\n  max-width: 920px;\n  margin-inline: auto;\n  grid-template-columns: 1fr;\n}\n@media (min-width: 700px) { .s230f .s230f-ship-grid { grid-template-columns: 1fr 1fr; } }\n.s230f-ship-card {\n  background: var(--paper);\n  border: 1px solid var(--line);\n  border-radius: 20px;\n  padding: 28px 26px;\n  transition: transform 0.4s var(--ease-spring);\n}\n.s230f-ship-card:hover { transform: translateY(-3px); }\n.s230f-ship-card h4 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.3;\n  font-size: 16px;\n  color: var(--ink);\n  margin-bottom: 12px;\n}\n.s230f-ship-card p {\n  font-size: 14px;\n  color: var(--ink-2);\n  line-height: 1.7;\n  margin-bottom: 10px;\n}\n.s230f-ship-card p:last-child { margin-bottom: 0; }\n.s230f-ship-card strong { color: var(--ink); font-weight: 600; }\n.s230f-ship-coral { color: var(--coral-deep); font-weight: 700; }\n.s230f-ship-mint { color: var(--mint-deep); font-weight: 700; }\n.s230f-ship-amber { color: var(--amber-deep); font-weight: 700; }\n\n\/* ════════════ FAQ ════════════ *\/\n.s230f-faq { background: var(--paper); }\n.s230f-faq-head { text-align: center; margin-bottom: 40px; }\n.s230f-faq-list { max-width: 760px; margin-inline: auto; }\n.s230f-faq-item {\n  padding-block: 24px;\n  border-bottom: 1px solid var(--line);\n}\n.s230f-faq-item:last-child { border-bottom: none; }\n.s230f-faq-q {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.3;\n  font-size: 17px;\n  letter-spacing: -0.015em;\n  color: var(--ink);\n  margin-bottom: 10px;\n  display: flex; gap: 12px; align-items: flex-start;\n}\n.s230f-faq-q-tag {\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--paper);\n  background: linear-gradient(135deg, var(--coral-deep), var(--amber-deep));\n  padding: 3px 9px;\n  border-radius: 6px;\n  flex-shrink: 0;\n  margin-top: 4px;\n}\n.s230f-faq-a {\n  font-size: 14.5px;\n  color: var(--ink-2);\n  line-height: 1.7;\n  padding-inline-start: 38px;\n}\n.s230f-faq-a strong { color: var(--ink); font-weight: 600; }\n\n\/* ════════════ CTA ════════════ *\/\n.s230f-cta {\n  padding-block: clamp(80px, 14vh, 140px);\n  text-align: center;\n  color: var(--paper);\n  position: relative; overflow: hidden; isolation: isolate;\n  background:\n    radial-gradient(ellipse 60% 50% at 20% 100%, color-mix(in oklch, var(--coral) 45%, transparent) 0%, transparent 60%),\n    radial-gradient(ellipse 60% 40% at 80% 0%, color-mix(in oklch, var(--amber) 40%, transparent) 0%, transparent 60%),\n    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in oklch, var(--magenta) 30%, transparent) 0%, transparent 70%),\n    linear-gradient(135deg, var(--ink) 0%, var(--indigo-deep) 50%, var(--magenta-deep) 100%);\n  background-size: 200% 200%;\n  animation: s230f-text-grad 18s ease infinite;\n}\n.s230f-cta-inner {\n  position: relative; z-index: 2;\n  max-inline-size: 720px;\n  margin-inline: auto;\n}\n.s230f-cta h2 {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 800, 'CASL' 0.4, 'slnt' 0;\n  font-size: clamp(2.8rem, 7vw, 5rem);\n  letter-spacing: -0.04em;\n  line-height: 1;\n  margin-bottom: 18px;\n}\n.s230f-cta h2 em {\n  font-style: normal;\n  font-variation-settings: 'wght' 900, 'CASL' 0.8, 'slnt' -8;\n  background: linear-gradient(135deg, var(--amber), var(--coral), var(--magenta), var(--amber));\n  background-size: 300% 300%;\n  animation: s230f-text-grad 5s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n}\n.s230f-cta p {\n  font-size: clamp(15px, 1.7vw, 17px);\n  color: oklch(88% 0.01 80);\n  line-height: 1.7;\n  margin-bottom: 30px;\n}\n.s230f-cta p strong { color: var(--paper); font-weight: 600; }\n.s230f-cta-pills {\n  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;\n}\n.s230f-cta-pill {\n  background: color-mix(in oklch, var(--paper) 10%, transparent);\n  border: 1px solid color-mix(in oklch, var(--paper) 22%, transparent);\n  color: var(--paper);\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11.5px; font-weight: 600;\n  letter-spacing: 0.08em;\n  padding: 8px 14px;\n  border-radius: 999px;\n  backdrop-filter: blur(8px);\n  transition: background 0.2s ease, border-color 0.2s ease;\n}\n.s230f-cta-pill:hover {\n  background: color-mix(in oklch, var(--amber) 25%, transparent);\n  border-color: color-mix(in oklch, var(--amber) 50%, transparent);\n}\n\n\/* ════════════ FOOTER ════════════ *\/\n.s230f-footer {\n  background: oklch(8% 0.04 270);\n  color: oklch(82% 0.01 80);\n  padding-block: 40px;\n  text-align: center;\n  position: relative;\n}\n.s230f-footer::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0; height: 2px;\n  background: linear-gradient(90deg, var(--coral-deep), var(--amber-deep), var(--magenta-deep), var(--teal-deep), var(--coral-deep));\n  background-size: 200% 100%;\n  animation: s230f-shimmer 6s linear infinite;\n}\n.s230f-footer-brand {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 700, 'CASL' 0.4;\n  font-size: 17px;\n  color: var(--paper);\n  letter-spacing: -0.01em;\n  margin-bottom: 8px;\n}\n.s230f-footer-tag {\n  font-family: 'Sora', sans-serif;\n  font-variation-settings: 'wght' 500, 'CASL' 0.8, 'slnt' -6;\n  font-size: 14px;\n  background: linear-gradient(135deg, var(--amber), var(--coral), var(--magenta));\n  background-size: 200% 200%;\n  animation: s230f-text-grad 6s ease infinite;\n  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n  margin-bottom: 18px;\n}\n.s230f-footer p {\n  font-size: 13px;\n  color: oklch(85% 0.01 80);\n  line-height: 1.7;\n  max-inline-size: 760px;\n  margin-inline: auto;\n  margin-bottom: 6px;\n}\n.s230f-footer-divider {\n  margin-block: 20px;\n  margin-inline: auto;\n  inline-size: 60%;\n  max-inline-size: 400px;\n  block-size: 1px;\n  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--amber) 50%, transparent), transparent);\n}\n.s230f-footer-legal {\n  font-size: 12px;\n  color: oklch(80% 0.01 80);\n  line-height: 1.7;\n  max-inline-size: 780px;\n  margin-inline: auto;\n}\n.s230f-footer-legal + .s230f-footer-legal { margin-top: 8px; }\n\u003c\/style\u003e\n\n\u003c!-- Inline SVG filter — referenced from CSS for film grain texture --\u003e\n\u003csvg width=\"0\" height=\"0\" style=\"position:absolute;pointer-events:none\" aria-hidden=\"true\"\u003e\n  \u003cfilter id=\"s230f-grain-filter\"\u003e\n    \u003cfeturbulence type=\"fractalNoise\" basefrequency=\"0.85\" numoctaves=\"2\" stitchtiles=\"stitch\"\u003e\u003c\/feturbulence\u003e\n    \u003cfecolormatrix values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0\"\u003e\u003c\/fecolormatrix\u003e\n    \u003cfecomposite in2=\"SourceGraphic\" operator=\"in\"\u003e\u003c\/fecomposite\u003e\n  \u003c\/filter\u003e\n\u003c\/svg\u003e\n\n\u003cdiv class=\"s230f\"\u003e\n\n  \u003c!-- NAV --\u003e\n  \u003cnav class=\"s230f-nav\"\u003e\n    \u003cdiv class=\"s230f-container s230f-nav-inner\"\u003e\n      \u003cdiv class=\"s230f-logo\"\u003eCam\u003cspan\u003eGuard\u003c\/span\u003e Australia\u003c\/div\u003e\n      \u003cspan class=\"s230f-nav-status\"\u003e\n        \u003cspan class=\"s230f-nav-dot\"\u003e\u003c\/span\u003e\n        SoloCam S230 · 2K · Solar\n      \u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/nav\u003e\n\n  \u003c!-- ═══ HERO — driven by ONE master clock ═══ --\u003e\n  \u003csection class=\"s230f-hero\"\u003e\n    \u003cdiv class=\"s230f-stage\"\u003e\n      \u003c!-- Sky layers — opacities derived from master clock --\u003e\n      \u003cdiv class=\"s230f-sky s230f-sky-dawn\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-sky s230f-sky-day\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-sky s230f-sky-dusk\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-sky s230f-sky-night\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Procedural starfield: ONE element, 80+ stars via box-shadow --\u003e\n      \u003cdiv class=\"s230f-starfield\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Aurora — peaks at clock 0.78 (late night) --\u003e\n      \u003cdiv class=\"s230f-aurora-2\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-aurora\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Sun (position + opacity from master clock) --\u003e\n      \u003cdiv class=\"s230f-sun\"\u003e\u003c\/div\u003e\n\n      \u003c!-- God rays — radial light beams emanating from sun, peak at midday --\u003e\n      \u003cdiv class=\"s230f-godrays\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Moon (opposite phase, from master clock) --\u003e\n      \u003cdiv class=\"s230f-moon\"\u003e\n        \u003cdiv class=\"s230f-crater\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-crater\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-crater\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Lens flare ghosts: positions on the line from sun through screen center --\u003e\n      \u003cdiv class=\"s230f-flare s230f-flare-1\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-flare s230f-flare-2\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-flare s230f-flare-3\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-flare s230f-flare-4\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-flare s230f-flare-5\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Clouds --\u003e\n      \u003cdiv class=\"s230f-cloud s230f-c1\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-cloud s230f-c2\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-cloud s230f-c3\"\u003e\u003c\/div\u003e\n\n      \u003c!-- WEATHER LAYERS — all driven by master clock derived values --\u003e\n      \u003c!-- Storm phase: dark clouds + rain + lightning peak at clock 0.42 --\u003e\n      \u003cdiv class=\"s230f-storm-clouds\"\u003e\u003c\/div\u003e\n      \u003c!-- Individual billowing storm cloud masses for proper thunderstorm look --\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc1\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc2\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc3\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc4\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc5\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc6\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-storm-cloud s230f-sc7\"\u003e\u003c\/div\u003e\n      \u003cdiv class=\"s230f-rain\"\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 3%; --d: 0s; --s: 0.65s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 8%; --d: 0.32s; --s: 0.78s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 13%; --d: 0.55s; --s: 0.6s; --len: 24px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 17%; --d: 0.12s; --s: 0.82s; --len: 16px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 22%; --d: 0.48s; --s: 0.7s; --len: 20px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 27%; --d: 0.18s; --s: 0.74s; --len: 26px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 31%; --d: 0.62s; --s: 0.66s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 36%; --d: 0.05s; --s: 0.85s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 41%; --d: 0.42s; --s: 0.68s; --len: 16px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 45%; --d: 0.25s; --s: 0.76s; --len: 24px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 49%; --d: 0.55s; --s: 0.62s; --len: 20px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 53%; --d: 0.08s; --s: 0.8s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 58%; --d: 0.38s; --s: 0.72s; --len: 26px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 62%; --d: 0.22s; --s: 0.66s; --len: 16px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 67%; --d: 0.5s; --s: 0.78s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 71%; --d: 0.15s; --s: 0.7s; --len: 20px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 75%; --d: 0.45s; --s: 0.64s; --len: 24px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 80%; --d: 0.28s; --s: 0.82s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 84%; --d: 0.58s; --s: 0.68s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 88%; --d: 0.1s; --s: 0.76s; --len: 16px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 93%; --d: 0.35s; --s: 0.72s; --len: 26px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 97%; --d: 0.52s; --s: 0.66s; --len: 20px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 6%; --d: 0.4s; --s: 0.74s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 19%; --d: 0.3s; --s: 0.6s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 34%; --d: 0.6s; --s: 0.8s; --len: 16px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 51%; --d: 0.2s; --s: 0.7s; --len: 24px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 64%; --d: 0.55s; --s: 0.64s; --len: 18px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 77%; --d: 0.05s; --s: 0.76s; --len: 22px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 90%; --d: 0.45s; --s: 0.68s; --len: 20px;\"\u003e\u003c\/span\u003e\n        \u003cspan class=\"s230f-drop\" style=\"--x: 11%; --d: 0.6s; --s: 0.72s; --len: 24px;\"\u003e\u003c\/span\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-lightning\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Fog — peaks at dawn (0) and dusk (0.55) --\u003e\n      \u003cdiv class=\"s230f-fog\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Bird flying along an SVG path --\u003e\n      \u003cdiv class=\"s230f-bird\"\u003e𓅪\u003c\/div\u003e\n\n      \u003c!-- Tree --\u003e\n      \u003cdiv class=\"s230f-tree\"\u003e\n        \u003cdiv class=\"s230f-tree-canopy\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-tree-trunk\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Wall --\u003e\n      \u003cdiv class=\"s230f-wall\"\u003e\u003c\/div\u003e\n\n      \u003c!-- 3D camera — hover to rotate, preserve-3d.\n           Spotlight now lives INSIDE camera-scene so it anchors to the lens. --\u003e\n      \u003cdiv class=\"s230f-camera-scene\"\u003e\n        \u003c!-- Spotlight (visible at night, from master clock) --\u003e\n        \u003cdiv class=\"s230f-spotlight\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-spotlight-pool\"\u003e\u003c\/div\u003e\n\n        \u003cdiv class=\"s230f-camera-3d\"\u003e\n          \u003cdiv class=\"s230f-cam-mount\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"s230f-cam-body\"\u003e\n            \u003cdiv class=\"s230f-cam-solar\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"s230f-cam-lens\"\u003e\u003c\/div\u003e\n            \u003cdiv class=\"s230f-cam-led\"\u003e\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003c!-- Status indicators — colour derived from master clock --\u003e\n      \u003cdiv class=\"s230f-status solar\"\u003e\n        \u003cspan class=\"s230f-status-dot\"\u003e\u003c\/span\u003e\n        ☀️ Solar Charging\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-status spot\"\u003e\n        \u003cspan class=\"s230f-status-dot\"\u003e\u003c\/span\u003e\n        💡 Spotlight On\n      \u003c\/div\u003e\n\n      \u003c!-- SVG-filter film grain overlay (subtle, premium) --\u003e\n      \u003cdiv class=\"s230f-grain\"\u003e\u003c\/div\u003e\n\n      \u003c!-- Hero text --\u003e\n      \u003cdiv class=\"s230f-hero-overlay\"\u003e\n        \u003cdiv class=\"s230f-hero-text\"\u003e\n          \u003cspan class=\"s230f-hero-eyebrow\"\u003eSoloCam S230 · eufyCam Solo S40 · Brand New\u003c\/span\u003e\n          \u003ch1\u003eStandalone.\u003cbr\u003e\u003cem\u003eSolar.\u003c\/em\u003e Sorted.\u003c\/h1\u003e\n          \u003cp class=\"s230f-hero-sub\"\u003eA 2K outdoor cam that runs on sunshine, watches in colour after dark with a \u003cstrong\u003e600-lumen spotlight\u003c\/strong\u003e, and never asks for a HomeBase or a subscription.\u003c\/p\u003e\n          \u003cdiv class=\"s230f-hero-pills\"\u003e\n            \u003cspan class=\"s230f-hero-pill amber\"\u003e☀️ Solar — Forever\u003c\/span\u003e\n            \u003cspan class=\"s230f-hero-pill coral\"\u003e📷 2K · 135°\u003c\/span\u003e\n            \u003cspan class=\"s230f-hero-pill magenta\"\u003e💡 600 lm\u003c\/span\u003e\n            \u003cspan class=\"s230f-hero-pill mint\"\u003e$0\/mo · ever\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- MARQUEE STRIP --\u003e\n  \u003cdiv class=\"s230f-strip\"\u003e\n    \u003cdiv class=\"s230f-strip-track\"\u003e\n      \u003cspan\u003e2K colour day \u0026amp; night\u003c\/span\u003e\n      \u003cspan\u003e600-lumen spotlight\u003c\/span\u003e\n      \u003cspan\u003eIntegrated solar · forever power\u003c\/span\u003e\n      \u003cspan\u003eIP67 weatherproof\u003c\/span\u003e\n      \u003cspan\u003eNo HomeBase required\u003c\/span\u003e\n      \u003cspan\u003eZero subscription · ever\u003c\/span\u003e\n      \u003cspan\u003eBrand new · factory sealed\u003c\/span\u003e\n      \u003cspan\u003e2K colour day \u0026amp; night\u003c\/span\u003e\n      \u003cspan\u003e600-lumen spotlight\u003c\/span\u003e\n      \u003cspan\u003eIntegrated solar · forever power\u003c\/span\u003e\n      \u003cspan\u003eIP67 weatherproof\u003c\/span\u003e\n      \u003cspan\u003eNo HomeBase required\u003c\/span\u003e\n      \u003cspan\u003eZero subscription · ever\u003c\/span\u003e\n      \u003cspan\u003eBrand new · factory sealed\u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- BIG IDEA — text + live battery animation --\u003e\n  \u003csection class=\"s230f-section s230f-bigidea\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-bv-grid\"\u003e\n        \u003cdiv class=\"s230f-bigidea-text s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-eyebrow coral\"\u003eThe pitch\u003c\/div\u003e\n          \u003ch2 class=\"s230f-h2\"\u003eOne camera. The sun. \u003cem\u003eForever.\u003c\/em\u003e\n\u003c\/h2\u003e\n          \u003cp\u003eThe S230 sips around 150–200 mAh per day to do its job — recording, alerting, processing on-device AI, the lot. Its integrated solar panel pulls in roughly 600–800 mAh in good Aussie light. \u003cstrong\u003eTwo hours of direct sun and you're already in surplus.\u003c\/strong\u003e Reviewers report most installs sit comfortably in the 85–95% battery range continuously, even through a stretch of overcast days.\u003c\/p\u003e\n          \u003cp\u003eIt's the rare bit of tech that asks for nothing once you've put it up. No daily charging routine. No \"low battery\" alert at 6am. No optional subscription that gradually becomes mandatory. Mount it once, plug it into nothing, and let it get on with the job.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- LIVE BATTERY ANIMATION — animated counter via @property + counter() --\u003e\n        \u003cdiv class=\"s230f-bv-card s230f-reveal\" aria-label=\"Animated battery percentage demonstrating solar maintaining charge\"\u003e\n          \u003cdiv class=\"s230f-bv-sun\"\u003e☀️\u003c\/div\u003e\n          \u003cdiv class=\"s230f-bv-pulse\"\u003e\u003c\/div\u003e\n\n          \u003cdiv class=\"s230f-bv-stat\"\u003e\n            \u003cspan class=\"s230f-bv-num\"\u003e\u003c\/span\u003e\n            \u003cspan class=\"s230f-bv-stat-lbl\"\u003eBattery · solar-maintained over 180 days\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"s230f-bv-bar\"\u003e\n            \u003cdiv class=\"s230f-bv-fill\"\u003e\u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv class=\"s230f-bv-marks\"\u003e\n            \u003cspan\u003eDay 1\u003c\/span\u003e\n            \u003cspan\u003e30\u003c\/span\u003e\n            \u003cspan\u003e60\u003c\/span\u003e\n            \u003cspan\u003e90\u003c\/span\u003e\n            \u003cspan\u003e120\u003c\/span\u003e\n            \u003cspan\u003e150\u003c\/span\u003e\n            \u003cspan\u003eDay 180\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- FEATURES — magnetic hover via :has() --\u003e\n  \u003csection class=\"s230f-section s230f-features\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-feat-head s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow amber\"\u003eSix things it does properly\u003c\/div\u003e\n        \u003ch2 class=\"s230f-h2\"\u003eSharp by day. \u003cem\u003eLit up at night.\u003c\/em\u003e\n\u003c\/h2\u003e\n        \u003cp class=\"s230f-deck\"\u003eSix reasons the SoloCam S230 is the outdoor cam to actually mount and stop thinking about.\u003c\/p\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"s230f-feat-grid s230f-stagger\"\u003e\n        \u003carticle class=\"s230f-feat coral\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003eHD\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eResolution\u003c\/div\u003e\n          \u003ch3\u003e2K with an F1.6 lens.\u003c\/h3\u003e\n          \u003cp\u003eBehind the 1\/2.8\" CMOS sensor sits a wide-open F1.6 aperture — wide-open in lens terms means more light reaches the chip, which means cleaner image quality even before the spotlight kicks in. Reviewers consistently note it's sharp enough to read package labels from across the driveway. Useful for delivery-driver disputes (\"I didn't see a label\"). Also useful for identifying \u003cem\u003ewhich\u003c\/em\u003e neighbour keeps moving your bins.\u003c\/p\u003e\n        \u003c\/article\u003e\n\n        \u003carticle class=\"s230f-feat amber\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003e☀\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eSolar power\u003c\/div\u003e\n          \u003ch3\u003eIntegrated panel. Forever fuel.\u003c\/h3\u003e\n          \u003cp\u003eThe solar panel sits right on top of the camera body — not a second piece to mount on a different bracket, not a cable to weatherproof, not a separate accessory to keep track of. Just one integrated unit. About 2 hours of daily sun keeps it indefinitely charged. Most of Australia averages well above that almost everywhere it's sunny enough to bother having a camera — the maths does the heavy lifting. The opposite of every \"smart home\" product launched since 2018 that needs charging every Tuesday.\u003c\/p\u003e\n        \u003c\/article\u003e\n\n        \u003carticle class=\"s230f-feat magenta\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003e💡\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eAfter dark\u003c\/div\u003e\n          \u003ch3\u003e600-lumen colour vision.\u003c\/h3\u003e\n          \u003cp\u003eMost outdoor cams give you grainy black-and-white infrared — useful for identifying the rough \u003cem\u003eshape\u003c\/em\u003e of a person, but not what they're wearing or whether you actually know them. The S230 fires a 600-lumen spotlight on motion and pulls full-colour 2K out of total darkness. For reference: 600 lumens is roughly the output of a decent bedside lamp pointed at your driveway. Adjustable brightness, so the bloke next door doesn't draft a formal complaint. \u003cem\u003e(If you live in a unit, do a quick chat with the neighbours first. It's polite. They might also want one.)\u003c\/em\u003e\u003c\/p\u003e\n        \u003c\/article\u003e\n\n        \u003carticle class=\"s230f-feat teal\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003e∅\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eNo HomeBase needed\u003c\/div\u003e\n          \u003ch3\u003eGenuinely standalone.\u003c\/h3\u003e\n          \u003cp\u003e\"Solo\" means exactly that — not marketing language for \"needs an additional thing to function.\" The camera connects direct to your 2.4 GHz Wi-Fi and stores motion-triggered footage on its own 8 GB internal memory. No hub. No monthly fees. No cloud account holding your video hostage and asking for credit-card details on the 13th of every month. No \"free trial\" that quietly becomes mandatory after 30 days. No \"starter kit\" missing the bit you actually need. Just the camera. Refreshing, isn't it?\u003c\/p\u003e\n        \u003c\/article\u003e\n\n        \u003carticle class=\"s230f-feat indigo\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003eAI\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eSmart detection\u003c\/div\u003e\n          \u003ch3\u003eTells people from possums.\u003c\/h3\u003e\n          \u003cp\u003eHuman detection runs on the camera itself — not in eufy's cloud. Faster notifications (about a second from detection to phone ping), more private (footage doesn't leave the device unless you stream it on purpose), and the model self-trains over normal use to around 99% accuracy. It knows the difference between a person, a car driving past, a swaying tree branch, and the local possum doing its 2am rounds — which is, frankly, more than some doorbell cams can claim. You get pinged when a human walks through. Not when a moth crosses the lens.\u003c\/p\u003e\n        \u003c\/article\u003e\n\n        \u003carticle class=\"s230f-feat mint\"\u003e\n          \u003cdiv class=\"s230f-feat-icon\"\u003e🌧\u003c\/div\u003e\n          \u003cdiv class=\"s230f-feat-eyebrow\"\u003eBuilt to cop it\u003c\/div\u003e\n          \u003ch3\u003eIP67 weatherproof.\u003c\/h3\u003e\n          \u003cp\u003eEngineered for a -20 °C to 60 °C operating range. A Queensland summer storm, a Tasmanian winter morning, a Top End wet-season downpour, a Perth heatwave — keeps watching through all of it. IP67 specifically means it can take a brief dunking and still work, so the answer to \"will it survive my dodgy fascia where the gutter overflows every March\" is yes. Two-way audio is built in, too — for the times you want to politely tell an intruder where they can go. Or, more politely, where to leave the parcel.\u003c\/p\u003e\n        \u003c\/article\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- AFTER DARK — with mask-image animated reveal --\u003e\n  \u003csection class=\"s230f-section s230f-afterdark\"\u003e\n    \u003cdiv class=\"s230f-container s230f-afterdark-inner\"\u003e\n      \u003cdiv class=\"s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow\"\u003eAfter dark\u003c\/div\u003e\n        \u003ch2\u003e600 lumens of \u003cem\u003e\"hello there\".\u003c\/em\u003e\n\u003c\/h2\u003e\n        \u003cp\u003eMost outdoor cams give you grainy black-and-white infrared after sunset. Useful for identifying the rough silhouette of a person walking past. Less useful for figuring out if you actually know them, what colour shirt they're wearing, or whether they're carrying something they probably shouldn't be.\u003c\/p\u003e\n        \u003cp\u003eThe S230 takes a different approach. When motion is detected at night, the built-in 600-lumen spotlight kicks on and the camera records in \u003cstrong\u003efull-colour 2K\u003c\/strong\u003e. Properly clear, identifiable footage. Bright enough to make out a face. Bright enough to make out a hoodie. Dim-able, so installations near bedroom windows don't turn into a runway.\u003c\/p\u003e\n        \u003cp\u003ePrefer stealth monitoring? IR-only mode is still there — invisible infrared, clear up to about 8 metres. No light, no warning, no indicator that the camera even sees them. You pick the mode in the app. Or set it differently for day vs night. Or different per camera if you've got more than one.\u003c\/p\u003e\n        \u003cdiv class=\"s230f-afterdark-pills\"\u003e\n          \u003cspan class=\"s230f-afterdark-pill\"\u003e600 lm spotlight\u003c\/span\u003e\n          \u003cspan class=\"s230f-afterdark-pill\"\u003eFull-colour at night\u003c\/span\u003e\n          \u003cspan class=\"s230f-afterdark-pill\"\u003eUp to 8 m IR\u003c\/span\u003e\n          \u003cspan class=\"s230f-afterdark-pill\"\u003eAdjustable brightness\u003c\/span\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cdiv class=\"s230f-spot-vis s230f-reveal\"\u003e\n        \u003c!-- Security cam HUD corner brackets --\u003e\n        \u003cdiv class=\"s230f-spot-hud\"\u003e\u003cspan\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c!-- REC indicator --\u003e\n        \u003cdiv class=\"s230f-spot-rec\"\u003eREC\u003c\/div\u003e\n\n        \u003cdiv class=\"s230f-spot-cam-wrap\"\u003e\n          \u003cdiv class=\"s230f-spot-cam-mount\"\u003e\u003c\/div\u003e\n          \u003cdiv class=\"s230f-spot-cam-body\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-spot-beam\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-spot-pool\"\u003e\u003c\/div\u003e\n\n        \u003c!-- MOTION DETECTION DEMO — figure + tracking box + alert --\u003e\n        \u003cdiv class=\"s230f-spot-figure\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"s230f-spot-detect\"\u003e\n          \u003cdiv class=\"s230f-spot-detect-inner\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-spot-alert\"\u003eMotion Detected · Front Yard\u003c\/div\u003e\n\n        \u003cdiv class=\"s230f-spot-label\"\u003eMotion-triggered · 600 lm\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- $0 SECTION --\u003e\n  \u003csection class=\"s230f-section s230f-zero\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-zero-grid\"\u003e\n        \u003cdiv class=\"s230f-zero-text s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-eyebrow mint\"\u003eNo subscription\u003c\/div\u003e\n          \u003ch2 class=\"s230f-h2 cool\"\u003eYour footage. \u003cem\u003eYour house.\u003c\/em\u003e Not eufy's.\u003c\/h2\u003e\n          \u003cp\u003eAll recordings live on the camera's own 8 GB of internal storage — that's roughly \u003cstrong\u003e2–3 months\u003c\/strong\u003e of motion events in a typical residential setup. No cloud account required. No monthly fee. No paywall quietly turning on after the first 12 months. No \"oh sorry, your free tier just expired\" email three years in. Just local storage and an app, both included with the price you paid.\u003c\/p\u003e\n          \u003cp\u003eeufy do offer optional cloud backup if you want extra redundancy. We don't push it. We don't really even mention it. The camera works perfectly without, and most owners never bother — the local storage rolls over, and the events that matter usually get reviewed within days, not months. The whole \"subscription required for the most basic features\" industry pattern can sit this one out, thanks.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-zero-card s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-zero-num\"\u003e$0\u003c\/div\u003e\n          \u003cdiv class=\"s230f-zero-lbl\"\u003eper month · forever\u003c\/div\u003e\n          \u003cdiv class=\"s230f-zero-sub\"\u003e8 GB local storage · ~99% AI accuracy · no cloud lock-in\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- SPECS --\u003e\n  \u003csection class=\"s230f-section s230f-specs-section\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-specs-head s230f-reveal\"\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"s230f-eyebrow muted\"\u003eSpecifications\u003c\/div\u003e\n          \u003ch2 class=\"s230f-h2\"\u003eEvery \u003cem\u003edetail.\u003c\/em\u003e\n\u003c\/h2\u003e\n        \u003c\/div\u003e\n        \u003cspan style=\"font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;\"\u003eREF: T8124CW1\u003c\/span\u003e\n      \u003c\/div\u003e\n      \u003ctable class=\"s230f-spec-table s230f-reveal\"\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n\u003ctd\u003eModel\u003c\/td\u003e\n\u003ctd\u003eeufy SoloCam S230 \/ eufyCam Solo S40 (T8124CW1)\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eCondition\u003c\/td\u003e\n\u003ctd\u003eBrand new — factory sealed\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eResolution\u003c\/td\u003e\n\u003ctd\u003e2K (2304 × 1296)\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eImage Sensor\u003c\/td\u003e\n\u003ctd\u003e1\/2.8\" CMOS · F1.6 aperture\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eField of View\u003c\/td\u003e\n\u003ctd\u003e135° diagonal\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eNight Vision\u003c\/td\u003e\n\u003ctd\u003eIR up to 8 m + 600-lumen spotlight for full-colour\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eSpotlight\u003c\/td\u003e\n\u003ctd\u003e600 lumens · motion-activated · adjustable\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eAI Detection\u003c\/td\u003e\n\u003ctd\u003eOn-device human detection (~99% accuracy)\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eMotion Range\u003c\/td\u003e\n\u003ctd\u003e~9 m day · ~7.5 m night\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eSolar Panel\u003c\/td\u003e\n\u003ctd\u003eIntegrated · ~2 hrs daily sun for indefinite use\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eBattery\u003c\/td\u003e\n\u003ctd\u003eBuilt-in rechargeable lithium-ion · USB-C top-up\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eStorage\u003c\/td\u003e\n\u003ctd\u003e8 GB built-in eMMC · ~2–3 months of events\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eAudio\u003c\/td\u003e\n\u003ctd\u003eTwo-way · range up to 8 m\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eWi-Fi\u003c\/td\u003e\n\u003ctd\u003e2.4 GHz only · direct (no HomeBase required)\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eSmart Home\u003c\/td\u003e\n\u003ctd\u003eAmazon Alexa · Google Assistant (no HomeKit)\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eWeather Rating\u003c\/td\u003e\n\u003ctd\u003eIP67 · operating -20 °C to 60 °C\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eMounting\u003c\/td\u003e\n\u003ctd\u003e2–3 m \/ 7–10 ft recommended height\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eDimensions\u003c\/td\u003e\n\u003ctd\u003e85 × 114 × 50 mm\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eWeight\u003c\/td\u003e\n\u003ctd\u003e~460 g\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eSubscription\u003c\/td\u003e\n\u003ctd\u003eNot required · ever\u003c\/td\u003e\n\u003c\/tr\u003e\n          \u003ctr\u003e\n\u003ctd\u003eWarranty\u003c\/td\u003e\n\u003ctd\u003eCamGuard 12-month · 30-day returns\u003c\/td\u003e\n\u003c\/tr\u003e\n        \u003c\/tbody\u003e\n      \u003c\/table\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- IN THE BOX --\u003e\n  \u003csection class=\"s230f-section s230f-inbox\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-inbox-head s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow magenta\"\u003eIn the pack\u003c\/div\u003e\n        \u003ch2 class=\"s230f-h2\"\u003eBrand new. \u003cem\u003eFactory sealed.\u003c\/em\u003e\n\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-inbox-grid s230f-stagger\"\u003e\n        \u003cdiv class=\"s230f-inbox-item\"\u003e\n          \u003cdiv class=\"s230f-inbox-num\"\u003e01\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-name\"\u003eSoloCam S230\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-note\"\u003ePre-charged · ready to mount\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-inbox-item\"\u003e\n          \u003cdiv class=\"s230f-inbox-num\"\u003e02\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-name\"\u003eUSB-C cable\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-note\"\u003eFor initial \/ top-up charging\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-inbox-item\"\u003e\n          \u003cdiv class=\"s230f-inbox-num\"\u003e03\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-name\"\u003eWall mount\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-note\"\u003eAdjustable swivel bracket\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-inbox-item\"\u003e\n          \u003cdiv class=\"s230f-inbox-num\"\u003e04\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-name\"\u003eScrew pack\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-note\"\u003eAnchors + screws included\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-inbox-item\"\u003e\n          \u003cdiv class=\"s230f-inbox-num\"\u003e05\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-name\"\u003eQuick start guide\u003c\/div\u003e\n          \u003cdiv class=\"s230f-inbox-note\"\u003ePlain English · no jargon\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- WHY CAMGUARD --\u003e\n  \u003csection class=\"s230f-section s230f-trust\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-trust-head s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow teal\"\u003eWhy CamGuard\u003c\/div\u003e\n        \u003ch2 class=\"s230f-h2 cool\"\u003eSmall Aussie team. \u003cem\u003eReal support.\u003c\/em\u003e\n\u003c\/h2\u003e\n        \u003cp class=\"s230f-deck\" style=\"margin-inline: auto; text-align: left;\"\u003eWe're a small crew based in Townsville, QLD. We import genuine eufy stock, ship it fast, and answer every message ourselves.\u003c\/p\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-trust-grid s230f-stagger\"\u003e\n        \u003cdiv class=\"s230f-trust-card coral\"\u003e\n          \u003cdiv class=\"s230f-trust-num\"\u003e01 · Genuine\u003c\/div\u003e\n          \u003ch3\u003e100% authentic stock\u003c\/h3\u003e\n          \u003cp\u003eBrand new and factory sealed, sourced through proper channels. Not parallel-imported greymarket gear with the wrong firmware region and voided warranty. Not refurbished relabelled as new. Not an \"open box\" with a sticker over it. Every unit gets checked for damage before it leaves us.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-trust-card amber\"\u003e\n          \u003cdiv class=\"s230f-trust-num\"\u003e02 · Aussie\u003c\/div\u003e\n          \u003ch3\u003eTownsville-based team\u003c\/h3\u003e\n          \u003cp\u003eSame timezone as you. Messages get answered within a few hours, usually faster — by a real person who knows the eufy range inside-out. We use these cameras at our own homes. So when we say \"this is the model for a typical Aussie front yard,\" we've genuinely tested that claim.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-trust-card teal\"\u003e\n          \u003cdiv class=\"s230f-trust-num\"\u003e03 · Fast\u003c\/div\u003e\n          \u003ch3\u003eDispatched in 1 business day\u003c\/h3\u003e\n          \u003cp\u003eAustralia Post Express included with every order. Not \"free shipping over $X.\" Not \"standard ground for 7–10 business days.\" Just express, tracked, included. East-coast metro 1–3 business days, WA 2–4. Tracking goes to your phone the moment we drop it. Local Townsville pickup available if you'd rather grab it in person.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-trust-card mint\"\u003e\n          \u003cdiv class=\"s230f-trust-num\"\u003e04 · Stacked warranty\u003c\/div\u003e\n          \u003ch3\u003e12-month CamGuard cover\u003c\/h3\u003e\n          \u003cp\u003ePlus the statutory protection of Australian Consumer Law. Both apply, both stack in your favour. Something goes pear-shaped? Message us before opening a chargeback or a marketplace dispute — we'd rather sort it directly. We're motivated to keep you happy. Bad reviews live forever; helpful service stays cheaper than damage control.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- SHIPPING --\u003e\n  \u003csection class=\"s230f-section s230f-ship\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-ship-head s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow indigo\"\u003eLogistics\u003c\/div\u003e\n        \u003ch2 class=\"s230f-h2\"\u003eFast dispatch. \u003cem\u003eHonest cover.\u003c\/em\u003e\n\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-ship-grid s230f-stagger\"\u003e\n        \u003cdiv class=\"s230f-ship-card\"\u003e\n          \u003ch4\u003e🚚 Australia Post Express included\u003c\/h4\u003e\n          \u003cp\u003e\u003cspan class=\"s230f-ship-mint\"\u003eAustralia Post Express included\u003c\/span\u003e in the price — not \"free shipping over $X\" with a threshold, not \"standard ground\" with a quiet upsell at checkout. Express. Tracked. Included.\u003c\/p\u003e\n          \u003cp\u003eDispatched within 1 business day from Townsville, QLD. We aim for same-day on weekday orders placed before 2pm.\u003c\/p\u003e\n          \u003cp\u003eEast-coast metro: 1–3 business days · WA: 2–4 · Regional NT\/SA\/Tas: occasionally a touch longer · Local Townsville pickup available if you're nearby and prefer face-to-face.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-ship-card\"\u003e\n          \u003ch4\u003e🛡️ Stacked warranty\u003c\/h4\u003e\n          \u003cp\u003e\u003cspan class=\"s230f-ship-coral\"\u003e12-month CamGuard warranty\u003c\/span\u003e with express replacement if needed. Often quicker than the manufacturer's own returns process.\u003c\/p\u003e\n          \u003cp\u003e\u003cspan class=\"s230f-ship-amber\"\u003e30-day no-fuss returns\u003c\/span\u003e if you change your mind. \"No-fuss\" meaning exactly that — no quiz, no \"are you sure?\", no seven-question exit survey before we process it.\u003c\/p\u003e\n          \u003cp\u003eAustralian Consumer Law applies regardless of anything else. Reach out before opening a marketplace case — we'd rather fix things directly than wade through the platform's automated escalation flow.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- FAQ --\u003e\n  \u003csection class=\"s230f-section s230f-faq\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-faq-head s230f-reveal\"\u003e\n        \u003cdiv class=\"s230f-eyebrow amber\"\u003eQuestions, briefly\u003c\/div\u003e\n        \u003ch2 class=\"s230f-h2\"\u003eFive things \u003cem\u003eworth knowing.\u003c\/em\u003e\n\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"s230f-faq-list\"\u003e\n        \u003cdiv class=\"s230f-faq-item s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-faq-q\"\u003e\n\u003cspan class=\"s230f-faq-q-tag\"\u003eQ\u003c\/span\u003e Does it really work without a HomeBase?\u003c\/div\u003e\n          \u003cdiv class=\"s230f-faq-a\"\u003eYes. The \"Solo\" in the name is literal — not marketing fluff. Connects direct to your 2.4 GHz Wi-Fi, stores motion-triggered footage on its own 8 GB of internal memory. Setup is the eufy Security app, your Wi-Fi password, and about five minutes. Faster than rebooting your router.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-faq-item s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-faq-q\"\u003e\n\u003cspan class=\"s230f-faq-q-tag\"\u003eQ\u003c\/span\u003e Is there a monthly fee?\u003c\/div\u003e\n          \u003cdiv class=\"s230f-faq-a\"\u003e\n\u003cstrong\u003eNo. Never.\u003c\/strong\u003e Recording, AI detection, alerts, live view, two-way audio — all included. eufy do offer optional cloud storage if you want extra redundancy, but it's not required. Imagine that — buying a thing and then just \u003cem\u003eusing\u003c\/em\u003e it. Wild concept these days.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-faq-item s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-faq-q\"\u003e\n\u003cspan class=\"s230f-faq-q-tag\"\u003eQ\u003c\/span\u003e Apple HomeKit?\u003c\/div\u003e\n          \u003cdiv class=\"s230f-faq-a\"\u003eHonest answer: no. eufy's HomeKit support is uneven across their range and the S230 missed out. It works with \u003cstrong\u003eAmazon Alexa\u003c\/strong\u003e and \u003cstrong\u003eGoogle Assistant\u003c\/strong\u003e, but not HomeKit. If HomeKit's a must, look at the eufyCam 2C (via HomeBase 2 or 3) or the eufyCam S3 Pro range instead — we sell those too.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-faq-item s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-faq-q\"\u003e\n\u003cspan class=\"s230f-faq-q-tag\"\u003eQ\u003c\/span\u003e Doesn't the spotlight chew through battery?\u003c\/div\u003e\n          \u003cdiv class=\"s230f-faq-a\"\u003eIt only fires on motion, only for the few seconds an event lasts. Combined with the integrated solar trickle, real-world battery sits at 85–95% for most installs. The only way you'll genuinely drain it is mounting next to a footpath in a 24-hour pedestrian thoroughfare — that's an installation decision, not a battery problem.\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"s230f-faq-item s230f-reveal\"\u003e\n          \u003cdiv class=\"s230f-faq-q\"\u003e\n\u003cspan class=\"s230f-faq-q-tag\"\u003eQ\u003c\/span\u003e What if my spot has heaps of motion events?\u003c\/div\u003e\n          \u003cdiv class=\"s230f-faq-a\"\u003e8 GB holds roughly 2–3 months of events in a typical residential zone. Once full, the oldest rolls over. Very high-traffic locations can fill 8 GB in around a month — but for most homes it's plenty. If you're already running a small surveillance state out the front, you might want a HomeBase-paired setup with expandable storage instead.\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- CTA --\u003e\n  \u003csection class=\"s230f-cta\"\u003e\n    \u003cdiv class=\"s230f-container s230f-cta-inner\"\u003e\n      \u003cdiv class=\"s230f-eyebrow\" style=\"color: var(--amber);\"\u003eFinal pitch\u003c\/div\u003e\n      \u003ch2\u003eMount it. \u003cem\u003eForget it.\u003c\/em\u003e\n\u003c\/h2\u003e\n      \u003cp\u003eGenuine eufy SoloCam S230 — also marketed in Australia as the eufyCam Solo S40. \u003cstrong\u003eBrand new, factory sealed.\u003c\/strong\u003e About two hours of daily solar to stay topped up, 2K colour footage day \u003cem\u003eand\u003c\/em\u003e night, 600-lumen spotlight on motion, IP67 weatherproof, on-device AI, zero subscription, zero HomeBase, zero monthly drama. The outdoor cam to actually mount and stop thinking about.\u003c\/p\u003e\n      \u003cdiv class=\"s230f-cta-pills\"\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e📦 Brand New\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e📷 2K · 135°\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e💡 600 lm\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e☀️ Solar · forever\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e∅ No HomeBase\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e$0\/mo · ever\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e🌧 IP67\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e🛡 12-Month Warranty\u003c\/span\u003e\n        \u003cspan class=\"s230f-cta-pill\"\u003e🚚 Australia Post Express Included\u003c\/span\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- FOOTER --\u003e\n  \u003cfooter class=\"s230f-footer\"\u003e\n    \u003cdiv class=\"s230f-container\"\u003e\n      \u003cdiv class=\"s230f-footer-brand\"\u003eCamGuard Australia\u003c\/div\u003e\n      \u003cdiv class=\"s230f-footer-tag\"\u003eSolo. Solar. Sorted.\u003c\/div\u003e\n      \u003cp\u003e© 2026 CamGuard Australia · ABN 62 385 894 763 · A small team in Townsville, QLD\u003c\/p\u003e\n      \u003cdiv class=\"s230f-footer-divider\"\u003e\u003c\/div\u003e\n      \u003cp class=\"s230f-footer-legal\"\u003eCamGuard Australia is an independent reseller and is not an official or authorised supplier, distributor, or representative of eufy, Anker Innovations, or any of their affiliated entities. All product names, logos, and trademarks are the property of their respective owners. The eufy SoloCam S230 is also marketed in Australia as the \"eufyCam Solo S40\" — both names refer to the same product (SKU T8124CW1).\u003c\/p\u003e\n      \u003cp class=\"s230f-footer-legal\"\u003e\"Brand new\" indicates the product is factory sealed in original retail packaging with all original accessories and documentation. The eufy SoloCam S230 is a standalone camera and does not require a eufy HomeBase to operate. Solar charging performance varies by mounting position, season and direct-sunlight exposure. Battery life, motion-detection range, night-vision distance and spotlight brightness are approximate and vary with environmental conditions and configuration. The eufy SoloCam S230 connects to 2.4 GHz Wi-Fi only and is not compatible with Apple HomeKit. Specifications sourced from the manufacturer and believed to be accurate at time of listing; features and compatibility may be updated by the manufacturer without notice.\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/footer\u003e\n\n\u003c\/div\u003e\n","brand":"eufy","offers":[{"title":"Default Title","offer_id":44051323682859,"sku":null,"price":229.0,"currency_code":"AUD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0666\/0086\/1739\/files\/S230SoloCamS40.webp?v=1778520326","url":"https:\/\/www.camguardaustralia.com.au\/products\/eufy-security-solocam-s230-s40-brand-new","provider":"CamGuard Australia","version":"1.0","type":"link"}