@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--navy:#0b1c2d;--red:#c8102e;--gold:#f2a900;--cyan:#22d3ee;--bg:#060d16}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(900px 480px at 12% -8%, #c8102e38, transparent 55%), radial-gradient(800px 420px at 88% 0%, #22d3ee29, transparent 50%), radial-gradient(700px 500px at 50% 100%, #f2a90014, transparent 55%), linear-gradient(180deg, #0b1c2d, var(--bg));color:#e8eef5;-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.portal-card{--pc-navy:#0b1c2d;--pc-navy-mid:#122536;--pc-red:#c8102e;--pc-red-hot:#e11d3a;--pc-gold:#f2a900;--pc-paper:#faf8f5;--pc-slate:#3d4f61;--pc-cyan:#22d3ee;--pc-cyan-dim:#0891b2;--pc-radius:22px;--pc-font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;isolation:isolate;border-radius:var(--pc-radius);width:100%;max-width:24rem;font-family:var(--pc-font);flex-direction:column;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .2s;display:flex;position:relative;overflow:hidden}.portal-card--brand{--pc-ink:#f7f4ef;--pc-muted:#a8b4c2;--pc-title:#fff;--pc-surface:#122536b8;--pc-border:#f2a9002e;--pc-border-hover:#c8102e73;--pc-cta-bg:var(--pc-red);--pc-cta-fg:#fff;--pc-cta-hover:#a50d25;--pc-accent:var(--pc-gold);--pc-glow:#c8102e38;--pc-mesh-a:#c8102e47;--pc-mesh-b:#f2a90029;--pc-chrome:#ffffff8c;color:var(--pc-ink);background:linear-gradient(165deg, #ffffff12, transparent 42%), var(--pc-surface);border:1px solid var(--pc-border);-webkit-backdrop-filter:blur(18px)saturate(1.25);box-shadow:inset 0 1px #ffffff0f,0 18px 48px #00000059,0 0 0 1px #0b1c2d66}.portal-card--tech{--pc-ink:#e8f6ff;--pc-muted:#8aa4b8;--pc-title:#f0fbff;--pc-surface:#060e18c7;--pc-border:#22d3ee38;--pc-border-hover:#22d3ee8c;--pc-cta-bg:linear-gradient(135deg, #0891b2, #22d3ee);--pc-cta-fg:#041018;--pc-cta-hover:#67e8f9;--pc-accent:var(--pc-cyan);--pc-glow:#22d3ee47;--pc-mesh-a:#22d3ee38;--pc-mesh-b:#3b82f624;--pc-chrome:#22d3eea6;color:var(--pc-ink);background:linear-gradient(165deg, #22d3ee14, transparent 48%), var(--pc-surface);border:1px solid var(--pc-border);-webkit-backdrop-filter:blur(20px)saturate(1.35);box-shadow:inset 0 0 0 1px #22d3ee0f,0 20px 50px #00000073,0 0 40px #22d3ee0f}.portal-card:hover{border-color:var(--pc-border-hover);box-shadow:0 1px 0 #ffffff14 inset, 0 28px 64px #0000006b, 0 0 48px var(--pc-glow);transform:translateY(-4px)}.portal-card__glow{pointer-events:none;background:radial-gradient(ellipse at 50% 0%, var(--pc-glow), transparent 65%);opacity:.55;z-index:0;height:70%;position:absolute;inset:-40% -20% auto}.portal-card__mesh{pointer-events:none;z-index:0;opacity:.35;background-image:radial-gradient(circle at 12% 18%, var(--pc-mesh-a), transparent 42%), radial-gradient(circle at 88% 8%, var(--pc-mesh-b), transparent 38%), linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);background-size:auto,auto,28px 28px,28px 28px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000008c,#0000 70%);mask-image:linear-gradient(#0000008c,#0000 70%)}.portal-card__media{z-index:1;aspect-ratio:16/10;background:linear-gradient(145deg, var(--pc-navy-mid), var(--pc-navy));position:relative;overflow:hidden}.portal-card--tech .portal-card__media{background:radial-gradient(circle at 70% 30%,#22d3ee2e,#0000 50%),linear-gradient(145deg,#07111c,#03080f)}.portal-card__thumb{object-fit:cover;width:100%;height:100%;transition:transform .45s;display:block;transform:scale(1.01)}.portal-card:hover .portal-card__thumb{transform:scale(1.05)}.portal-card__media-fallback{place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.portal-card__media-orb{aspect-ratio:1;background:radial-gradient(circle at 35% 30%, #ffffff59, transparent 45%), radial-gradient(circle at 50% 50%, var(--pc-mesh-a), transparent 70%);width:42%;box-shadow:0 0 48px var(--pc-glow);filter:blur(.2px);border-radius:50%}.portal-card__media-grid{opacity:.55;background-color:#0000;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:1px solid #ffffff14;border-radius:16px;position:absolute;inset:12%;-webkit-mask-image:radial-gradient(circle,#000 35%,#0000 75%);mask-image:radial-gradient(circle,#000 35%,#0000 75%)}.portal-card__chrome{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;background:#080e1673;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .55rem;display:flex;position:absolute;top:.65rem;left:.75rem;right:.75rem}.portal-card__chrome-dot{background:var(--pc-chrome);opacity:.55;border-radius:50%;width:7px;height:7px}.portal-card__chrome-dot:first-child{opacity:.85;background:#ff5f57}.portal-card__chrome-dot:nth-child(2){opacity:.85;background:#febc2e}.portal-card__chrome-dot:nth-child(3){opacity:.85;background:#28c840}.portal-card__chrome-bar{background:linear-gradient(90deg,#ffffff2e,#ffffff0d 60%,#0000);border-radius:999px;flex:1;height:5px;margin-left:.35rem}.portal-card__play{z-index:2;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.72;background:#080e1673;border:1px solid #ffffff38;border-radius:50%;place-items:center;width:2.6rem;height:2.6rem;transition:opacity .2s,transform .2s,background .2s;display:grid;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 24px #00000059}.portal-card:hover .portal-card__play{opacity:1;background:#080e169e;transform:translate(-50%,-50%)scale(1.06)}.portal-card--brand .portal-card__play{color:var(--pc-gold)}.portal-card--tech .portal-card__play{color:var(--pc-cyan);box-shadow:0 0 24px #22d3ee40}.portal-card__body{z-index:1;flex-direction:column;flex:1;gap:.7rem;padding:1.15rem 1.25rem 1.3rem;display:flex;position:relative}.portal-card__meta{flex-wrap:wrap;align-items:center;gap:.4rem .55rem;display:flex}.portal-card__status{text-transform:uppercase;letter-spacing:.09em;color:var(--pc-muted);background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:.35rem;padding:.28em .75em;font-size:.65rem;font-weight:700;display:inline-flex}.portal-card__status-dot{background:currentColor;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px}.portal-card__status[data-status=live]{color:#86efac;background:#22c55e29;border-color:#86efac59}.portal-card__status[data-status=staging]{color:#f2a900;background:#f2a90024;border-color:#f2a90066}.portal-card__status[data-status=dev]{color:#67e8f9;background:#22d3ee24;border-color:#22d3ee59}.portal-card__status[data-status=parked]{color:#f0a8b4;background:#c8102e1f;border-color:#c8102e59}.portal-card--tech .portal-card__status[data-status=parked]{color:#94a3b8;background:#94a3b81f;border-color:#94a3b847}.portal-card__tags{flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none;display:flex}.portal-card__tag{letter-spacing:.05em;text-transform:uppercase;color:var(--pc-muted);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:7px;padding:.18em .55em;font-size:.62rem}.portal-card__title{letter-spacing:-.02em;color:var(--pc-title);margin:0;font-size:1.15rem;font-weight:700;line-height:1.25}.portal-card__blurb{color:var(--pc-muted);flex:1;margin:0;font-size:.9rem;line-height:1.5}.portal-card__cta{background:var(--pc-cta-bg);color:var(--pc-cta-fg);letter-spacing:.01em;border-radius:999px;justify-content:center;align-self:flex-start;align-items:center;gap:.45rem;margin-top:.25rem;padding:.55rem 1.15rem;font-size:.84rem;font-weight:650;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s,color .15s;display:inline-flex;box-shadow:0 8px 20px #00000038}.portal-card__cta-arrow{transition:transform .18s}.portal-card__cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px #00000047}.portal-card--brand .portal-card__cta:hover{background:var(--pc-cta-hover)}.portal-card--tech .portal-card__cta:hover{color:#021018;filter:brightness(1.08);box-shadow:0 0 28px #22d3ee59}.portal-card__cta:hover .portal-card__cta-arrow{transform:translate(2px)}.portal-card__cta:focus-visible{outline:2px solid var(--pc-accent);outline-offset:3px}@media (prefers-reduced-motion:reduce){.portal-card,.portal-card__thumb,.portal-card__play,.portal-card__cta,.portal-card__cta-arrow{transition:none}.portal-card:hover{transform:none}}.demo{max-width:72rem;margin:0 auto;padding:3.5rem 1.5rem 5rem}.demo__nav{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2.5rem;display:flex}.demo__brand{letter-spacing:-.02em;color:#fff;align-items:center;gap:.75rem;font-weight:700;text-decoration:none;display:flex}.demo__brand img{width:auto;height:28px}.demo__pill{letter-spacing:.06em;text-transform:uppercase;color:#f2a900;background:#f2a9001a;border:1px solid #f2a90047;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .85rem;font-size:.72rem;font-weight:600;display:inline-flex}.demo__hero{text-align:center;max-width:40rem;margin:0 auto 3rem}.demo__eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#c8102e;margin:0 0 .85rem;font-size:.75rem;font-weight:700}.demo__hero h1{letter-spacing:-.035em;color:#fff;margin:0 0 .85rem;font-size:clamp(2rem,4vw,2.85rem);font-weight:800;line-height:1.1}.demo__lede{color:#9aabbc;max-width:32rem;margin:0 auto;font-size:1.05rem;line-height:1.55}.demo__section{margin-bottom:2.75rem}.demo__section-head{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.1rem;display:flex}.demo__section-head h2{letter-spacing:.1em;text-transform:uppercase;color:#c4d0dc;margin:0;font-size:.85rem;font-weight:700}.demo__section-head span{color:#7d8fa3;font-size:.78rem}.demo__grid{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.35rem;display:grid}.demo__shell{background:#ffffff05;border:1px solid #ffffff14;border-radius:28px;padding:1.35rem;position:relative}.demo__shell--tech{background:radial-gradient(600px 200px at 50% 0,#22d3ee14,#0000 60%),#00000040;border-color:#22d3ee29}.demo__note{color:#8fa0b3;text-align:center;margin-top:2rem;font-size:.9rem}.demo__note code{color:#f2a900;background:#ffffff14;border-radius:5px;padding:.12em .4em;font-size:.88em}