/* Generated by scripts/split_public_css.php; edit sp-2026.css, not this file. */
/* ===== home (welcome.blade.php) ===== */
/* ---- C3 unique: showcase hero with interactive phone + 8 featured tiles ---- */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;padding:36px 32px 30px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:5px 12px;border-radius:999px}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--acc);font-style:normal}
.hero h1{margin-top:14px;font-size:clamp(30px,4.1vw,46px);font-weight:800;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lead{margin-top:12px;color:var(--muted);font-size:17px;max-width:52ch;line-height:1.85;text-wrap:pretty}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:var(--sf);border:1px solid var(--line);padding:7px 12px;border-radius:12px}
.facts b{font-size:16px;font-weight:700;color:var(--acc)}
.hero .actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* interactive phone */
.showcase{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{transform:rotate(-4deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.showcase:hover .phone{transform:rotate(0)}
.ph-title{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);padding:0 4px 4px}
.ph-title b{color:var(--text);font-size:13px}
.ph-title i{margin-inline-start:auto;height:3px;flex:0 0 90px;border-radius:3px;background:var(--line-2);overflow:hidden;font-style:normal;position:relative}
.ph-title i::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:right;animation:prog 3.2s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.remote{display:none;gap:6px;flex-wrap:wrap;justify-content:center}
.remote button{height:34px;padding:0 12px;border-radius:999px;background:var(--sf);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.remote button svg{width:14px;height:14px}
.remote button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.ph-grid .ph-tile{cursor:pointer}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:20px;padding:26px 14px 22px}.showcase{margin-top:4px}.phone{width:220px;transform:none}.phone-screen{min-height:385px}}
@media(max-width:480px){.hero{padding-inline:8px}.phone{width:min(220px,60vw)}}
.featured{margin-top:26px}
.stories{margin-top:18px}
.field{border-radius:24px;padding:18px 18px 20px;background:var(--field-soft);border:1px solid var(--field-line)}
@media(max-width:640px){.field{padding:12px 12px 14px;border-radius:18px}}
@media(max-width:640px){.featured .sh{padding-inline:8px;margin-bottom:20px}}

/* dark: keep the showcase phone readable against the navy field */
[data-theme=dark] .phone{--ph-frame:#2A3145;--ph-screen:#151A28;box-shadow:0 30px 60px -26px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(127,168,255,.15)}
[data-theme=dark] .ph-tile{background:#fff}
.ph-title i.paused::after{animation-play-state:paused}
.ph-title i[hidden]{display:none}
/* ===== polish round 3: featured numbers, aligned subtitles, phone crossfade ===== */
.ft .n{top:10px;inset-inline-start:12px;inset-inline-end:auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font:800 12px/1 'Vazirmatn',system-ui,sans-serif;font-feature-settings:normal;color:var(--acc);background:var(--acc-soft);border:1px solid rgba(36,86,199,.18)}
[data-theme=dark] .ft .n{color:#BFD3FF;background:rgba(127,168,255,.16);border-color:rgba(127,168,255,.25)}
.ft b,.tile b{font-family:'Vazirmatn',system-ui,sans-serif;text-align:start}
.ft small,.tile small,.sc small,.prow small{font-family:'Vazirmatn',system-ui,sans-serif;font-size:11.5px;line-height:1.5;color:var(--dim);direction:inherit;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;unicode-bidi:plaintext;font-feature-settings:normal}
.tile b{width:100%;min-height:39px;display:flex;align-items:center;justify-content:center;line-height:1.5;text-align:center}
.tile small{width:100%;text-align:center}
.tile{gap:8px}
.tile .lg,.ft .lg{margin-bottom:2px}
/* phone: crossfade between category screens instead of a hard rebuild */
#phone{position:relative}
.phone-screen{position:relative}
.ph-grid{transition:opacity .28s ease,transform .28s ease}
.phone.switching .ph-grid{opacity:0;transform:translateY(6px) scale(.98)}
.phone .ph-grid .ph-tile{animation-duration:.42s}
.ph-title{padding-bottom:6px}
.ph-title i{display:none}
/* ===== round 4 ===== */
/* featured tiles: logo + text centred, number badge stays in the corner */
.ft{align-items:center;text-align:center;padding:22px 14px 16px;gap:8px}
.ft .lg{margin:4px auto 2px}
.ft b,.ft small{text-align:center;width:100%}
.ft .n{z-index:2}

/* phone bottom bars = story-style progress: the active bar fills over one cycle, then the next one */
.ph-tabs{gap:6px;justify-content:center}
.ph-tabs span{position:relative;overflow:hidden;width:26px;height:6px;background:rgba(19,23,34,.12)!important}
[data-theme=dark] .ph-tabs span{background:rgba(255,255,255,.16)!important}
.ph-tabs span::after{content:"";position:absolute;inset:0;border-radius:6px;background:var(--acc);transform:scaleX(0);transform-origin:right}
[dir=ltr] .ph-tabs span::after{transform-origin:left}
.ph-tabs span.on::after{animation:prog var(--cycle,6s) linear forwards}
.phone.ph-hold .ph-tabs span.on::after{animation-play-state:paused}
html.qa-still .ph-tabs span.on::after,.ph-tabs.static span.on::after{animation:none;transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ph-tabs span.on::after{animation:none;transform:scaleX(1)}}
/* phone: no transform transition on hover (Chrome re-rasterises transformed layers inside backdrop-filter parents → blurry/"resized" frame); static tilt, own compositing layer */
.phone{transform:rotate(-4deg) translateZ(0);transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden}
.showcase:hover .phone{transform:rotate(0) translateZ(0)}
@media(max-width:900px){.phone,.showcase:hover .phone{transform:none!important}}
.phone-screen{overflow:hidden;transform:translateZ(0)}
.ph-grid{will-change:opacity,transform}

/* hero: dynamic category flip (headline + short description sync with the phone showcase) */
.hero-flip-text{transition:opacity .18s ease,transform .18s ease}
.hero-flip-text.flip-out{opacity:0;transform:translateY(4px)}
/* arrows now flank the phone itself, not the headline */
.phone-row{display:flex;align-items:center;justify-content:center;gap:8px}
.hero-arrow{flex:none;width:38px;height:38px;border-radius:999px;display:inline-grid;place-items:center;background:var(--g-fill);border:1px solid var(--g-line);color:var(--muted);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);transition:.2s}
.hero-arrow:hover{color:var(--acc);border-color:rgba(36,86,199,.4)}
.hero-arrow svg{width:18px;height:18px}
/* reserve height on the whole flip block (not on h1/lead individually — that left a dead gap
   under a one-line headline) so switching categories never reflows the phone/buttons beside it */
.hero-flip-text{min-height:112px;display:flex;flex-direction:column;justify-content:flex-start}
.hero-flip-text h1{margin-top:0;text-wrap:balance}
.hero-flip-text .lead{margin-top:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hero .actions.hero-cta-mobile{display:none}
.hero{padding-top:22px}
.showcase{gap:8px}
@media(max-width:900px){
  .hero{gap:18px;padding-top:16px}
  .hero .enter{text-align:center}
  .hero-flip-text{max-width:46ch;min-height:64px;margin-inline:auto}
  .hero-flip-text h1{font-size:22px;line-height:1.3}
  .hero-flip-text .lead{margin-inline:auto;-webkit-line-clamp:2}
  .hero .actions{justify-content:center}
  .hero .actions.hero-cta-desktop{display:none}
  .hero .actions.hero-cta-mobile{display:flex;margin-top:10px}
  .showcase{margin-top:4px;gap:8px}
  .phone-row{gap:4px}
  .hero-arrow{width:30px;height:30px}
  .hero-arrow svg{width:15px;height:15px}
  .remote{display:none}
}
@media(max-width:640px){.hero-flip{gap:6px}.hero-flip .hero-arrow{width:32px;height:32px}.hero-flip .hero-arrow svg{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.hero-flip-text{transition:none}}

/* Keep catalogue names legible and bold; long names may use a second line. */
.featured .ft b,.tiles .tile b,.stories .sc b,.prow b{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  width:100%;
  min-height:0;
  white-space:normal;
  overflow:hidden;
  line-height:1.5;
  font-weight:700;
}
.tiles .tile b{font-size:14px;text-align:center}
.featured .ft b{font-size:15px;text-align:center}
.ph-title b{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .tiles .tile b,.featured .ft b{font-size:14px}
}