:root {
  --demo-bg: #fff;
  --demo-surface: #f3f5f6;
  --demo-text: #18222b;
  --demo-muted: #59636c;
  --demo-accent: #00a9c8;
  --demo-contrast: #102437;
  --demo-border: rgba(20, 34, 45, .16);
  --demo-radius: 1rem;
  --demo-content: 76rem;
  --demo-display: ui-serif, Georgia, serif;
  --demo-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--demo-bg); margin: 0; }
.ezy-skip-link { background: #fff; color: #111; left: .75rem; padding: .75rem 1rem; position: fixed; top: -8rem; z-index: 1000; }
.ezy-skip-link:focus { top: .75rem; }
.ezy-demo, .ezy-demo * { box-sizing: border-box; }
.ezy-demo { background: var(--demo-bg); color: var(--demo-text); font-family: var(--demo-body); overflow: clip; }
.ezy-demo :where(a, summary):focus-visible { outline: .2rem solid var(--demo-accent); outline-offset: .2rem; }
.ezy-demo :where(h1, h2, h3, p) { margin-top: 0; }
.ezy-demo :where(p, li) { color: var(--demo-muted); line-height: 1.72; }
.ezy-demo :where(.ezy-demo-header, .ezy-demo-hero, .ezy-demo-context, .ezy-demo-section, .ezy-demo-footer) { margin-inline: auto; max-width: var(--demo-content); }
.ezy-demo-header { align-items: center; display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; min-height: 4.5rem; padding: .75rem 1rem; }
.ezy-demo-brand { color: var(--demo-text); font-family: var(--demo-display); font-size: 1.4rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; }
.ezy-demo-header nav { min-width: 0; overflow-x: auto; }
.ezy-demo-header ul { display: flex; gap: 1.25rem; justify-content: center; list-style: none; margin: 0; min-width: max-content; padding: 0; }
.ezy-demo-header nav a { color: var(--demo-text); font-size: .85rem; font-weight: 700; min-height: 2.75rem; padding: .75rem 0; text-decoration: none; }
.ezy-demo-header__cta { border: .0625rem solid var(--demo-text); border-radius: 999px; color: var(--demo-text); font-size: .8rem; font-weight: 800; min-height: 2.75rem; padding: .7rem 1rem; text-decoration: none; }
.ezy-demo-eyebrow { color: var(--demo-accent) !important; font-size: .72rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.ezy-demo-hero { display: grid; gap: 2rem; padding: clamp(2.5rem, 7vw, 7rem) 1rem; }
.ezy-demo-hero__copy { align-self: center; }
.ezy-demo h1, .ezy-demo h2 { font-family: var(--demo-display); letter-spacing: -.045em; }
.ezy-demo h1 { font-size: clamp(2.65rem, 9vw, 6.7rem); line-height: .94; max-width: 12ch; }
.ezy-demo-hero__copy > p:not(.ezy-demo-eyebrow) { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 37rem; }
.ezy-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.ezy-demo-button { align-items: center; border: .1rem solid transparent; border-radius: 999px; display: inline-flex; font-weight: 800; justify-content: center; min-height: 3.1rem; padding: .75rem 1.2rem; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.ezy-demo-button:hover { transform: translateY(-.12rem); }
.ezy-demo-button--primary { background: var(--demo-contrast); color: #fff; }
.ezy-demo-button--outline { border-color: var(--demo-text); color: var(--demo-text); }
.ezy-demo-button--light { background: #fff; color: #111; }
.ezy-demo-hero__media { align-items: flex-start; aspect-ratio: 4 / 5; background: var(--demo-surface); border-radius: var(--demo-radius); display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; overflow: hidden; padding: 1.5rem; position: relative; }
.ezy-demo-hero__media::before, .ezy-demo-hero__media::after { content: ''; position: absolute; }
.ezy-demo-hero__media::before { background: var(--demo-accent); height: 48%; right: 10%; top: 10%; width: 48%; }
.ezy-demo-hero__media::after { border: .1rem solid var(--demo-text); bottom: 15%; height: 36%; left: 12%; width: 45%; }
.ezy-demo-hero__media span, .ezy-demo-hero__media small { position: relative; z-index: 1; }
.ezy-demo-hero__media span { color: var(--demo-text); font-family: var(--demo-display); font-size: 1.6rem; font-weight: 750; }
.ezy-demo-hero__media small { color: var(--demo-muted); margin-top: .25rem; }
.ezy-demo-context { border-block: .0625rem solid var(--demo-border); display: grid; padding: 1rem; }
.ezy-demo-context p { display: flex; flex-direction: column; font-size: .82rem; margin: 0; padding: .75rem 0; }
.ezy-demo-context strong { color: var(--demo-text); }
.ezy-demo-section { padding: clamp(4rem, 9vw, 8rem) 1rem; }
.ezy-demo-section--tinted { background: var(--demo-surface); max-width: none; padding-inline: max(1rem, calc((100% - var(--demo-content)) / 2 + 1rem)); }
.ezy-demo-section > header { margin-bottom: 2rem; max-width: 49rem; }
.ezy-demo-section h2, .ezy-demo-footer h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.03; }
.ezy-demo-section > header > p:last-child { font-size: 1.05rem; max-width: 44rem; }
.ezy-demo-section__grid { display: grid; gap: 1rem; }
.ezy-demo-section__grid article { background: var(--demo-bg); border: .0625rem solid var(--demo-border); border-radius: var(--demo-radius); min-height: 15rem; padding: 1.4rem; }
.ezy-demo-section--plain .ezy-demo-section__grid article { background: var(--demo-surface); }
.ezy-demo-section__grid article > span { color: var(--demo-accent); font-size: .72rem; font-weight: 850; }
.ezy-demo-section__grid h3 { font-family: var(--demo-display); font-size: 1.45rem; line-height: 1.2; margin: 3rem 0 .75rem; }
.ezy-demo-section__grid p { font-size: .82rem; }
.ezy-demo-footer { align-items: center; background: var(--demo-contrast); color: #fff; display: grid; gap: 2rem; margin-top: 1rem; padding: clamp(2.5rem, 7vw, 5rem); }
.ezy-demo-footer :where(h2, p) { color: #fff; }
.ezy-demo-footer > div { max-width: 47rem; }
.ezy-demo-sticky { background: var(--demo-contrast); border-radius: 999px; bottom: max(.75rem, env(safe-area-inset-bottom)); box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.22); color: #fff; font-weight: 850; min-height: 3rem; padding: .8rem 1.1rem; position: fixed; right: .75rem; text-decoration: none; z-index: 50; }

/* SAJI — warm, organic, food-first */
.ezy-demo--saji { --demo-bg:#fffaf2; --demo-surface:#f3e4d0; --demo-text:#35251e; --demo-muted:#674e41; --demo-accent:#a6462d; --demo-contrast:#7e3424; --demo-border:rgba(80,48,35,.18); --demo-radius:2rem; --demo-display:Georgia,"Times New Roman",serif; }
.ezy-demo--saji .ezy-demo-hero__media { border-radius: 48% 48% 2rem 2rem; transform: rotate(1.5deg); }
.ezy-demo--saji .ezy-demo-hero__media::before { border-radius: 50%; }
.ezy-demo--saji .ezy-demo-section__grid article:nth-child(2) { transform: translateY(1rem); }

/* NUSA — corporate grid and measured spacing */
.ezy-demo--nusa { --demo-bg:#fff; --demo-surface:#eef2f5; --demo-text:#0b2038; --demo-muted:#4c5d6d; --demo-accent:#008ca8; --demo-contrast:#0b2038; --demo-radius:.2rem; --demo-display:Arial,Helvetica,sans-serif; }
.ezy-demo--nusa .ezy-demo-header, .ezy-demo--nusa .ezy-demo-context { border-color:#cbd6de; }
.ezy-demo--nusa .ezy-demo-hero__media::before { border-radius:0; height:22%; left:0; right:auto; top:0; width:100%; }
.ezy-demo--nusa .ezy-demo-section__grid article { border-top:.3rem solid var(--demo-accent); }
.ezy-demo--nusa h1, .ezy-demo--nusa h2 { font-weight:850; }

/* FORMA — editorial, natural, asymmetric */
.ezy-demo--forma { --demo-bg:#fcf8f0; --demo-surface:#e9dfd0; --demo-text:#173b2b; --demo-muted:#5f6255; --demo-accent:#8a5a38; --demo-contrast:#173b2b; --demo-radius:0; --demo-display:Georgia,"Times New Roman",serif; }
.ezy-demo--forma .ezy-demo-hero { align-items:end; }
.ezy-demo--forma .ezy-demo-hero__media { aspect-ratio:3/4; margin-left:auto; width:88%; }
.ezy-demo--forma .ezy-demo-hero__media::before { bottom:0; height:100%; opacity:.25; right:0; top:auto; transform:skew(-7deg); width:58%; }
.ezy-demo--forma .ezy-demo-section__grid article:nth-child(2) { margin-top:2.5rem; }
.ezy-demo--forma .ezy-demo-section__grid article:nth-child(3) { margin-top:1rem; }

/* AURA — gentle premium whitespace */
.ezy-demo--aura { --demo-bg:#fffdfb; --demo-surface:#f8f1e9; --demo-text:#532b47; --demo-muted:#715d69; --demo-accent:#a86474; --demo-contrast:#532b47; --demo-border:rgba(83,43,71,.14); --demo-radius:2.25rem; --demo-display:Georgia,"Times New Roman",serif; }
.ezy-demo--aura .ezy-demo-hero { padding-block:clamp(4rem,10vw,9rem); }
.ezy-demo--aura .ezy-demo-hero__media { border-radius:12rem 12rem 2rem 2rem; }
.ezy-demo--aura .ezy-demo-hero__media::before { border-radius:50% 50% 15% 50%; opacity:.62; }
.ezy-demo--aura .ezy-demo-section__grid article { box-shadow:0 1rem 3rem rgba(83,43,71,.06); }

/* ARUNA — clean listing system */
.ezy-demo--aruna { --demo-bg:#fff; --demo-surface:#e8e7e2; --demo-text:#123c32; --demo-muted:#52645f; --demo-accent:#9c6a3d; --demo-contrast:#123c32; --demo-radius:.5rem; --demo-display:Arial,Helvetica,sans-serif; }
.ezy-demo--aruna .ezy-demo-hero__media::before { background:linear-gradient(135deg,#123c32 0 48%,#9c6a3d 48% 54%,#d2d0c7 54%); height:70%; right:0; top:0; width:100%; }
.ezy-demo--aruna .ezy-demo-section__grid article { min-height:17rem; }
.ezy-demo--aruna #properti-unggulan .ezy-demo-section__grid h3 { border-bottom:.0625rem solid var(--demo-border); padding-bottom:1rem; }

/* MENTOR — personal, bold, high contrast */
.ezy-demo--mentor { --demo-bg:#fff; --demo-surface:#f1f3f5; --demo-text:#111; --demo-muted:#4e5357; --demo-accent:#008ea8; --demo-contrast:#111; --demo-radius:0; --demo-display:Arial Black,Arial,Helvetica,sans-serif; }
.ezy-demo--mentor h1 { font-weight:900; text-transform:uppercase; }
.ezy-demo--mentor .ezy-demo-hero__media { background:#111; color:#fff; }
.ezy-demo--mentor .ezy-demo-hero__media::before { background:var(--demo-accent); border-radius:50%; height:42%; right:8%; top:8%; width:42%; }
.ezy-demo--mentor .ezy-demo-hero__media::after { border-color:#fff; bottom:9%; height:65%; left:15%; transform:rotate(-5deg); width:52%; }
.ezy-demo--mentor .ezy-demo-hero__media :where(span,small) { color:#fff; }
.ezy-demo--mentor .ezy-demo-section__grid article { border-width:.15rem; }

@media (min-width: 40rem) {
  .ezy-demo-context { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ezy-demo-context p + p { border-left:.0625rem solid var(--demo-border); padding-left:1rem; }
  .ezy-demo-section__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width: 48rem) {
  .ezy-demo-hero { grid-template-columns:minmax(0,1.05fr) minmax(19rem,.75fr); }
  .ezy-demo-footer { grid-template-columns:1fr auto; }
  .ezy-demo-sticky { display:none; }
}

@media (max-width: 39.99rem) {
  .ezy-demo-header { grid-template-columns:1fr auto; }
  .ezy-demo-header nav { grid-column:1/-1; grid-row:2; }
  .ezy-demo-header ul { justify-content:flex-start; }
  .ezy-demo-footer { padding-bottom:6rem; }
}

@media (max-width: 78rem) {
  .ezy-demo-footer { max-width:none; }
}

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