.stories-landing {
  --story-bg: #09070f;
  --story-panel: rgba(22, 17, 33, .78);
  --story-line: rgba(255, 255, 255, .12);
  --story-coral: #ff6b6b;
  --story-orange: #ff9f43;
  --story-pink: #ec4899;
  --story-violet: #8b5cf6;
  background: var(--story-bg);
  color: #f8fafc;
}

.stories-landing .aurora-container { opacity: .38; }
.stories-landing .floating-nav { z-index: 60; }
.stories-shell { position: relative; overflow: hidden; }
.stories-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 760px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 107, 107, .20), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(139, 92, 246, .22), transparent 32%),
    linear-gradient(180deg, rgba(236, 72, 153, .06), transparent 82%);
}
.stories-wrap { width: min(1160px, calc(100% - 32px)); margin-inline: auto; position: relative; }
.stories-section { padding: 82px 0; border-top: 1px solid rgba(255,255,255,.07); }
.stories-kicker { color: #fbcfe8; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stories-title { margin-top: 12px; max-width: 820px; font: 800 clamp(2rem, 4.6vw, 4.5rem)/1.02 Manrope, Inter, sans-serif; letter-spacing: -.045em; }
.stories-title em { font-style: normal; color: transparent; background: linear-gradient(110deg, #fff 0%, #ffc4a8 30%, #ff6b9c 65%, #a78bfa 100%); background-clip: text; -webkit-background-clip: text; }
.stories-copy { color: #cbd5e1; line-height: 1.75; }
.stories-copy strong { color: #fff; }
.stories-heading { font: 800 clamp(1.75rem, 3.2vw, 3rem)/1.12 Manrope, Inter, sans-serif; letter-spacing: -.035em; }
.stories-subhead { max-width: 720px; margin-top: 14px; color: #aab4c4; line-height: 1.7; }

.stories-hero { padding: 150px 0 92px; }
.stories-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 64px; align-items: center; }
.stories-breadcrumbs { margin-bottom: 32px; color: #94a3b8; font-size: .86rem; }
.stories-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; }
.stories-breadcrumbs li + li::before { content: "/"; margin-right: 9px; color: #64748b; }
.stories-breadcrumbs a:hover { color: #fff; }
.stories-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.055); color: #fce7f3; font-weight: 700; font-size: .86rem; }
.stories-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--story-coral); box-shadow: 0 0 16px var(--story-coral); }
.stories-lead { max-width: 690px; margin-top: 24px; font-size: clamp(1rem, 1.8vw, 1.22rem); color: #cbd5e1; line-height: 1.72; }
.stories-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stories-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 15px; font-weight: 800; transition: transform .2s, border-color .2s, background .2s; }
.stories-btn:hover { transform: translateY(-2px); }
.stories-btn-primary { background: linear-gradient(115deg, var(--story-coral), var(--story-pink) 54%, var(--story-violet)); box-shadow: 0 16px 42px rgba(236,72,153,.26); }
.stories-btn-secondary { border: 1px solid var(--story-line); background: rgba(255,255,255,.055); }
.stories-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.stories-tags span { padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); color: #bac4d3; font-size: .82rem; border: 1px solid rgba(255,255,255,.08); }

.story-device { width: min(370px, 100%); margin-inline: auto; padding: 9px; border-radius: 36px; background: linear-gradient(145deg, #ff8b5d, #ec4899 46%, #7c3aed); box-shadow: 0 38px 90px rgba(124,58,237,.26); transform: rotate(2deg); }
.story-screen { min-height: 545px; padding: 18px; border-radius: 29px; overflow: hidden; background: linear-gradient(170deg, #261334, #0d0a14 54%, #151021); position: relative; }
.story-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.story-progress span { height: 3px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.story-progress span:first-child { background: #fff; }
.story-profile { display: flex; align-items: center; gap: 10px; margin-top: 15px; font-size: .8rem; font-weight: 700; }
.story-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff9f43, #ec4899); border: 2px solid #fff; }
.story-card-copy { position: absolute; inset: auto 24px 36px; }
.story-card-copy small { color: #fda4af; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-card-copy strong { display: block; margin-top: 12px; font: 800 2.4rem/1 Manrope, sans-serif; }
.story-card-copy p { margin-top: 12px; color: #cbd5e1; line-height: 1.55; }
.story-sticker { position: absolute; right: 24px; top: 104px; padding: 14px 12px; border-radius: 16px; background: #fff; color: #111827; transform: rotate(7deg); font-weight: 900; box-shadow: 0 15px 35px rgba(0,0,0,.25); }
.story-sticker b { display: block; color: #ec4899; font-size: 1.35rem; }

.stories-price-grid, .stories-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.stories-price, .stories-card, .stories-panel { border: 1px solid var(--story-line); background: var(--story-panel); backdrop-filter: blur(18px); }
.stories-price { border-radius: 22px; padding: 24px; position: relative; overflow: hidden; }
.stories-price::after { content: ""; position: absolute; width: 130px; height: 130px; right: -65px; bottom: -75px; border-radius: 50%; background: var(--tone, #ec4899); filter: blur(28px); opacity: .24; }
.stories-price.is-featured { border-color: rgba(236,72,153,.55); transform: translateY(-7px); }
.stories-price small { color: #94a3b8; }
.stories-price strong { display: block; margin-top: 12px; font: 800 2rem/1 Manrope, sans-serif; }
.stories-price b { display: block; margin-top: 18px; color: #fff; font-size: 1.25rem; }
.stories-price a { display: inline-flex; margin-top: 20px; color: #fbcfe8; font-weight: 800; }
.stories-live-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; overflow: hidden; border: 1px solid var(--story-line); border-radius: 19px; background: var(--story-line); }
.stories-live-strip div { padding: 20px; background: #100d18; }
.stories-live-strip strong { display: block; color: #fff; font-size: 1.2rem; }
.stories-live-strip span { color: #94a3b8; font-size: .82rem; }

.stories-steps { counter-reset: story-step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.stories-step { counter-increment: story-step; padding: 23px; border-radius: 20px; border: 1px solid var(--story-line); background: rgba(255,255,255,.035); }
.stories-step::before { content: "0" counter(story-step); display: block; margin-bottom: 26px; color: #fb7185; font: 800 .84rem Manrope, sans-serif; }
.stories-step h3 { font-weight: 800; font-size: 1.03rem; }
.stories-step p { margin-top: 9px; color: #9eabbc; font-size: .9rem; line-height: 1.6; }

.stories-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.stories-panel { padding: 28px; border-radius: 24px; }
.stories-panel.is-positive { border-color: rgba(52,211,153,.25); }
.stories-panel.is-caution { border-color: rgba(251,113,133,.28); }
.stories-panel h3 { font: 800 1.25rem Manrope, sans-serif; }
.stories-list { display: grid; gap: 13px; margin-top: 18px; padding: 0; list-style: none; color: #b8c2d1; line-height: 1.55; }
.stories-list li { position: relative; padding-left: 24px; }
.stories-list li::before { content: "•"; position: absolute; left: 5px; color: #fb7185; font-weight: 900; }
.is-positive .stories-list li::before { color: #34d399; }
.stories-card { padding: 26px; border-radius: 22px; }
.stories-card .number { color: #fb7185; font: 800 1.9rem Manrope, sans-serif; }
.stories-card h3 { margin-top: 10px; font-weight: 800; }
.stories-card p { margin-top: 9px; color: #9ca9ba; line-height: 1.62; }

.stories-note { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; margin-top: 32px; padding: 30px; border-radius: 26px; border: 1px solid rgba(251,113,133,.28); background: linear-gradient(115deg, rgba(251,113,133,.12), rgba(124,58,237,.09)); }
.stories-note-mark { font: 800 3rem/1 Manrope, sans-serif; text-align: center; color: #fb7185; }
.stories-note h3 { font: 800 1.35rem Manrope, sans-serif; }
.stories-note p { margin-top: 8px; color: #bdc6d4; line-height: 1.65; }

.stories-faq { display: grid; gap: 12px; margin-top: 30px; }
.stories-faq details { border: 1px solid var(--story-line); border-radius: 17px; background: rgba(255,255,255,.035); overflow: hidden; }
.stories-faq summary { padding: 19px 22px; cursor: pointer; font-weight: 800; list-style: none; }
.stories-faq summary::-webkit-details-marker { display: none; }
.stories-faq summary::after { content: "+"; float: right; color: #fb7185; font-size: 1.25rem; }
.stories-faq details[open] summary::after { content: "−"; }
.stories-faq p { padding: 0 22px 20px; color: #aeb9c8; line-height: 1.65; }
.stories-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.stories-related a { padding: 17px; border-radius: 16px; border: 1px solid var(--story-line); background: rgba(255,255,255,.04); color: #dbe4ef; font-weight: 700; }
.stories-related a:hover { border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.08); }
.stories-final { text-align: center; padding: 74px 24px; border-radius: 30px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle at 50% 100%, rgba(236,72,153,.28), transparent 55%), #100c18; }
.stories-final p { max-width: 640px; margin: 14px auto 28px; color: #bac4d2; }
.stories-landing #service-packages { margin-top: 34px; }
.stories-landing #service-type-tabs, .stories-landing #platform-tabs { display: none !important; }

@media (max-width: 900px) {
  .stories-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .stories-hero-copy { text-align: center; }
  .stories-breadcrumbs ol, .stories-actions, .stories-tags { justify-content: center; }
  .stories-price-grid, .stories-card-grid { grid-template-columns: 1fr; }
  .stories-price.is-featured { transform: none; }
  .stories-steps { grid-template-columns: repeat(2, 1fr); }
  .stories-live-strip, .stories-related { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stories-wrap { width: min(100% - 24px, 1160px); }
  .stories-hero { padding: 118px 0 66px; }
  .stories-section { padding: 60px 0; }
  .stories-title { font-size: clamp(2.45rem, 13vw, 3.55rem); }
  .stories-actions { flex-direction: column; }
  .stories-btn { width: 100%; }
  .story-screen { min-height: 480px; }
  .stories-steps, .stories-split, .stories-live-strip, .stories-related { grid-template-columns: 1fr; }
  .stories-note { grid-template-columns: 1fr; text-align: center; padding: 25px 20px; }
  .stories-note-mark { font-size: 2.5rem; }
}