:root {
  --ink: #080a08;
  --surface: #111411;
  --surface-2: #181c18;
  --line: rgba(255, 255, 255, 0.13);
  --muted: #a2a79e;
  --soft: #d9ded6;
  --lime: #d8f233;
  --lime-soft: rgba(216, 242, 51, 0.14);
  --cream: #f6f4ed;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: Pretendard, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-200%); z-index: 99; padding: 10px 14px; background: var(--lime); color: var(--ink); border-radius: 10px; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 86px; max-width: 1420px; margin: auto; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.06em; }
.brand > span:last-child > span { color: var(--lime); }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--lime); color: var(--ink); font-family: "DM Mono", monospace; font-size: 16px; letter-spacing: -.08em; }
.header-meta { display: flex; align-items: center; gap: 22px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.made-by { color: var(--muted); }
.made-by b { color: var(--lime); font-size: 12px; }
.text-link { color: var(--cream); transition: color .2s ease; }
.text-link:hover { color: var(--lime); }

.hero { min-height: 720px; height: min(870px, 100svh); max-width: 1420px; margin: auto; padding: 124px 48px 52px; display: grid; grid-template-columns: minmax(0, .93fr) minmax(370px, .79fr); align-items: center; gap: clamp(42px, 8vw, 140px); position: relative; }
.hero:before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 920px; max-height: 920px; right: -20vw; top: -35vw; border: 1px solid rgba(216,242,51,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(216,242,51,.018), 0 0 0 180px rgba(216,242,51,.012); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 16px; color: var(--lime); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; line-height: 1.3; }
.signal { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(216,242,51,.72); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 65% { box-shadow: 0 0 0 8px rgba(216,242,51,0); } 100% { box-shadow: 0 0 0 0 rgba(216,242,51,0); } }
.hero h1, h2, h3 { margin: 0; }
.hero h1 { max-width: 630px; font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(64px, 7.9vw, 126px); line-height: .9; letter-spacing: -.102em; font-weight: 700; }
.hero h1 em { color: var(--lime); font-style: normal; letter-spacing: -.12em; }
.hero-description { max-width: 480px; margin: 32px 0 0; color: var(--soft); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.7; letter-spacing: -.035em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 31px; }
.button { min-height: 52px; padding: 0 19px; border-radius: 12px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 18px; font-size: 13px; font-weight: 800; letter-spacing: -.025em; transition: transform .28s var(--ease), border-color .28s ease, background .28s ease, color .28s ease; }
.button:hover { transform: translateY(-3px); }
.button--lime { border-color: var(--lime); background: var(--lime); color: var(--ink); box-shadow: 0 13px 32px rgba(216,242,51,.16); }
.button--lime:hover { box-shadow: 0 18px 44px rgba(216,242,51,.28); }
.button--ghost { background: rgba(255,255,255,.03); color: var(--cream); }
.button--ghost:hover { border-color: rgba(216,242,51,.72); color: var(--lime); }
.hero-note { margin: 18px 0 0; color: #80857d; font-size: 11px; line-height: 1.5; }

.hero-preview { width: min(100%, 390px); aspect-ratio: 9 / 15.5; justify-self: end; position: relative; border-radius: 28px; overflow: hidden; background: #1a1f1a; box-shadow: 28px 28px 60px rgba(0,0,0,.48), -2px -2px 0 rgba(255,255,255,.13); transform: rotate(3deg); }
.hero-preview:before { content: ""; position: absolute; z-index: 2; inset: 13px; border: 1px solid rgba(255,255,255,.42); border-radius: 20px; pointer-events: none; }
.preview-rim { position: absolute; z-index: 5; inset: -1px; border: 1px solid rgba(216,242,51,.55); border-radius: 28px; pointer-events: none; }
.hero-preview video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .87; filter: saturate(.85) contrast(1.08); }
.preview-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 29%, rgba(0,0,0,.1) 52%, rgba(0,0,0,.84) 100%); }
.preview-ui { position: absolute; z-index: 3; left: 30px; right: 30px; bottom: 35px; }
.preview-pill { display: inline-block; padding: 7px 8px; border: 1px solid rgba(216,242,51,.7); border-radius: 7px; background: rgba(5,8,5,.66); color: var(--lime); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .07em; }
.preview-ui p { margin: 14px 0 22px; color: #fff; font-size: 21px; line-height: 1.25; letter-spacing: -.06em; }
.preview-timeline { display: flex; gap: 4px; align-items: center; }
.preview-timeline i, .preview-timeline b { display: block; height: 3px; flex: 1; border-radius: 50px; background: rgba(255,255,255,.35); }
.preview-timeline i { background: var(--lime); flex: 2; }
.live-label { position: absolute; z-index: 3; left: 31px; top: 34px; color: #fff; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .11em; }
.live-label i { width: 6px; height: 6px; display: inline-block; margin: 0 6px 1px 0; border-radius: 50%; background: #ff6d50; }

.proof-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 27px 48px; overflow: hidden; }
.proof-strip p { width: max-content; min-width: 100%; margin: 0; display: flex; justify-content: center; gap: clamp(15px, 2.5vw, 42px); align-items: center; white-space: nowrap; font-size: clamp(14px, 1.7vw, 21px); letter-spacing: -.055em; }
.proof-strip b { color: var(--cream); font-weight: 600; }
.proof-strip span { color: var(--lime); font-size: 25px; font-weight: 400; }
.proof-strip strong { color: var(--lime); }

.workflow, .formats, .portfolio, .plans, .faq { max-width: 1220px; margin: auto; padding: 150px 48px; }
.section-heading h2, .plans-intro h2 { max-width: 720px; font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(39px, 5vw, 72px); line-height: .97; letter-spacing: -.085em; }
.workflow-grid { list-style: none; margin: 70px 0 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.workflow-grid li { min-height: 258px; padding: 25px 30px 20px 0; border-right: 1px solid var(--line); }
.workflow-grid li + li { padding-left: 28px; }
.workflow-grid li:last-child { border-right: 0; }
.workflow-grid span { color: var(--lime); font-family: "DM Mono", monospace; font-size: 12px; }
.workflow-grid h3 { margin-top: 53px; font-size: 21px; letter-spacing: -.055em; }
.workflow-grid p { max-width: 270px; color: var(--muted); font-size: 14px; line-height: 1.65; letter-spacing: -.035em; }

.formats { max-width: none; background: #e4e5dc; color: #10120f; padding-left: max(48px, calc((100vw - 1124px) / 2)); padding-right: max(48px, calc((100vw - 1124px) / 2)); }
.formats .eyebrow { color: #59651a; }
.section-heading--row { max-width: 1124px; display: flex; justify-content: space-between; gap: 40px; }
.section-aside { max-width: 260px; margin: 4px 0 0; color: #5a5e54; font-size: 13px; line-height: 1.6; letter-spacing: -.03em; }
.format-tabs { max-width: 1124px; display: flex; gap: 8px; margin: 56px auto 0; overflow: auto; padding-bottom: 4px; scrollbar-width: none; }
.format-tabs::-webkit-scrollbar { display: none; }
.format-tab { flex: 0 0 auto; border: 1px solid rgba(16,18,15,.2); border-radius: 999px; background: transparent; color: #565a51; padding: 13px 19px; font-size: 13px; font-weight: 700; letter-spacing: -.04em; transition: .22s ease; }
.format-tab.is-active { border-color: #10120f; background: #10120f; color: var(--lime); }
.format-stage { position: relative; max-width: 1124px; min-height: 398px; margin: 22px auto 0; padding: 45px; display: grid; grid-template-columns: 118px minmax(0, .95fr) minmax(320px, .83fr); gap: 30px; overflow: hidden; background: #121510; color: var(--cream); border-radius: 24px; }
.format-stage:after { content: ""; width: 420px; height: 420px; position: absolute; right: -110px; top: -255px; border-radius: 50%; background: rgba(216,242,51,.11); filter: blur(1px); pointer-events: none; }
.format-stage__number { color: var(--lime); font-family: "DM Mono", monospace; font-size: 47px; letter-spacing: -.08em; }
.format-stage__copy { position: relative; z-index: 1; }
.format-stage__copy .eyebrow { color: var(--lime); }
.format-stage__copy h3 { font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(25px, 3vw, 42px); line-height: 1.03; letter-spacing: -.075em; }
.format-stage__copy p:last-child { max-width: 440px; color: #aeb2aa; font-size: 14px; line-height: 1.65; letter-spacing: -.035em; }
.format-flow { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255,255,255,.2); }
.format-flow li { min-height: 64px; padding: 13px 0 12px 25px; position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; font-weight: 700; letter-spacing: -.04em; }
.format-flow li:last-child { border-bottom: 0; }
.format-flow li:before { content: ""; position: absolute; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.format-flow i { color: var(--lime); font-family: "DM Mono", monospace; font-size: 10px; font-style: normal; }

.portfolio { padding-bottom: 170px; }
.portfolio-grid { margin-top: 64px; display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 12px; }
.case-card { min-height: 440px; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.case-card--video { grid-row: span 1; background: #090b09; }
.case-card__media { min-height: 255px; position: relative; overflow: hidden; background: #131612; }
.case-card__media video { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; opacity: .8; filter: saturate(.75) contrast(1.1); }
.case-card__media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #090b09 100%); }
.case-card__media span { position: absolute; z-index: 1; top: 18px; left: 18px; color: var(--lime); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .09em; }
.case-card__body { position: relative; z-index: 1; padding: 24px; margin-top: auto; }
.case-card__body h3 { font-family: "Space Grotesk", Pretendard, sans-serif; font-size: 24px; line-height: 1.06; letter-spacing: -.07em; }
.case-card__body p { margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; letter-spacing: -.035em; }
.case-label { color: var(--lime); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .1em; }
.case-card--script { padding-top: 65px; background: #e6e7de; color: var(--ink); }
.case-card--script .case-card__body p { color: #5f655d; }
.script-lines { display: grid; gap: 11px; padding: 0 24px; }
.script-lines span { height: 10px; background: #b7bcad; border-radius: 3px; }
.script-lines span:nth-child(1) { width: 74%; background: #a4b320; }
.script-lines span:nth-child(2) { width: 93%; }
.script-lines span:nth-child(3) { width: 64%; }
.script-lines span:nth-child(4) { width: 84%; }
.script-lines span:nth-child(5) { width: 43%; }
.case-card--compare { background: radial-gradient(circle at 90% 10%, rgba(216,242,51,.17), transparent 35%), #1b1d19; }
.compare-bars { height: 168px; display: flex; gap: 9px; align-items: end; padding: 34px 24px 0; }
.compare-bars i { display: block; flex: 1; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.14); }
.compare-bars i:nth-child(1) { height: 38%; }
.compare-bars i:nth-child(2) { height: 70%; background: var(--lime); }
.compare-bars i:nth-child(3) { height: 94%; }

.plans { max-width: none; padding-left: max(48px, calc((100vw - 1124px) / 2)); padding-right: max(48px, calc((100vw - 1124px) / 2)); display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(38px, 8vw, 124px); background: #111411; }
.plans-intro > p:not(.eyebrow) { margin: 26px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; letter-spacing: -.035em; }
.plan-duration { margin: 28px 0 0; color: var(--lime); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .04em; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.plan-card { min-height: 514px; padding: 27px; display: flex; flex-direction: column; position: relative; border: 1px solid var(--line); border-radius: 18px; background: #0b0e0b; }
.plan-card--featured { border-color: rgba(216,242,51,.72); background: linear-gradient(150deg, rgba(216,242,51,.12), #111511 46%); }
.plan-label { color: #a8ada3; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .1em; }
.plan-badge { position: absolute; right: 18px; top: 18px; padding: 6px 8px; border-radius: 5px; background: var(--lime); color: var(--ink); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; }
.plan-card h3 { margin-top: 24px; font-family: "Space Grotesk", Pretendard, sans-serif; font-size: 27px; letter-spacing: -.07em; }
.price { margin: 12px 0 0; display: flex; align-items: baseline; gap: 5px; }
.price b { font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(39px, 4vw, 51px); line-height: 1; letter-spacing: -.1em; }
.price small { color: var(--muted); font-size: 15px; font-weight: 700; }
.plan-summary { margin: 19px 0 0; min-height: 43px; color: var(--muted); font-size: 13px; line-height: 1.55; letter-spacing: -.035em; }
.plan-card ul { list-style: none; padding: 21px 0; margin: 22px 0 0; border-top: 1px solid var(--line); }
.plan-card li { display: flex; gap: 8px; margin: 11px 0; color: #e1e4dc; font-size: 12px; line-height: 1.4; letter-spacing: -.025em; }
.plan-card li i { color: var(--lime); font-style: normal; }
.button--plan { margin-top: auto; width: 100%; min-height: 48px; font-size: 12px; }
.payment-note { grid-column: 2; margin: -34px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(216,242,51,.28); color: #9ea39a; font-size: 11px; line-height: 1.65; letter-spacing: -.02em; }
.payment-note b { color: var(--lime); }

.handoff { max-width: 1220px; min-height: 370px; margin: auto; padding: 116px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.handoff h2 { font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(35px, 4vw, 57px); line-height: .98; letter-spacing: -.085em; }
.handoff-flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1.25fr auto 1.1fr; gap: 8px; align-items: center; color: #c6cbc2; font-size: 12px; line-height: 1.35; letter-spacing: -.035em; }
.handoff-flow span { padding: 14px 8px; text-align: center; border-bottom: 1px solid rgba(216,242,51,.48); }
.handoff-flow i { color: var(--lime); font-style: normal; }
.handoff-flow b { color: var(--lime); font-size: 11px; }

.faq { padding-top: 92px; border-top: 1px solid var(--line); }
.faq h2 { font-family: "Space Grotesk", Pretendard, sans-serif; font-size: clamp(38px, 5vw, 68px); letter-spacing: -.085em; }
.faq-list { margin-top: 43px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 23px 2px; display: flex; align-items: center; justify-content: space-between; list-style: none; color: #f4f4ee; font-size: 16px; font-weight: 700; letter-spacing: -.05em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--lime); font-size: 23px; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 680px; margin: -4px 0 25px; color: var(--muted); font-size: 14px; line-height: 1.7; letter-spacing: -.035em; }

.site-footer { min-height: 280px; padding: 42px max(48px, calc((100vw - 1124px) / 2)); display: grid; grid-template-columns: 1fr 1fr auto; align-content: space-between; gap: 20px; background: #f0f1e7; color: var(--ink); }
.site-footer .brand { align-self: start; }
.site-footer .brand-mark { background: var(--ink); color: var(--lime); }
.site-footer .brand > span:last-child > span { color: #62685f; }
.site-footer p { margin: 0; color: #636961; font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.5; letter-spacing: .02em; }
.site-footer .footer-legal { grid-column: 1 / span 2; align-self: end; max-width: 580px; }
.site-footer a { align-self: end; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; }

@media (max-width: 860px) {
  .site-header { padding: 0 20px; height: 69px; }
  .made-by { display: none; }
  .hero { min-height: 0; height: auto; padding: 118px 20px 64px; grid-template-columns: 1fr; gap: 45px; }
  .hero:before { width: 85vw; height: 85vw; right: -42vw; top: 18vw; }
  .hero h1 { font-size: clamp(56px, 16.3vw, 93px); }
  .hero-description { margin-top: 23px; font-size: 15px; }
  .hero-preview { justify-self: center; width: min(78vw, 390px); transform: rotate(1.8deg); }
  .proof-strip { padding: 20px 0; }
  .proof-strip p { justify-content: flex-start; padding-left: 20px; font-size: 14px; }
  .workflow, .formats, .portfolio, .plans, .faq { padding: 88px 20px; }
  .section-heading--row { display: block; }
  .section-aside { margin-top: 20px; }
  .workflow-grid { margin-top: 42px; grid-template-columns: 1fr; }
  .workflow-grid li, .workflow-grid li + li { min-height: auto; padding: 22px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-grid li:last-child { border-bottom: 0; }
  .workflow-grid h3 { margin-top: 24px; }
  .format-tabs { margin-top: 35px; }
  .format-stage { min-height: 0; padding: 25px; grid-template-columns: 1fr; gap: 21px; }
  .format-stage__number { font-size: 36px; }
  .format-flow { margin-top: 4px; }
  .portfolio-grid { margin-top: 38px; grid-template-columns: 1fr; }
  .case-card { min-height: 310px; }
  .case-card--video { min-height: 460px; }
  .plans { display: block; }
  .plan-grid { margin-top: 40px; grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
  .payment-note { margin: 18px 0 0; }
  .handoff { min-height: 0; padding: 86px 20px; grid-template-columns: 1fr; }
  .handoff-flow { grid-template-columns: 1fr; gap: 4px; }
  .handoff-flow i { transform: rotate(90deg); margin: -5px auto; }
  .handoff-flow span { text-align: left; padding-left: 0; }
  .site-footer { min-height: 250px; padding: 32px 20px; grid-template-columns: 1fr auto; }
  .site-footer p { grid-column: 1 / span 2; }
  .site-footer .footer-legal { grid-column: 1 / span 2; }
}

@media (max-width: 420px) {
  .header-meta { gap: 12px; font-size: 10px; }
  .brand { font-size: 16px; }
  .brand-mark { width: 25px; height: 25px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { min-height: 48px; padding: 0 12px; gap: 7px; font-size: 12px; }
  .hero-preview { width: min(86vw, 390px); }
  .format-stage__copy h3 { font-size: 28px; }
  .format-flow li { grid-template-columns: 52px 1fr; padding-left: 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}