@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pw {
--ease: cubic-bezier(.2,.8,.2,1);
--spring: cubic-bezier(.34,1.45,.5,1);
position: relative; min-height: 100vh; overflow-x: clip;
font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased; color: var(--ink);
transition: color .6s var(--ease);
}
:root[data-theme="dark"] {
--ink: #F5F1EA; --ink-2: rgba(245,241,234,.78); --ink-3: rgba(245,241,234,.64);
--glass: rgba(14,24,42,.40); --glass-2: rgba(24,36,60,.50); --glass-strong: rgba(30,44,72,.70);
--stroke: rgba(255,255,255,.13); --hi: rgba(255,255,255,.22); --lo: rgba(0,0,0,.30);
--shadow: rgba(0,4,14,.55); --sheen: rgba(255,255,255,.10);
--accent: #6E9BF2; --cream: #EFD9B4; --sky: #BCD6F7; --glow: rgba(92,142,240,.55); --ring: rgba(110,155,242,.28);
--field: rgba(255,255,255,.05); --field-hover: rgba(255,255,255,.08);
--ok: #7FD8A6; --warm: #F2C48D;
}
:root[data-theme="light"] {
--ink: #0D2240; --ink-2: rgba(13,34,64,.80); --ink-3: rgba(13,34,64,.66);
--glass: rgba(255,255,255,.40); --glass-2: rgba(255,255,255,.56); --glass-strong: rgba(255,255,255,.80);
--stroke: rgba(255,255,255,.72); --hi: rgba(255,255,255,.95); --lo: rgba(13,34,64,.06);
--shadow: rgba(25,52,92,.22); --sheen: rgba(255,255,255,.45);
--accent: #2C6BE4; --cream: #9A5B12; --sky: #2C6BE4; --glow: rgba(44,107,228,.38); --ring: rgba(44,107,228,.20);
--field: rgba(255,255,255,.45); --field-hover: rgba(255,255,255,.62);
--ok: #17824C; --warm: #A2580E;
}
.pw-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0B1424; transition: background .8s var(--ease); }
:root[data-theme="light"] .pw-bg { background: #EEF3F9; }
.pw-bg img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
filter: blur(42px) saturate(1.3); transition: opacity 1.1s var(--ease);
animation: pw-drift 46s ease-in-out infinite alternate; }
.pw-bg .bg-dark { opacity: 1; } :root[data-theme="light"] .pw-bg .bg-dark { opacity: 0; }
.pw-bg .bg-light { opacity: 0; } :root[data-theme="light"] .pw-bg .bg-light { opacity: 1; }
.pw-bg .tint { position: absolute; inset: 0; transition: opacity 1s var(--ease);
background: radial-gradient(120% 80% at 70% 0%, rgba(8,16,32,.25), rgba(6,12,26,.72) 70%); }
:root[data-theme="light"] .pw-bg .tint { background: radial-gradient(120% 80% at 70% 0%, rgba(255,255,255,.10), rgba(244,247,252,.55) 75%); }
.pw-bg .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; }
:root[data-theme="light"] .pw-bg .orb { mix-blend-mode: soft-light; opacity: .7; }
.pw-bg .orb.o1 { width: 520px; height: 520px; left: -120px; top: 18%; background: #2C6BE4; animation: pw-float 22s ease-in-out infinite alternate; }
.pw-bg .orb.o2 { width: 440px; height: 440px; right: -80px; top: -60px; background: #EFD9B4; animation: pw-float 28s ease-in-out infinite alternate-reverse; }
.pw-main { position: relative; z-index: 1; }
.logo-l { display: none; } :root[data-theme="light"] .logo-d { display: none; } :root[data-theme="light"] .logo-l { display: block; }
@keyframes pw-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2.5%,-1.5%,0); } }
@keyframes pw-float { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(80px,60px,0) scale(1.15); } }
.glass {
position: relative;
background: linear-gradient(140deg, var(--sheen), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, var(--sheen)), var(--glass);
-webkit-backdrop-filter: blur(30px) saturate(175%); backdrop-filter: blur(30px) saturate(175%);
border: 1px solid var(--stroke); border-radius: 28px;
box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 1px var(--lo), 0 30px 70px -28px var(--shadow);
transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), transform .55s var(--ease);
}
.glass-2 { background: linear-gradient(140deg, var(--sheen), rgba(255,255,255,0) 45%), var(--glass-2); }
.glass-strong { background: linear-gradient(140deg, var(--sheen), rgba(255,255,255,0) 45%), var(--glass-strong); }
.pill { border-radius: 999px; }
.spot { --mx: 50%; --my: 50%; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
transition: opacity .5s var(--ease);
background: radial-gradient(360px circle at var(--mx) var(--my), var(--ring), transparent 60%); }
.spot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; padding: 1px;
transition: opacity .5s var(--ease);
background: radial-gradient(260px circle at var(--mx) var(--my), var(--glow), transparent 55%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::before, .spot:hover::after { opacity: 1; }
.lift:hover { transform: translateY(-6px); }
.halo::after { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: conic-gradient(from var(--spin), transparent 0deg, var(--accent) 60deg, var(--cream) 120deg, transparent 180deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation: pw-spin 6s linear infinite; }
@keyframes pw-spin { to { --spin: 360deg; } }
.serif { font-family: 'Epilogue', 'Segoe UI', system-ui, sans-serif; font-weight: 800; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
font: 600 15px/1 'Instrument Sans', system-ui, sans-serif; letter-spacing: -.005em; white-space: nowrap;
transition: transform .45s var(--spring), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.btn:active { transform: scale(.96); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #5A90F3 0%, #2C6BE4 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(13,34,64,.25), 0 0 0 1px rgba(44,107,228,.7), 0 12px 30px -10px var(--glow); }
.btn-primary:hover { transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(13,34,64,.25), 0 0 0 1px rgba(120,165,250,.95), 0 18px 44px -8px var(--glow), 0 0 32px var(--glow); }
.btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .8s var(--ease); }
.btn-primary:hover::after { left: 130%; }
.btn-glass { color: var(--ink); background: linear-gradient(140deg, var(--sheen), rgba(255,255,255,0) 50%), var(--glass-2);
-webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke), 0 10px 26px -14px var(--shadow); }
.btn-glass:hover { transform: translateY(-2px); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke), 0 0 24px var(--ring); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.icon-btn { width: 44px; height: 44px; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tt { position: relative; width: 76px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
background: var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke), inset 0 2px 8px var(--lo);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink-2); transition: background .5s var(--ease); }
.tt-knob { position: absolute; top: 5px; left: 5px; width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: #0D2240;
background: radial-gradient(circle at 35% 30%, #fff, #E6EEFB 60%, #C9D9F4);
box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 -2px 4px rgba(13,34,64,.15);
transition: transform .6s var(--spring), background .6s var(--ease); }
:root[data-theme="light"] .tt-knob { transform: translateX(32px); background: radial-gradient(circle at 35% 30%, #FFF6E3, #F6DDAE 60%, #E9BE73); color: #7A4508; }
.tt .i-sun { display: none; } :root[data-theme="light"] .tt .i-sun { display: block; } :root[data-theme="light"] .tt .i-moon { display: none; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px;
background: var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke), inset 0 2px 10px var(--lo);
-webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.seg-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)), var(--glass-strong);
box-shadow: inset 0 1px 0 var(--hi), 0 6px 18px -6px var(--shadow), 0 0 0 1px var(--stroke);
transition: transform .65s var(--spring), width .5s var(--ease); }
.seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; color: var(--ink-3);
font: 600 14px/1 'Instrument Sans', system-ui, sans-serif; min-height: 44px; padding: 0 22px; border-radius: 999px; transition: color .4s; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
background: var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke); color: var(--ink-2); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pw-pulse 2.4s var(--ease) infinite; }
@keyframes pw-pulse { 0% { box-shadow: 0 0 0 0 rgba(127,216,166,.6); } 70% { box-shadow: 0 0 0 10px rgba(127,216,166,0); } 100% { box-shadow: 0 0 0 0 rgba(127,216,166,0); } }
.bubble { padding: 14px 16px; border-radius: 22px; font-size: 15px; line-height: 1.5; max-width: 88%; }
.bubble-in { border-bottom-left-radius: 8px; color: var(--ink); background: linear-gradient(140deg, var(--sheen), rgba(255,255,255,0) 50%), var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke); }
.bubble-out { border-bottom-right-radius: 8px; color: #fff; align-self: flex-end;
background: linear-gradient(160deg, #6A9BF5 0%, #2C6BE4 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -14px var(--glow); }
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; border-radius: 22px; border-bottom-left-radius: 8px;
background: var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: pw-bounce 1.2s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pw-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
.demo-run .seq-typing { animation: pw-collapse .45s var(--ease) 2.4s forwards; overflow: hidden; max-height: 80px; }
.demo-run .seq-reply { animation: pw-pop .8s var(--spring) 2.6s both; transform-origin: 100% 100%; }
.demo-run .seq-meta { animation: pw-fade .6s var(--ease) 3.2s both; }
@keyframes pw-collapse { to { max-height: 0; opacity: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes pw-pop { from { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
.rise { animation: pw-rise .7s var(--ease) both; }
.d1 { animation-delay: .03s; } .d2 { animation-delay: .07s; } .d3 { animation-delay: .11s; } .d4 { animation-delay: .15s; } .d5 { animation-delay: .2s; }
@keyframes pw-reveal { from { opacity: .45; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pw-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@supports (animation-timeline: view()) {
.reveal { animation: pw-reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 85%; }
}
.field { position: relative; }
.inp { box-sizing: border-box; width: 100%; height: 58px; padding: 24px 18px 8px; border-radius: 16px; outline: none;
background: var(--field); border: 1px solid var(--stroke); color: var(--ink); font: 500 15px/1.2 'Instrument Sans', system-ui, sans-serif;
transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
textarea.inp { height: 120px; resize: none; padding-top: 28px; line-height: 1.5; }
.inp:hover { background: var(--field-hover); }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), 0 0 24px var(--ring); background: var(--field-hover); }
.flabel { position: absolute; left: 19px; top: 20px; font-size: 15px; color: var(--ink-3); pointer-events: none; transition: all .3s var(--ease); }
.inp:focus + .flabel, .inp:not(:placeholder-shown) + .flabel { top: 9px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; cursor: pointer;
text-align: left; color: var(--ink); font: 600 18px/1.35 'Instrument Sans', system-ui, sans-serif; padding: 24px 28px; min-height: 44px; }
.acc-chev { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--glass-2); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--stroke); transition: transform .55s var(--spring), background .4s; }
.acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease); }
.acc-body > div { overflow: hidden; }
.acc.open .acc-body { grid-template-rows: 1fr; opacity: 1; }
.acc.open .acc-chev { transform: rotate(45deg); background: var(--accent); color: #fff; }
.check-ring { animation: pw-pop .7s var(--spring) both; }
.check-path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: pw-draw .6s var(--ease) .35s forwards; }
@keyframes pw-draw { to { stroke-dashoffset: 0; } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: pw-rot .8s linear infinite; }
@keyframes pw-rot { to { transform: rotate(360deg); } }
.nlink { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; padding: 12px 14px; border-radius: 999px; transition: color .3s, background .3s; }
.nlink:hover { color: var(--ink); background: var(--field-hover); }
@media (prefers-reduced-motion: reduce) {
.pw *, .pw *::before, .pw *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ===== Piccolo Way brand kit layer (tokens, type, focus) ===== */
:root[data-theme="dark"] { --ink: #E8EFF8; --ink-2: rgba(232,239,248,.82); --ink-3: #92A4BA; --accent: #6098FF; --sky: #A8C8F2; --cream: #F0DCBB; --glow: rgba(96,152,255,.50); --ring: rgba(96,152,255,.26); --ok: #52C9A3; --warm: #E7A860; }
:root[data-theme="light"] { --ink: #0D2240; --ink-2: rgba(13,34,64,.82); --ink-3: #5A6E88; --accent: #2C6BE4; --sky: #2C6BE4; --cream: #2C6BE4; --glow: rgba(44,107,228,.34); --ring: rgba(44,107,228,.18); --ok: #17785E; --warm: #95520F; }
.pw h1, .pw h2, .pw h3, .pw .h1, .pw .h2, .pw .h3 { font-family: 'Epilogue', 'Segoe UI', system-ui, sans-serif; text-wrap: balance; }
.pw h1 { font-weight: 800; }
.pw .serif { font-family: 'Epilogue', 'Segoe UI', system-ui, sans-serif !important; font-style: normal !important; font-weight: 800 !important; font-size: inherit !important; letter-spacing: inherit !important; color: var(--cream) !important; }
.pw .eyebrow { letter-spacing: .1em; color: var(--ink-3); }
.pw .lead, .pw .muted { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, #4A84F0 0%, #2C6BE4 100%); }
:root[data-theme="dark"] .btn-primary { color: #fff; }
.pw main > section:last-child > .glass { background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%), rgba(13,34,64,.88) !important; border-color: rgba(188,214,247,.18) !important; color: #E8EFF8; }
.pw main > section:last-child > .glass .h2, .pw main > section:last-child > .glass h2 { color: #E8EFF8; }
.pw main > section:last-child > .glass .serif, .pw main > section:last-child > .glass span[style*="cream"] { color: #EFD9B4 !important; }
.pw main > section:last-child > .glass .textlink { color: #BCD6F7; }
:root[data-theme="dark"] .chip[style*="--warm"] { background: #2E2318; }
:root[data-theme="dark"] .chip[style*="--ok"] { background: #0F2E26; }
:root[data-theme="light"] .chip[style*="--warm"] { background: #FBEEDF; }
:root[data-theme="light"] .chip[style*="--ok"] { background: #DFF1EA; }

/* ===== Landing port additions ===== */
[hidden] { display: none !important; }
html { background: #0B1424; color-scheme: dark; }
html[data-theme="light"] { background: #EEF3F9; color-scheme: light; }
body.pw { margin: 0; }
/* the demo cards below the fold: only seq items waiting on a timer need a hidden start state */
.demo-run .seq-reply, .demo-run .seq-meta { animation-fill-mode: both; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(14,24,42,.92); --glass-2: rgba(24,36,60,.94); --glass-strong: rgba(30,44,72,.97); }
  :root[data-theme="light"] { --glass: rgba(255,255,255,.92); --glass-2: rgba(255,255,255,.94); --glass-strong: rgba(255,255,255,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(14,24,42,.94); --glass-2: rgba(24,36,60,.96); --glass-strong: rgba(30,44,72,.98); }
  :root[data-theme="light"] { --glass: rgba(255,255,255,.94); --glass-2: rgba(255,255,255,.96); --glass-strong: rgba(255,255,255,.98); }
  .glass, .btn-glass, .tt, .seg { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lift:hover, .btn-primary:hover, .btn-glass:hover { transform: none; }
  .reveal { animation: none; }
}