/* REFRM v158 — Studio-grade visual system.
   A layered graphite, brushed-silver and ice-light direction. Pure presentation overrides;
   existing IDs, controls and event wiring remain intact. */
:root {
  --rf-bg:#07090d;
  --rf-bg-2:#0a0d12;
  --rf-surface:#10141b;
  --rf-surface-2:#151a22;
  --rf-surface-3:#1b222c;
  --rf-line:rgba(223,232,244,.085);
  --rf-line-strong:rgba(223,232,244,.17);
  --rf-text:#f3f6fa;
  --rf-muted:#9aa7b7;
  --rf-faint:#697687;
  --rf-accent:#c1d8f2;
  --rf-accent-2:#80adff;
  --rf-glow:radial-gradient(70% 80% at 50% 0%,rgba(121,161,213,.15),transparent 72%);
  --rf-card-glow:radial-gradient(130% 110% at 50% 0%,rgba(154,185,223,.095),rgba(90,130,180,.025) 55%,transparent 80%);
  --rf-warm-glow:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 44%),radial-gradient(85% 65% at 90% 0%,rgba(112,155,215,.07),transparent 74%);
  --rf-r-sm:10px;
  --rf-r-md:15px;
  --rf-r-card:21px;
  --rf-r-panel:28px;
  --rf-shadow-1:0 2px 5px rgba(0,0,0,.2);
  --rf-shadow-2:0 24px 70px rgba(0,0,0,.48);
  --rf-ease:cubic-bezier(.2,.72,.22,1);
  --rf-dur:.24s;
}
:root:not([data-theme="light"]) { --acc:#cad7e7; --acc-hi:#fff; --acc-soft:rgba(184,209,240,.10); --acc-2:#a0b5d0; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; text-rendering:optimizeLegibility; }
::selection { background:rgba(155,190,232,.28); color:#fff; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:2px solid rgba(174,207,248,.9); outline-offset:3px; }
:where(button,.rf-btn,.rf-cta,.chipbtn,.project-card,.studio-recent-card,.dash-card,.nav-link) { -webkit-tap-highlight-color:transparent; }
:where(button,.rf-btn,.chipbtn,.button,.ib,.iconbtn,.ghost,.primary) { transition:transform .22s var(--rf-ease),background-color .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease,opacity .22s ease; }
:where(button,.rf-btn,.chipbtn,.button,.ib,.iconbtn,.ghost,.primary):active:not(:disabled) { transform:translateY(1px) scale(.985); }
:where(input,textarea,select) { accent-color:#a9c9ef; }

/* --------------------- upload / studio entry --------------------- */
#landing {
  isolation:isolate;
  color:#f4f7fb;
  background:
    radial-gradient(ellipse 850px 540px at 9% 7%,rgba(72,98,136,.17),transparent 72%),
    radial-gradient(ellipse 880px 600px at 88% 12%,rgba(116,145,179,.095),transparent 70%),
    radial-gradient(ellipse 900px 620px at 54% 100%,rgba(88,116,157,.08),transparent 72%),
    linear-gradient(132deg,#07090d 0%,#0a0e14 48%,#080b10 100%);
  --tx:#f4f7fb; --tx2:#a8b4c3; --bg:#07090d; --bg2:#10151d; --bd:rgba(216,230,249,.14);
}
#landing::before,#landing::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; }
#landing::before {
  background:radial-gradient(600px 460px at 54% 32%,rgba(111,150,202,.09),transparent 70%),radial-gradient(420px 360px at 10% 80%,rgba(255,255,255,.025),transparent 72%);
  animation:rfAtmosphere 24s ease-in-out infinite alternate;
}
#landing::after {
  inset:-1px;
  background-image:linear-gradient(rgba(204,220,240,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(204,220,240,.024) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 74%);
  opacity:.38;
}
@keyframes rfAtmosphere { from{transform:translate3d(-1.5%,0,0) scale(1)} to{transform:translate3d(1.5%,-1%,0) scale(1.04)} }
.land-top {
  position:sticky; top:0; z-index:100; min-height:78px;
  padding:13px clamp(18px,4.5vw,72px);
  border-bottom:1px solid rgba(220,232,248,.08);
  background:rgba(7,9,13,.72);
  backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.land-brand { gap:12px; font-size:17px; letter-spacing:.18em; font-weight:850; color:#f1f5fb; }
.land-brand .logo { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.67); border-radius:12px; background:linear-gradient(145deg,#fff 0%,#d0d7e2 42%,#697587 100%); color:#0d1117; font-size:21px; font-weight:900; letter-spacing:-.06em; box-shadow:0 7px 24px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.9); }
.land-user { gap:9px; }
.land-user .chipbtn { min-height:39px; padding:0 16px; border-radius:999px; border:1px solid rgba(223,234,249,.15); color:#e8eef7; background:rgba(255,255,255,.035); font-size:12px; font-weight:650; }
.land-user .chipbtn:hover { border-color:rgba(236,244,255,.38); background:rgba(255,255,255,.08); transform:translateY(-1px); }
.land-main {
  width:min(100%,1530px); max-width:1530px;
  grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);
  align-items:center; gap:clamp(32px,5vw,86px);
  padding:clamp(40px,6vh,78px) clamp(22px,5.2vw,82px) 46px;
}
.land-story { animation:rfEnter .8s var(--rf-ease) both; }
.land-eyebrow { gap:11px; margin-bottom:22px; color:#d4deeb; font-size:10px; letter-spacing:.19em; font-weight:800; }
.eyebrow-dot { width:7px; height:7px; background:#dce8f8; box-shadow:0 0 0 4px rgba(195,219,246,.09),0 0 18px rgba(174,207,248,.5); }
.land-eyebrow i { background:linear-gradient(90deg,rgba(216,230,248,.45),transparent); width:30px; }
.eyebrow-muted { color:#78889b; }
.land-story h1 {
  max-width:760px; margin:0; color:#f4f7fb; text-align:left;
  font-family:Montserrat,Inter,sans-serif; font-size:clamp(48px,5.65vw,88px);
  line-height:.99; letter-spacing:-.078em; font-weight:900; text-wrap:balance;
}
.land-story h1 span {
  display:inline-block; padding:.07em 0 .12em;
  background:linear-gradient(105deg,#f9fbff 0%,#bdcadb 32%,#8398b3 70%,#dce5f1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 12px 34px rgba(152,182,222,.10));
}
.land-sub { max-width:550px; margin:21px 0 0; color:#a6b2c1; font-size:clamp(15px,1.32vw,18px); line-height:1.8; letter-spacing:-.012em; }
.land-benefits { gap:8px; margin-top:25px; }
.land-benefits span { padding:9px 12px; border:1px solid rgba(213,228,247,.115); border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); color:#c6d1df; font-size:11px; box-shadow:inset 0 1px rgba(255,255,255,.025); transition:transform .25s var(--rf-ease),border-color .25s ease,background .25s ease; }
.land-benefits span:hover { transform:translateY(-2px); border-color:rgba(220,234,252,.27); background:rgba(255,255,255,.065); }
.land-benefits svg { color:#d8e5f6; }
.land-showcase { width:min(100%,550px); height:280px; margin:35px 0 0 0; transform:none; }
.showcase-window { border-radius:20px; border-color:rgba(218,231,249,.19); background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 42%),#0d1219; box-shadow:0 28px 80px rgba(0,0,0,.40),inset 0 1px rgba(255,255,255,.12); }
.showcase-head { background:rgba(255,255,255,.025); border-bottom-color:rgba(255,255,255,.075); }
.showcase-head>span:nth-child(2) { color:#acbacb; letter-spacing:.15em; }
.showcase-live { color:#c5d9f1!important; }
.showcase-live i { background:#c6e3ff; box-shadow:0 0 13px rgba(169,210,255,.7); }
.showcase-stage { background:radial-gradient(ellipse at 50% 50%,#273345 0%,#121923 58%,#090c12 100%); }
.scene-light { background:linear-gradient(110deg,transparent 0 26%,rgba(174,200,230,.16) 46%,transparent 65%); }
.scene-glow { background:radial-gradient(ellipse at 50% 10%,rgba(178,207,244,.18),transparent 60%); }
.scene-person .person-head { box-shadow:0 0 40px rgba(193,214,241,.15); }
.scene-frame { border-color:rgba(230,240,252,.86); box-shadow:0 0 0 999px rgba(0,0,0,.28),0 0 24px rgba(178,206,241,.12); }
.scene-caption { color:#f5f8fc; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.scene-caption b { color:#c9ddf4; }
.scene-tag { border-color:rgba(200,223,248,.18); background:rgba(11,17,25,.78); color:#d9e9fb; backdrop-filter:blur(14px); }
.float-card { background:rgba(17,23,32,.84); border-color:rgba(223,235,250,.17); box-shadow:0 18px 46px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.float-card:hover { transform:translateY(-4px) rotate(0)!important; border-color:rgba(226,239,255,.32); }
.float-icon { background:linear-gradient(145deg,rgba(214,230,250,.16),rgba(150,178,215,.06)); color:#d8e8fd; }
.float-check { color:#cde4ff; }
.float-clips .clip-stack i { background:linear-gradient(145deg,#dbe6f4,#8e9caf); border-color:#a2b3c8; }
.land-workspace {
  align-self:center; position:relative; padding:clamp(19px,2.2vw,28px);
  border:1px solid rgba(224,236,252,.16); border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.012) 45%),rgba(14,19,27,.89);
  box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter:blur(26px) saturate(125%); -webkit-backdrop-filter:blur(26px) saturate(125%);
  animation:rfEnter .85s .08s var(--rf-ease) both;
}
.land-workspace::before { content:""; position:absolute; inset:0 12% auto; height:1px; background:linear-gradient(90deg,transparent,rgba(224,237,255,.7),transparent); opacity:.55; pointer-events:none; }
.workspace-intro { margin:0 2px 16px; color:#dce5f1; }
.workspace-kicker { color:#a6b4c6; font-size:9px; letter-spacing:.17em; font-weight:800; }
.workspace-number { color:#8b9aaf; font-size:10px; font-variant-numeric:tabular-nums; }
.workspace-number i { background:#74869d; }
.land-drop { padding:20px; border-radius:19px; border:1px solid rgba(222,235,251,.14); background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 62%),rgba(9,13,19,.75); box-shadow:inset 0 1px rgba(255,255,255,.045); gap:12px; transition:transform .32s var(--rf-ease),border-color .3s,box-shadow .3s,background .3s; }
.land-drop::before { background:linear-gradient(90deg,transparent,rgba(228,239,253,.72),rgba(126,173,236,.55),transparent); opacity:.3; }
.land-drop:hover { border-color:rgba(221,236,254,.25); box-shadow:inset 0 1px rgba(255,255,255,.065),0 20px 55px rgba(0,0,0,.2); }
.land-drop.over { border-color:rgba(210,231,255,.68); background:linear-gradient(180deg,rgba(170,207,251,.075),transparent 65%),rgba(9,13,19,.86); box-shadow:0 0 0 4px rgba(187,216,250,.06),0 24px 60px rgba(0,0,0,.3); }
.src-tabs { gap:5px; padding:4px; border:1px solid rgba(220,233,249,.08); border-radius:999px; background:rgba(255,255,255,.025); }
.src-tabs button { min-height:35px; padding:0 14px; border-radius:999px; color:#8795a7; transition:color .2s,background .2s,box-shadow .2s,transform .2s; }
.src-tabs button[aria-selected="true"] { color:#111720; background:linear-gradient(140deg,#f7f9fc,#c4d0df); box-shadow:0 4px 16px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.9); }
.src-tabs button[aria-selected="true"] svg { stroke:#111720; }
#srcfile { padding:clamp(18px,2vw,27px) 14px!important; gap:10px!important; }
#srcfile .big-ic { width:42px!important; height:42px!important; padding:10px; border:1px solid rgba(218,234,255,.14); border-radius:14px; background:linear-gradient(145deg,rgba(204,225,251,.13),rgba(255,255,255,.035)); color:#d9e9fc!important; margin:0 0 4px!important; }
#srcfile b { font-size:15px; letter-spacing:-.02em; color:#f4f7fb; }
#srcfile .dim { color:#7f8da0; font-size:11px; }
#srcfile .hint { color:#748295; font-size:10px; }
#landpick,.land-workspace .primary { border:1px solid rgba(255,255,255,.85); background:linear-gradient(145deg,#fbfcfe,#c9d4e3); color:#11161d; box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.95); }
#landpick:hover,.land-workspace .primary:hover { background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 4px rgba(209,227,249,.06); transform:translateY(-2px); }
.land-workspace .ghost { border-color:rgba(220,233,248,.12); color:#c8d3e1; background:rgba(255,255,255,.025); }
.land-workspace .ghost:hover { border-color:rgba(220,233,248,.25); background:rgba(255,255,255,.06); }
.land-workspace .set { scrollbar-color:rgba(211,226,246,.22) transparent; }
.land-workspace .set-h { color:#c5d0df; font-size:10px; letter-spacing:.12em; }
.land-workspace .seg4 button,.land-workspace .priority-choice { border-radius:12px; border-color:rgba(215,231,250,.105); background:rgba(255,255,255,.024); transition:transform .2s var(--rf-ease),border-color .2s,background .2s,box-shadow .2s; }
.land-workspace .seg4 button:hover,.land-workspace .priority-choice:hover { transform:translateY(-2px); border-color:rgba(216,233,253,.27); }
.land-workspace .seg4 button[aria-checked="true"],.land-workspace .priority-choice.on { border-color:rgba(200,221,248,.42); background:linear-gradient(145deg,rgba(207,226,250,.13),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.045); }
.land-workspace .tog { border-color:rgba(215,231,250,.1); background:rgba(255,255,255,.02); border-radius:13px; }
.land-workspace .tog:hover { background:rgba(255,255,255,.045); border-color:rgba(215,231,250,.18); }
.land-workspace select,.land-workspace input:not([type=checkbox]):not([type=radio]) { border-color:rgba(215,231,250,.14); background:#0c1118; color:#f1f5fa; border-radius:11px; }
.land-ready,.land-proc { border-color:rgba(218,232,249,.12); border-radius:17px; background:linear-gradient(145deg,rgba(255,255,255,.04),transparent),rgba(9,13,19,.76); }
.land-bar { border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.land-bar i { background:linear-gradient(90deg,#7e9fc9,#ecf4ff,#92b5e4); box-shadow:0 0 18px rgba(153,197,252,.32); }
.land-error { color:#ffb9bf; }

/* Recent work: a real library preview below the source chooser. */
.studio-recent-projects { width:min(1420px,calc(100% - 64px)); margin:28px auto 66px; padding-top:4px; }
.studio-recent-head { margin-bottom:18px; }
.studio-recent-head h2 { font-family:Montserrat,Inter,sans-serif; font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.06em; }
.studio-recent-head p { color:#8491a2; font-size:13px; }
.studio-recent-head .ghost { border:1px solid rgba(216,230,248,.13); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,.025); color:#d0d9e6; }
.studio-recent-head .ghost:hover { border-color:rgba(219,234,253,.3); background:rgba(255,255,255,.07); }
.studio-recent-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.studio-recent-card { border:1px solid rgba(218,231,248,.11); border-radius:19px; background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 42%),#10151d; box-shadow:0 10px 35px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.035); }
.studio-recent-card:hover { transform:translateY(-5px); border-color:rgba(220,235,254,.27); box-shadow:0 25px 60px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07); }
.studio-recent-thumb { aspect-ratio:16/9; overflow:hidden; position:relative; background:#080b10; isolation:isolate; }
.studio-recent-thumb img { transition:transform .7s var(--rf-ease),filter .5s; }
.studio-recent-card:hover .studio-recent-thumb img { transform:scale(1.055); filter:saturate(1.05); }
.studio-recent-thumb:after { background:linear-gradient(180deg,rgba(4,7,11,.22),transparent 32%,rgba(4,7,11,.8)); }
.studio-recent-badge { border-radius:999px; padding:5px 9px; border-color:rgba(255,255,255,.16); background:rgba(8,11,16,.62); font-size:9px; letter-spacing:.1em; backdrop-filter:blur(12px); }
.studio-recent-copy { padding:15px 16px 17px; }
.studio-recent-copy h3 { font-size:13px; letter-spacing:-.015em; }
.studio-recent-copy p { color:#8390a0; }
.studio-recent-empty { border-radius:18px; background:rgba(255,255,255,.018); border-color:rgba(218,232,250,.12); }

/* -------------------------- editor -------------------------- */
#app { background:#080a0e; grid-template-rows:66px minmax(0,1fr) var(--layout-timeline); }
#top { position:relative; z-index:30; padding:0 18px; gap:12px; background:rgba(9,12,17,.88); border-bottom:1px solid rgba(222,234,250,.095); backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow:0 8px 28px rgba(0,0,0,.14); }
.brand { gap:11px; }
.brand-mark { width:35px; height:35px; border:1px solid rgba(255,255,255,.75); border-radius:11px; background:linear-gradient(145deg,#fff,#cad4e1 50%,#778496); color:#0a0d12; box-shadow:0 5px 18px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.92); }
#top .logo { font-size:13px; letter-spacing:.22em; font-weight:850; }
#top button,#top a { transition:transform .2s var(--rf-ease),border-color .2s,background .2s,color .2s,box-shadow .2s; }
#top button:hover:not(:disabled),#top a:hover { transform:translateY(-1px); }
#top .ib { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.025); }
#rail { padding:13px 8px; gap:7px; background:linear-gradient(180deg,#0e1218,#0b0e13); border-right:1px solid rgba(224,236,250,.085); }
#rail button { min-height:63px; border-radius:15px; color:#8492a4; font-size:10px; font-weight:600; transition:transform .22s var(--rf-ease),background .22s,border-color .22s,color .22s,box-shadow .22s; }
#rail button:hover:not(.on) { transform:translateY(-2px); background:rgba(255,255,255,.04); color:#e0e8f2; border-color:rgba(255,255,255,.055); }
#rail button.on { border-color:rgba(213,231,253,.14); background:linear-gradient(130deg,rgba(194,216,244,.12),rgba(194,216,244,.035)); color:#f0f6ff; box-shadow:inset 0 1px rgba(255,255,255,.045),0 4px 16px rgba(0,0,0,.18); }
#rail button.on svg { filter:drop-shadow(0 0 8px rgba(171,205,248,.18)); }
#left,#right { background:linear-gradient(180deg,rgba(17,22,30,.98),rgba(12,16,22,.98)); border-color:rgba(221,234,250,.085); box-shadow:inset 0 1px rgba(255,255,255,.018); }
#left { box-shadow:8px 0 32px rgba(0,0,0,.08),inset -1px 0 rgba(255,255,255,.015); }
#right { box-shadow:-8px 0 32px rgba(0,0,0,.08),inset 1px 0 rgba(255,255,255,.015); }
#left .phead,#right .phead,.phead { border-bottom-color:rgba(223,235,250,.085); background:rgba(255,255,255,.012); }
#left .phead,#right .phead { min-height:46px; }
#inspect { padding:9px 17px 28px; }
.isec { border-bottom-color:rgba(223,235,250,.07); border-radius:13px!important; transition:background .22s ease; }
.isec:hover { background:rgba(255,255,255,.012); }
.isec summary { padding:12px 5px; color:#e1e9f3; font-size:12px; letter-spacing:.005em; }
.isec summary .chev { color:#8a9aaf; }
.isec-body { padding:4px 5px 14px; }
.sec { border-color:rgba(223,235,250,.07); }
.lbl,.set-h { color:#aab7c8; font-size:10px; letter-spacing:.12em; font-weight:800; }
label.row,label.fld,label.sl { color:#b8c4d3; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea {
  border-color:rgba(218,231,249,.13); border-radius:10px; background:rgba(6,10,15,.65); color:#f1f5fa;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,select:focus,textarea:focus { border-color:rgba(178,210,249,.48); box-shadow:0 0 0 3px rgba(167,201,245,.085); background:rgba(8,13,20,.96); }
input::placeholder,textarea::placeholder { color:#677587; }
button.primary,.primary { background:linear-gradient(145deg,#f9fbff,#c7d4e4); border-color:rgba(255,255,255,.85); color:#111720; box-shadow:0 5px 18px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.95); }
button.primary:hover:not(:disabled),.primary:hover:not(:disabled) { background:#fff; box-shadow:0 8px 25px rgba(0,0,0,.24),0 0 0 3px rgba(207,226,250,.055); transform:translateY(-1px); }
button.ghost,.ghost { border-color:rgba(219,232,249,.12); background:rgba(255,255,255,.026); color:#c5d0df; }
button.ghost:hover:not(:disabled),.ghost:hover:not(:disabled) { border-color:rgba(219,232,249,.24); background:rgba(255,255,255,.06); color:#f3f7fc; }
button.danger,.danger { border-radius:999px; }
#player { border:0; background:radial-gradient(ellipse at 50% 36%,rgba(74,100,139,.16),transparent 56%),linear-gradient(180deg,#0a0d12,#080a0e); }
.phead { background:rgba(255,255,255,.014); }
.ptitle { font-size:12px; font-weight:700; letter-spacing:.025em; }
#stage { background:radial-gradient(ellipse at 50% 44%,#151b24 0%,#090c11 68%); }
#cvwrap { border:1px solid rgba(223,236,253,.13); border-radius:10px; box-shadow:0 30px 75px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.018); }
.pbar { background:rgba(10,13,18,.92); border-top-color:rgba(221,233,250,.09); backdrop-filter:blur(18px); }
#play { box-shadow:0 7px 24px rgba(174,204,242,.1),inset 0 1px rgba(255,255,255,.9); }
#tl { border-top:1px solid rgba(228,238,251,.12); background:linear-gradient(180deg,#0d1117,#090c11); box-shadow:0 -14px 42px rgba(0,0,0,.22); }
#tlbar { min-height:47px; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); border-bottom-color:rgba(225,237,252,.07); }
#tlbar button { border-radius:10px; }
#tlhead { background:rgba(255,255,255,.016); border-right-color:rgba(223,235,250,.08); }
#tlscroll { background-color:#090d13; }
#ruler { border-bottom-color:rgba(225,237,252,.09); }
.tick { color:#718095; }
#track,#wtrack,#ctrack,#ttrack,#camtrack { filter:saturate(.88); }
.dlg,dialog { background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 36%),#11161e; color:#f1f5fa; border:1px solid rgba(221,234,251,.17); box-shadow:0 30px 100px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.05); }
.dlg::backdrop,dialog::backdrop { background:rgba(2,4,7,.7); backdrop-filter:blur(9px); }
.dlg-head { border-bottom-color:rgba(222,234,249,.09); }
.dlg-actions { gap:9px; }
.toast { border:1px solid rgba(221,234,249,.16); border-radius:13px; background:rgba(19,25,34,.94); box-shadow:0 18px 55px rgba(0,0,0,.35); backdrop-filter:blur(20px); }

/* ----------------------- projects & clip detail ----------------------- */
#projects-page { background:radial-gradient(ellipse at 50% 0%,rgba(92,124,168,.12),transparent 45%),#080a0e; }
.projects-topbar { background:rgba(8,11,16,.8); border-bottom-color:rgba(223,235,250,.09); backdrop-filter:blur(24px); }
.projects-context { color:#8f9fb3; letter-spacing:.16em; }
.projects-content { width:min(1440px,calc(100% - 64px)); padding:34px 0 70px; }
.projects-heading-row { margin-bottom:25px; }
.projects-eyebrow { color:#b3c1d2; font-size:10px; letter-spacing:.18em; }
.projects-heading-row h1 { font-family:Montserrat,Inter,sans-serif; font-size:clamp(36px,4.2vw,56px); letter-spacing:-.075em; font-weight:850; line-height:1.05; }
.projects-heading-row h1 .projects-count { vertical-align:middle; margin-left:12px; padding:6px 10px; border-radius:999px; font-family:Inter,sans-serif; font-size:12px; letter-spacing:0; color:#bac8da; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); }
.projects-lede { max-width:720px; color:#919fb0; font-size:13px; line-height:1.75; }
.projects-toolbar { padding:10px; margin:20px 0 18px; border:1px solid rgba(222,234,250,.1); border-radius:17px; background:rgba(255,255,255,.025); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.projects-search { border-color:rgba(221,234,249,.11); border-radius:12px; background:rgba(4,7,11,.5); }
.projects-search:focus-within { border-color:rgba(181,210,246,.44); box-shadow:0 0 0 3px rgba(159,198,246,.075); }
.projects-grid { gap:16px; }
.project-card { overflow:hidden!important; isolation:isolate; border:1px solid rgba(222,235,251,.105); border-radius:19px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 46%),#10151c; box-shadow:0 12px 34px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.03); transition:transform .28s var(--rf-ease),border-color .28s,box-shadow .28s; }
.project-card:hover { transform:translateY(-4px); border-color:rgba(221,235,253,.26); box-shadow:0 24px 55px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06); }
.project-thumb { overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at center,rgba(138,166,206,.1),transparent 70%),#070a0e; }
.project-thumb>img { object-fit:cover; transition:transform .6s var(--rf-ease),filter .6s; }
.project-card:hover .project-thumb>img { transform:scale(1.035); filter:saturate(1.05); }
.project-card-body { padding:16px; }
.project-card-title-row h3 { font-size:14px; letter-spacing:-.025em; line-height:1.35; }
.project-card-file { font-size:11px; color:#8290a2; }
.project-card-meta { color:#9eabbc; font-size:10px; }
.project-card-actions { border-top-color:rgba(221,234,249,.075); padding-top:12px; }
.project-card-actions button { min-height:36px; border-radius:999px; }
.project-card-actions .primary { background:linear-gradient(145deg,#f9fbff,#cad7e5); color:#10151d; }
.project-expired-overlay { backdrop-filter:blur(8px); background:rgba(5,8,12,.62); }
.project-thumb-play { border:1px solid rgba(255,255,255,.45); background:rgba(11,16,23,.58); box-shadow:0 8px 30px rgba(0,0,0,.28); backdrop-filter:blur(12px); transition:transform .24s var(--rf-ease),background .24s; }
.project-card:hover .project-thumb-play { transform:translate(-50%,-50%) scale(1.06); background:rgba(25,35,49,.78); }
.projects-empty { border:1px dashed rgba(221,234,250,.17); border-radius:23px; background:rgba(255,255,255,.018); }
.projects-privacy-note { color:#8a98a9; border-top-color:rgba(223,235,250,.08); }
.clip-watch-page { animation:rfWatchEnter .45s var(--rf-ease) both; }
.clip-watch-top { margin-bottom:22px; }
.clip-watch-layout { gap:24px; }
.clip-watch-player-wrap { border-radius:23px; border-color:rgba(222,235,251,.14); background:radial-gradient(ellipse at 50% 0%,rgba(114,149,195,.14),transparent 55%),#070a0f; box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04); }
.clip-watch-player-wrap video { border:1px solid rgba(225,237,252,.09); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.clip-watch-info { border-radius:23px; border-color:rgba(222,235,251,.13); background:linear-gradient(145deg,rgba(255,255,255,.055),transparent 40%),#11161d; box-shadow:0 18px 55px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.04); }
#clip-watch-heading { font-family:Montserrat,Inter,sans-serif; font-size:clamp(24px,2.8vw,34px); letter-spacing:-.06em; line-height:1.13; }
.clip-meta-label { color:#b8c6d6; }
.clip-meta-label input,.clip-meta-label textarea { border-radius:12px; }
.clip-watch-actions #clip-watch-download { background:linear-gradient(145deg,#f9fbff,#c9d6e5); box-shadow:0 8px 25px rgba(0,0,0,.18); }

/* ----------------------- creator account / dashboard ----------------------- */
.rf-app { background:radial-gradient(ellipse at 72% -10%,rgba(93,125,171,.12),transparent 44%),#080a0e; }
.rf-side { background:linear-gradient(180deg,rgba(13,17,24,.98),rgba(8,10,14,.99)); border-right-color:rgba(220,233,250,.085); box-shadow:8px 0 30px rgba(0,0,0,.1); }
.rf-logo>b,.rf-side .rf-logo>b { background:linear-gradient(145deg,#fff,#bdc9d8 54%,#687587); color:#0b0f15; border:1px solid rgba(255,255,255,.74); border-radius:11px; box-shadow:0 6px 22px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.8); }
.rf-cta { background:linear-gradient(145deg,#f7f9fc,#c8d5e5); color:#10151c; box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.9); }
.rf-cta:hover { transform:translateY(-2px); box-shadow:0 13px 32px rgba(0,0,0,.3); }
.rf-side nav a { border-radius:12px; transition:transform .22s var(--rf-ease),background .22s,color .22s,border-color .22s; }
.rf-side nav a:hover { background:rgba(255,255,255,.045); transform:translateX(3px); }
.rf-side nav a[aria-current="page"] { border:1px solid rgba(221,234,250,.1); background:linear-gradient(105deg,rgba(194,216,244,.11),rgba(255,255,255,.025)); color:#eef5ff; }
.rf-main .topbar { background:rgba(8,10,14,.75); border-bottom-color:rgba(222,234,249,.085); backdrop-filter:blur(22px); }
.rf-main .brand-mark { background:linear-gradient(145deg,#fff,#c0ccdb 58%,#738196); color:#0b0f15; }
.rf-main main { max-width:1500px; }
.welcome h1 { font-family:Montserrat,Inter,sans-serif; font-size:clamp(34px,4vw,54px); letter-spacing:-.07em; line-height:1.03; }
.welcome h1 span { background:linear-gradient(105deg,#fff,#a9bad0 74%,#e5edf7); -webkit-background-clip:text; color:transparent; }
.welcome-mark { border:1px solid rgba(222,234,250,.13); background:radial-gradient(ellipse at 50% 20%,rgba(158,190,231,.15),transparent 60%),linear-gradient(145deg,#161e29,#0a0d12); box-shadow:0 25px 65px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.07); }
.rf-quick,.stats article,.dash-card,.panel,.support-section,.rf-stat-card { border-color:rgba(221,233,249,.095); background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 52%),rgba(15,20,28,.86); box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025); }
.stats article,.dash-card { border-radius:19px; transition:transform .25s var(--rf-ease),border-color .25s,box-shadow .25s; }
.dash-card:hover { transform:translateY(-4px); border-color:rgba(220,234,252,.25); box-shadow:0 20px 48px rgba(0,0,0,.25); }
.card-icon { border-radius:13px; background:linear-gradient(145deg,rgba(213,229,250,.12),rgba(255,255,255,.025)); border-color:rgba(220,233,249,.12); color:#dbe8fa; }
.rf-pill-input { border-radius:999px; background:rgba(6,9,14,.76); border-color:rgba(220,232,248,.12); }
.rf-pill-input:focus-within { border-color:rgba(188,213,246,.42); box-shadow:0 0 0 4px rgba(171,204,246,.08); }
.rf-btn--primary,.button-primary { background:linear-gradient(145deg,#fafcff,#c7d4e3); color:#10151d; border-color:rgba(255,255,255,.88); box-shadow:0 7px 20px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.94); }
.rf-btn--primary:hover,.button-primary:hover { transform:translateY(-1px); box-shadow:0 12px 27px rgba(0,0,0,.24); }
.section-title h2,.section-title h1 { letter-spacing:-.05em; }

/* ----------------------------- authentication ----------------------------- */
.auth-wrap { background:radial-gradient(ellipse 700px 520px at 20% 32%,rgba(94,129,176,.12),transparent 72%),radial-gradient(ellipse 740px 560px at 95% 10%,rgba(133,157,190,.08),transparent 72%),#080a0e!important; }
.auth-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(213,229,249,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(213,229,249,.027) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(180deg,#000,transparent 80%); }
.auth-wrap .auth-brand { z-index:2; }
.auth-wrap .auth-logo .mark { border:1px solid rgba(255,255,255,.76); background:linear-gradient(145deg,#fff,#c5d1df 55%,#778597); }
.auth-wrap .auth-card { position:relative; border-color:rgba(221,234,250,.14); background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 48%),rgba(15,20,28,.93); box-shadow:0 35px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(24px); }
.auth-wrap .auth-card h2 { font-family:Montserrat,Inter,sans-serif; letter-spacing:-.055em; }
.auth-wrap .gbtn,.auth-wrap .auth-submit { border-radius:999px; }
.auth-wrap .gbtn { border-color:rgba(221,234,250,.15); background:rgba(255,255,255,.035); transition:background .22s,border-color .22s,transform .22s,box-shadow .22s; }
.auth-wrap .gbtn:hover { background:rgba(255,255,255,.07); border-color:rgba(221,234,250,.28); transform:translateY(-1px); }
.auth-wrap .auth-submit { background:linear-gradient(145deg,#f9fbff,#c5d3e3); color:#10151c; border-color:rgba(255,255,255,.88); box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.92); }
.auth-wrap .auth-field input { border-radius:12px; }
.auth-wrap .auth-field input:focus { box-shadow:0 0 0 4px rgba(176,209,250,.09); }

/* ------------------------------ admin ------------------------------ */
.admin-shell { background:radial-gradient(ellipse at 72% -10%,rgba(100,131,178,.12),transparent 43%),#080a0e; }
.sidebar { background:linear-gradient(180deg,rgba(14,18,26,.98),rgba(7,9,13,.99)); border-right-color:rgba(220,233,250,.085); }
.sidebar .brand-mark { border-color:rgba(255,255,255,.6); background:linear-gradient(145deg,#fff,#bac7d7 55%,#6d7b8e); box-shadow:inset 0 1px rgba(255,255,255,.9),0 6px 20px rgba(0,0,0,.3); }
.nav-link { border-radius:12px; }
.nav-link:hover { transform:translateX(3px); }
.nav-link.active { color:#f3f7fc; border-color:rgba(220,234,252,.11); background:linear-gradient(95deg,rgba(187,212,245,.12),rgba(255,255,255,.02)); box-shadow:inset 2px 0 #d5e5f8; }
.admin-shell .topbar { background:rgba(8,10,14,.78); border-bottom-color:rgba(221,234,249,.08); backdrop-filter:blur(22px); }
.admin-shell .panel,.admin-shell .stat-card,.admin-shell .info-strip { border-color:rgba(221,234,249,.09); background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.008) 45%),#10151c; box-shadow:0 12px 32px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025); }
.admin-shell .button-primary,.admin-shell .button.button-primary { background:linear-gradient(145deg,#f9fbff,#c7d4e4); color:#10151d; border-color:rgba(255,255,255,.86); }
.admin-shell .search-box,.admin-shell .admin-filter,.admin-shell input,.admin-shell select,.admin-shell textarea { border-radius:10px; }

/* High-end motion: calm, short, reduced when the OS asks. */
@keyframes rfEnter { from{opacity:0;transform:translateY(15px) scale(.992)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes rfWatchEnter { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
@keyframes rfSheen { 0%{transform:translateX(-130%)} 65%,100%{transform:translateX(130%)} }
.land-workspace::after { content:""; position:absolute; top:0; left:-40%; width:28%; height:1px; background:linear-gradient(90deg,transparent,rgba(240,247,255,.8),transparent); transform:translateX(-130%); animation:rfSheen 8s ease-in-out infinite; pointer-events:none; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .project-card,.studio-recent-card,.dash-card,.rf-cta,.land-workspace,.land-drop { will-change:transform; }
  .land-pct { text-shadow:0 0 18px rgba(174,208,249,.18); }
}
@media (max-width:1100px) {
  .land-main { grid-template-columns:minmax(0,1fr) minmax(360px,.94fr); gap:30px; padding-inline:28px; }
  .land-story h1 { font-size:clamp(45px,5.4vw,68px); }
  .land-showcase { height:250px; }
  .projects-content { width:calc(100% - 44px); }
}
@media (max-width:860px) {
  .land-top { min-height:68px; }
  .land-main { grid-template-columns:minmax(0,1fr); max-width:720px; padding:38px 24px 34px; gap:35px; }
  .land-story h1 { font-size:clamp(48px,8.5vw,74px); }
  .land-sub { max-width:610px; }
  .land-showcase { margin:26px auto 0; height:250px; width:min(100%,530px); }
  .land-workspace { width:100%; max-width:660px; justify-self:center; }
  .studio-recent-projects { width:calc(100% - 40px); margin-top:24px; }
  .studio-recent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Keep the existing mobile editor's bottom tool rail + slide-over panels intact. */
  #app { grid-template-rows:auto minmax(0,1fr) var(--layout-timeline) calc(66px + env(safe-area-inset-bottom,0px)); }
  #rail { z-index:30; }
}
@media (max-width:600px) {
  .land-top { padding:11px 16px; }
  .land-brand { gap:9px; font-size:15px; }
  .land-brand .logo { width:34px; height:34px; border-radius:10px; }
  .land-user .chipbtn { min-height:36px; padding:0 12px; font-size:11px; }
  .land-main { padding:34px 16px 27px; gap:28px; }
  .land-eyebrow { margin-bottom:16px; font-size:8.5px; letter-spacing:.13em; gap:8px; }
  .land-eyebrow i { width:16px; }
  .land-story h1 { font-size:clamp(43px,12vw,60px); line-height:1; letter-spacing:-.075em; }
  .land-sub { margin-top:17px; font-size:14px; line-height:1.75; }
  .land-benefits { gap:6px; margin-top:18px; }
  .land-benefits span { padding:7px 9px; font-size:9px; }
  .land-showcase { height:205px; margin-top:21px; }
  .showcase-window { border-radius:15px; }
  .float-card { padding:9px; border-radius:12px; }
  .float-card b { font-size:10px; }.float-card>div>span { font-size:8px; }
  .float-caption { left:-2px; bottom:-10px; }.float-clips { right:-2px; top:-15px; }
  .land-workspace { padding:13px; border-radius:21px; }
  .workspace-intro { margin-bottom:12px; }
  .workspace-kicker { font-size:8px; letter-spacing:.12em; }
  .land-drop { padding:11px; border-radius:15px; gap:10px; }
  .src-tabs button { min-height:34px; padding:0 11px; font-size:11px; }
  #srcfile { padding:16px 8px!important; }
  #srcfile .big-ic { width:37px!important; height:37px!important; }
  #srcfile b { font-size:13px; }
  #landpick { min-height:39px; padding-inline:18px; font-size:12px; }
  .land-workspace .set { max-height:46vh; }
  .studio-recent-projects { width:calc(100% - 32px); margin:22px auto 38px; }
  .studio-recent-head { align-items:flex-start; gap:12px; }
  .studio-recent-head h2 { font-size:23px; }
  .studio-recent-head p { max-width:250px; font-size:11px; }
  .studio-recent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .studio-recent-card { border-radius:14px; }
  .studio-recent-copy { padding:10px; }
  .studio-recent-copy h3 { font-size:11px; min-height:2.6em; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .studio-recent-copy p { font-size:9px; }
  .studio-recent-badge { top:7px; left:7px; font-size:7px; }
  .projects-content { width:calc(100% - 28px); padding:23px 0 44px; }
  .projects-heading-row h1 { font-size:38px; }
  .projects-toolbar { display:grid; grid-template-columns:1fr; gap:9px; }
  .projects-grid { gap:10px; }
  .project-card-body { padding:12px; }
  .project-card-title-row h3 { font-size:12px; }
  .project-card-actions { flex-wrap:wrap; gap:6px; }
  .project-card-actions button { min-height:32px; font-size:10px; }
  .clip-watch-layout { gap:12px; }
  .clip-watch-info { padding:16px; border-radius:18px; }
  .clip-watch-player-wrap { padding:7px; border-radius:18px; }
  .clip-watch-player-wrap video { max-height:56vh; }
  .clip-watch-actions button { flex:1; justify-content:center; }
  #top { padding-inline:10px; gap:6px; }
  #top .logo { font-size:11px; }
  .brand-mark { width:31px; height:31px; }
  #rail { padding:8px 4px; }
  #rail button { min-height:54px; font-size:8px; }
  #rail button svg { width:18px; height:18px; }
  #tlbar { overflow-x:auto; }
  #tlhead { width:65px; }
  .th { padding-left:7px; font-size:9px; gap:5px; }
  .rf-main main { padding-inline:16px; }
  .rf-main .topbar { padding-inline:16px; }
  .welcome { gap:8px; }
  .welcome h1 { font-size:37px; }
  .rf-quick { padding:14px; }
  .rf-quick .rf-pill-input { max-width:none; }
  .stats { gap:9px; }
  .stats article { padding:13px; }
  .stats article strong { font-size:25px; }
  .support-layout { grid-template-columns:minmax(0,1fr); }
  .auth-wrap .auth-card { padding:29px 22px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------------------- public marketing site ---------------------- */
.nav { background:rgba(7,9,13,.74); border-bottom-color:rgba(221,234,250,.07); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); }
.nav.scrolled { border-bottom-color:rgba(221,234,250,.12); box-shadow:0 8px 26px rgba(0,0,0,.12); }
.nav-in { height:76px; }
.logo { gap:12px; letter-spacing:.15em; }
.logo-mark { width:36px; height:36px; border:1px solid rgba(255,255,255,.74); border-radius:11px; background:linear-gradient(145deg,#fff,#c6d2e0 52%,#718094); color:#0b0f15; box-shadow:0 6px 22px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.92); }
.logo-word i { color:#9eb3cd; }
.nav-links>a,.dd-btn { border:1px solid transparent; transition:color .2s,background .2s,border-color .2s,transform .2s; }
.nav-links>a:hover,.dd-btn:hover,.dd.open .dd-btn { border-color:rgba(225,237,251,.07); background:rgba(255,255,255,.045); }
.nav-cta .rf-btn { box-shadow:0 7px 23px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.9); }
.hero { padding:clamp(72px,10vw,132px) 0 clamp(58px,8vw,105px); }
.hero-glow { background:radial-gradient(ellipse 760px 520px at 50% 0%,rgba(115,154,207,.14),transparent 70%); }
.hero h1 { max-width:17ch; font-family:Montserrat,Inter,sans-serif; font-size:clamp(43px,6.2vw,84px); line-height:1.02; letter-spacing:-.075em; font-weight:850; text-wrap:balance; }
.grad { background:linear-gradient(105deg,#fff 2%,#c6d3e3 45%,#8ca6c8 83%,#e8eef6 100%); -webkit-background-clip:text; background-clip:text; }
.lede { max-width:660px; line-height:1.8; font-size:clamp(16px,1.5vw,19px); }
.hero-actions { gap:12px; }
.rf-btn { box-shadow:inset 0 1px rgba(255,255,255,.035); }
.rf-btn:hover { border-color:rgba(236,244,255,.34); transform:translateY(-2px); }
.rf-btn--primary { background:linear-gradient(145deg,#fbfcff,#c9d6e5); color:#10151d; box-shadow:0 9px 28px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.95); }
.rf-btn--primary:hover { background:#fff; opacity:1; box-shadow:0 14px 34px rgba(0,0,0,.31),0 0 0 4px rgba(198,221,249,.05); }
.rf-btn--ghost { background:rgba(255,255,255,.035); border-color:rgba(223,235,250,.13); }
.fineprint { color:#7d8c9f; }
.showcase { margin-top:clamp(48px,7.5vw,92px); }
.demo { padding:clamp(14px,3vw,32px); border-color:rgba(222,235,251,.13); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.008) 45%),#0e131a; box-shadow:0 35px 100px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.055); }
.src,.phone { border-color:rgba(222,235,251,.16); box-shadow:0 16px 50px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045); }
.phone { box-shadow:0 20px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.12); }
.crop { border-color:rgba(245,249,255,.94); box-shadow:0 0 0 9999px rgba(0,0,0,.46),0 0 26px rgba(165,205,255,.16); }
.seg { background:linear-gradient(135deg,rgba(185,211,245,.5),rgba(93,128,176,.25)); border-color:rgba(191,216,248,.58); }
.seg em { color:#fff; }
.sec { padding:var(--rf-section) 0; }
.sec-head { margin-bottom:38px; }
.sec-head h2,.sec-head h3,.two-card h3 { font-family:Montserrat,Inter,sans-serif; letter-spacing:-.055em; line-height:1.08; }
.sec-head h2 { font-size:var(--rf-fs-h2); }
.sec-head p { max-width:640px; line-height:1.8; }
.rf-card { border-color:rgba(222,235,251,.105); border-radius:23px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 48%),#10151c; box-shadow:0 12px 35px rgba(0,0,0,.1),inset 0 1px rgba(255,255,255,.025); transition:transform .28s var(--rf-ease),border-color .28s,box-shadow .28s; }
.rf-card:hover { border-color:rgba(222,235,251,.24); box-shadow:0 24px 56px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06); }
.three .rf-card:hover,.two-card:hover { transform:translateY(-5px); }
.ic-badge,.dd-ic { border-color:rgba(222,235,251,.12); background:linear-gradient(145deg,rgba(217,232,250,.12),rgba(255,255,255,.025)); color:#dbe9fb; }
.packs .pack { border-radius:22px; }
.pack:hover { transform:translateY(-5px); border-color:rgba(222,235,251,.25); }
.pack.skel { background:linear-gradient(100deg,#10151c 30%,#1b2430 50%,#10151c 70%); }
.pack .credits { letter-spacing:-.05em; }
.pack .price b { background:linear-gradient(145deg,#fff,#b9c8dc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.faq details { padding:0; border-radius:19px; }
.faq details[open] { background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 55%),#10151c; }
.faq summary { padding:21px 23px; }
.faq details p { padding:0 23px 23px; line-height:1.8; }
.final-card { border:1px solid rgba(223,235,251,.12); border-radius:30px; background:radial-gradient(ellipse at 50% 0%,rgba(120,157,205,.12),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),#0e1319; box-shadow:0 35px 90px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05); }
.final-card h2 { font-family:Montserrat,Inter,sans-serif; letter-spacing:-.065em; }
.foot { border-top-color:rgba(222,234,249,.085); }
.foot-bot { border-top-color:rgba(222,234,249,.075); }
@media(max-width:860px) {
  .nav-in { height:66px; }
  .hero { padding-top:66px; }
  .hero h1 { font-size:clamp(42px,8.6vw,66px); }
}
@media(max-width:600px) {
  .nav-in { padding-inline:16px; }
  .hero { padding:48px 0 42px; }
  .hero h1 { font-size:clamp(39px,10.5vw,53px); letter-spacing:-.07em; }
  .lede { font-size:15px; }
  .demo { border-radius:21px; }
  .sec { padding:64px 0; }
  .sec-head { margin-bottom:25px; }
  .sec-head h2 { font-size:34px; }
  .faq summary { padding:17px 16px; font-size:14px; }
  .faq details p { padding:0 16px 18px; font-size:13px; }
  .final-card { border-radius:22px; }
}