* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
.demo-note { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 40px; padding: 8px 20px; background: #d8ff35; border-bottom: 1px solid #111; color: #111; font-size: 11px; font-weight: 800; text-align: center; }
.demo-note a { padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.demo-shell { width: min(1120px, calc(100% - 42px)); margin: auto; }
.demo-nav { height: 75px; display: flex; align-items: center; justify-content: space-between; }
.demo-nav .logo { font-weight: 900; letter-spacing: -.05em; }
.demo-nav nav { display: flex; gap: 30px; font-size: 13px; font-weight: 700; }
.demo-nav .nav-cta { padding: 11px 16px; border: 1px solid currentColor; }
.demo-hero { min-height: 660px; display: grid; align-items: center; }
.demo-hero h1 { margin: 0; font-size: clamp(55px,8vw,104px); line-height: .96; letter-spacing: -.08em; }
.demo-hero p { max-width: 570px; margin: 28px 0; font-size: 17px; line-height: 1.75; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border: 1px solid currentColor; font-weight: 800; font-size: 14px; }
.demo-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid currentColor; }
.demo-stats div { padding: 25px 0; }
.demo-stats strong, .demo-stats span { display: block; }
.demo-stats strong { font-size: 32px; letter-spacing: -.05em; }
.demo-stats span { margin-top: 5px; opacity: .65; font-size: 11px; }
.demo-section { padding: 105px 0; }
.demo-section h2 { max-width: 700px; margin: 0; font-size: clamp(40px,6vw,70px); line-height: 1.08; letter-spacing: -.065em; }
.demo-section .kicker { margin: 0 0 20px; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.demo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 55px; }
.demo-grid article { min-height: 260px; padding: 30px; border: 1px solid currentColor; }
.demo-grid article span { font-family: ui-monospace, monospace; font-size: 10px; }
.demo-grid article h3 { margin: 70px 0 14px; font-size: 23px; letter-spacing: -.04em; }
.demo-grid article p { margin: 0; opacity: .68; font-size: 13px; line-height: 1.7; }
.demo-quote { padding: 120px 0; text-align: center; }
.demo-quote blockquote { max-width: 890px; margin: auto; font-size: clamp(30px,5vw,60px); line-height: 1.25; letter-spacing: -.055em; font-weight: 800; }
.demo-quote p { opacity: .65; font-size: 12px; }
.demo-footer { padding: 70px 0; }
.demo-footer .demo-shell { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid currentColor; padding-top: 35px; font-size: 11px; }

.professional { background: #f1ede4; color: #101d35; }
.professional .demo-hero { position: relative; overflow: hidden; color: #fff; background: #101d35; }
.professional .demo-hero::before { content:""; position:absolute; width:500px; height:500px; right:-120px; top:50px; border:1px solid rgba(255,255,255,.2); border-radius:50%; box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025); }
.professional .hero-copy { position: relative; z-index: 2; padding: 85px 0; }
.professional .hero-copy small { display:block; margin-bottom:30px; color:#d8ff35; font-family:ui-monospace,monospace; letter-spacing:.15em; }
.professional .demo-button { background:#d8ff35; color:#101d35; border-color:#d8ff35; }
.professional .demo-grid article:nth-child(2) { background:#101d35; color:#fff; }
.professional .demo-quote { background:#d8ff35; color:#101d35; }

.education { background:#fff4e9; color:#211915; }
.education .demo-nav .logo { color:#ec5d46; }
.education .demo-hero { position:relative; background:#fff4e9; }
.education .demo-hero::after { content:"8"; position:absolute; right:6vw; bottom:-60px; color:#ec5d46; font:900 470px/1 Georgia,serif; opacity:.12; }
.education .hero-copy { position:relative; z-index:2; max-width:780px; padding:80px 0; }
.education .hero-copy small { display:inline-block; margin-bottom:30px; padding:8px 12px; background:#f5caff; border:1px solid #211915; font-weight:800; }
.education h1 em { color:#ec5d46; font-style:normal; }
.education .demo-button { background:#ec5d46; color:#fff; border-color:#ec5d46; }
.education .demo-grid article { border-radius:60px 60px 0 0; }
.education .demo-grid article:nth-child(2) { background:#f5caff; }
.education .demo-quote { background:#ec5d46; color:#fff; }

.local { background:#e9dfcc; color:#2a261f; }
.local .demo-nav { color:#f7f0e3; }
.local .local-top { background:linear-gradient(120deg,rgba(24,22,18,.82),rgba(24,22,18,.22)), radial-gradient(circle at 75% 30%,#bcae94 0,#786f60 35%,#38342c 100%); color:#fff; }
.local .demo-hero { min-height:720px; }
.local .hero-copy { max-width:850px; padding:90px 0; }
.local .hero-copy small { display:block; margin-bottom:28px; font-family:Georgia,serif; font-style:italic; letter-spacing:.1em; }
.local .demo-button { background:#eee1ca; color:#2a261f; border-color:#eee1ca; }
.local .demo-grid article { background:#f4ecdd; }
.local .demo-grid article:nth-child(2) { transform:translateY(25px); }
.local .demo-quote { background:#3b362e; color:#f4ecdd; }

@media(max-width:700px){
  .demo-note { align-items:flex-start; flex-direction:column; gap:3px; }
  .demo-nav nav { display:none; }
  .demo-hero { min-height:600px; }
  .demo-hero h1 { font-size:clamp(52px,16vw,78px); }
  .demo-stats strong { font-size:24px; }
  .demo-grid { grid-template-columns:1fr; }
  .demo-grid article { min-height:220px; }
  .local .demo-grid article:nth-child(2){ transform:none; }
  .demo-footer .demo-shell { align-items:flex-start; flex-direction:column; gap:20px; }
}