/* ═══════════════════════════════════════════════════
   PresentSync — Neumorphic website
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #E8E8E8;
  --bg-d: #DCDCDC;
  --bg-dd: #D0D0D0;
  --text: #1C1C1E;
  --text-s: #48484A;
  --text-m: #6C6C70;
  --text-h: #8E8E93;
  --text-p: #AEAEB2;
  --orange: #FF9F0A;
  --orange-d: #E8900A;
  --red: #FF3B30;
  --green: #34C759;
  --blue: #3B82F6;
  --sd: rgba(180,180,180,0.7);
  --sl: rgba(255,255,255,0.85);
  --sd-s: rgba(160,160,160,0.75);
  --sl-s: rgba(255,255,255,0.95);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ═══════ NAVBAR ═══════ */

.navbar {
  position: fixed; top:0; left:0; right:0;
  z-index: 1000;
  background: var(--bg);
  box-shadow: 0 4px 14px var(--sd), 0 -2px 6px var(--sl);
  transition: box-shadow 0.3s;
}
.nav-inner {
  max-width: 1120px; margin:0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 28px;
}
.nav-logo { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.logo-icon-img {
  border-radius: 6px;
  vertical-align: middle;
}
.logo-icon { font-size:20px; color:var(--text-m); }
.logo-text { font-size:17px; font-weight:800; color:var(--text); letter-spacing:-0.3px; }

.nav-links { display:flex; gap:6px; }
.nav-link {
  padding: 7px 16px; font-size:13px; font-weight:600;
  color: var(--text-s); text-decoration:none; border-radius:10px;
  background: var(--bg);
  box-shadow: 2px 2px 5px var(--sd), -2px -2px 5px var(--sl);
  transition: all 0.2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--orange);
  box-shadow: 3px 3px 8px var(--sd), -3px -3px 8px var(--sl);
  transform: translateY(-1px);
}
.nav-link:active {
  box-shadow: inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl);
  transform: translateY(0);
}

.nav-right { display:flex; align-items:center; gap:10px; }

.lang-select {
  padding: 5px 24px 5px 10px; font-size:12px; font-weight:600;
  color: var(--orange); background: var(--bg); border:none;
  border-radius: 8px; cursor:pointer;
  box-shadow: 2px 2px 5px var(--sd), -2px -2px 5px var(--sl);
  transition: all 0.2s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FF9F0A' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
}
.lang-select:hover {
  box-shadow: 3px 3px 8px var(--sd), -3px -3px 8px var(--sl);
  transform: translateY(-1px);
}
.lang-select:focus {
  box-shadow: inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl),
    0 0 0 2px rgba(255, 159, 10, 0.2);
}

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text-s); border-radius:2px; transition:transform 0.2s;
}

/* ═══════ BUTTONS ═══════ */

.btn-neu {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; font-size:14px; font-weight:700;
  border-radius:12px; text-decoration:none; border:none; cursor:pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-lg { padding:15px 40px; font-size:15px; border-radius:14px; }

.btn-neu-orange {
  background: linear-gradient(135deg, var(--orange-d), var(--orange));
  color:#fff;
  box-shadow: 4px 4px 10px var(--sd), -4px -4px 10px var(--sl), 0 3px 12px rgba(255,159,10,0.35);
}
.btn-neu-orange:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 14px var(--sd-s), -5px -5px 14px var(--sl-s), 0 6px 20px rgba(255,159,10,0.5);
}
.btn-neu-orange:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 1px 1px 3px var(--sd), -1px -1px 3px var(--sl), 0 1px 4px rgba(255,159,10,0.15);
}

.btn-neu-ghost {
  background: var(--bg); color: var(--text-s);
  box-shadow: 4px 4px 10px var(--sd), -4px -4px 10px var(--sl);
}
.btn-neu-ghost:hover {
  color: var(--orange); transform: translateY(-2px);
  box-shadow: 5px 5px 14px var(--sd-s), -5px -5px 14px var(--sl-s);
}
.btn-neu-ghost:active {
  transform: translateY(0) scale(0.97);
  box-shadow: inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl);
}

.btn-neu-disabled {
  background: var(--bg-d); color: var(--text-p);
  box-shadow: 2px 2px 5px var(--sd), -2px -2px 5px var(--sl);
  cursor: default; pointer-events: none;
}

/* ═══════ HERO ═══════ */

.hero { padding:104px 28px 64px; }
.hero-inner {
  max-width:1120px; margin:0 auto;
}
.hero-text { margin-bottom:40px; }
.hero-eyebrow {
  font-size:12px; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;
}
.hero-title {
  font-size:36px; font-weight:900; line-height:1.25;
  color:var(--text); margin-bottom:14px;
}
.hero-desc {
  font-size:14px; color:var(--text-m); line-height:1.8;
  margin-bottom:18px; max-width:480px;
}

/* Role descriptions stacked */
.hero-roles {
  display:inline-flex; flex-direction:column; gap:8px;
  margin-bottom:28px;
}
.hero-role-line {
  font-size:14px; color:var(--text-s); line-height:1.7;
  padding:8px 16px;
  border-radius:10px; background:var(--bg-d);
  box-shadow: inset 2px 2px 4px rgba(175,175,175,0.4), inset -2px -2px 4px rgba(255,255,255,0.5);
}

/* Dual mockup layout — equal size */
.hero-duo {
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  margin-bottom:20px;
}
.hero-mock-col {
  display:flex; flex-direction:column; align-items:center;
}
.mock-label {
  margin-top:10px; font-size:12px; font-weight:600;
  color:var(--text-h); text-align:center;
}
.hero-tagline-center {
  text-align:center; font-size:14px; color:var(--text-h); font-weight:500;
}

/* Unified mock frame — equal height */
.mock-frame {
  width:100%; height:320px; border-radius:16px; overflow:hidden;
  background:var(--bg);
  box-shadow: 8px 8px 18px var(--sd), -8px -8px 18px var(--sl);
  display:flex; flex-direction:column;
}
.mock-titlebar { display:flex; gap:5px; padding:9px 12px; background:#DEDEDE; }
.tb-dot { width:9px; height:9px; border-radius:50%; }
.tb-dot.red { background:#FF5F57; } .tb-dot.yellow { background:#FEBC2E; } .tb-dot.green { background:#28C840; }
.mock-body { padding:14px; flex:1; display:flex; flex-direction:column; }
.mb-brand { font-size:16px; font-weight:800; text-align:center; margin-bottom:6px; }
.mb-status {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:10px; color:var(--green); padding:5px; border-radius:8px; margin-bottom:10px;
  background:var(--bg-d);
  box-shadow: inset 2px 2px 4px rgba(175,175,175,0.4), inset -2px -2px 4px rgba(255,255,255,0.5);
}
.mb-led { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.mb-main-row { display:flex; gap:14px; align-items:flex-start; flex:1; }

.mb-qr-big {
  width:90px; height:90px; flex-shrink:0; padding:6px;
  border-radius:8px; background:var(--bg-d);
  box-shadow: inset 2px 2px 4px rgba(175,175,175,0.35), inset -2px -2px 4px rgba(255,255,255,0.45);
}

.mb-info-col { flex:1; }
.mb-code-label { font-size:8px; color:var(--text-h); text-transform:uppercase; font-weight:700; margin-bottom:2px; }
.mb-code { display:flex; gap:3px; margin-bottom:3px; }
.mb-code span {
  display:flex; align-items:center; justify-content:center;
  width:24px; height:28px; font-size:15px; font-weight:800;
  font-family:"SF Mono",Consolas,monospace; border-radius:5px;
  background:var(--bg); box-shadow:2px 2px 4px var(--sd), -2px -2px 4px var(--sl);
}
.mb-meta { font-size:10px; color:var(--text-p); margin-top:4px; }

/* Phone frame inside mock-frame */
.mock-frame-phone { border-radius:20px; }
.mf-header {
  font-size:14px; font-weight:700; text-align:center;
  padding:14px 14px 8px; color:var(--text);
}
.mf-pad {
  margin:0 14px 12px; flex:1; border-radius:14px;
  background:var(--bg-d); position:relative; overflow:hidden;
  box-shadow: inset 3px 3px 6px rgba(170,170,170,0.5), inset -3px -3px 6px rgba(255,255,255,0.5);
}
.mf-bar {
  font-size:12px; color:var(--text-h); text-align:center; padding:10px;
  margin:0 14px 14px; border-radius:10px; background:var(--bg);
  box-shadow:2px 2px 4px var(--sd), -2px -2px 4px var(--sl);
}

/* Desktop mockup — canvas with animated cursors */
.mb-canvas {
  position:relative; height:80px; margin-top:10px;
  border-radius:8px; background:var(--bg-d);
  box-shadow: inset 2px 2px 4px rgba(175,175,175,0.35), inset -2px -2px 4px rgba(255,255,255,0.45);
  overflow:hidden;
}
.mb-cursor {
  position:absolute; width:9px; height:9px; border-radius:50%;
  z-index:2;
}
.mb-cursor.c1 {
  background:#FF6B35;
  box-shadow:0 0 6px rgba(255,107,53,0.7);
  animation: mc1 4s ease-in-out infinite;
}
.mb-cursor.c2 {
  background:#3B82F6;
  box-shadow:0 0 6px rgba(59,130,246,0.7);
  animation: mc2 4s ease-in-out infinite;
}
.mb-cursor-label {
  position:absolute; font-size:7px; font-weight:700;
  padding:1px 4px; border-radius:3px; z-index:2;
  white-space:nowrap; pointer-events:none;
}
.mb-cursor-label.c1 {
  color:#FF6B35; background:rgba(255,107,53,0.12);
  animation: ml1 4s ease-in-out infinite;
}
.mb-cursor-label.c2 {
  color:#3B82F6; background:rgba(59,130,246,0.12);
  animation: ml2 4s ease-in-out infinite;
}
.mb-cursor-trail {
  position:absolute; width:5px; height:5px; border-radius:50%;
  opacity:0.25; z-index:1;
}
.mb-cursor-trail.c1 {
  background:#FF6B35;
  animation: mt1 4s ease-in-out infinite;
}
.mb-cursor-trail.c2 {
  background:#3B82F6;
  animation: mt2 4s ease-in-out infinite;
}

@keyframes mc1 {
  0%   { top:25%; left:20%; }
  25%  { top:55%; left:45%; }
  50%  { top:30%; left:65%; }
  75%  { top:60%; left:35%; }
  100% { top:25%; left:20%; }
}
@keyframes ml1 {
  0%   { top:12%; left:24%; }
  25%  { top:42%; left:49%; }
  50%  { top:17%; left:69%; }
  75%  { top:47%; left:39%; }
  100% { top:12%; left:24%; }
}
@keyframes mt1 {
  0%   { top:27%; left:22%; opacity:0.3; }
  25%  { top:57%; left:47%; opacity:0.15; }
  50%  { top:32%; left:67%; opacity:0.3; }
  75%  { top:62%; left:37%; opacity:0.15; }
  100% { top:27%; left:22%; opacity:0.3; }
}

@keyframes mc2 {
  0%   { top:60%; left:70%; }
  25%  { top:35%; left:50%; }
  50%  { top:65%; left:25%; }
  75%  { top:40%; left:60%; }
  100% { top:60%; left:70%; }
}
@keyframes ml2 {
  0%   { top:48%; left:74%; }
  25%  { top:23%; left:54%; }
  50%  { top:53%; left:29%; }
  75%  { top:28%; left:64%; }
  100% { top:48%; left:74%; }
}
@keyframes mt2 {
  0%   { top:62%; left:72%; opacity:0.3; }
  25%  { top:37%; left:52%; opacity:0.15; }
  50%  { top:67%; left:27%; opacity:0.3; }
  75%  { top:42%; left:62%; opacity:0.15; }
  100% { top:62%; left:72%; opacity:0.3; }
}

/* ═══════ GENERIC SECTIONS ═══════ */

.section { padding:60px 28px 80px; max-width:1120px; margin:0 auto; }
.section-alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-d) 100%); max-width:none; }
.section-alt > * { max-width:1120px; margin-left:auto; margin-right:auto; }

.section-title {
  font-size:28px; font-weight:900; text-align:center;
  color:var(--text); margin-bottom:8px;
}
.section-sub {
  font-size:14px; color:var(--text-m); text-align:center; margin-bottom:40px;
}

/* ═══════ HOW IT WORKS (Steps) ═══════ */

.steps-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.step-item {
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.step-num-badge {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:var(--orange);
  background:var(--bg);
  box-shadow: 3px 3px 6px var(--sd), -3px -3px 6px var(--sl);
  margin-bottom:10px;
}
.led {
  width:14px; height:14px; border-radius:50%; position:relative; margin-bottom:14px;
}
.led::before {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:var(--bg); box-shadow:2px 2px 4px var(--sd), -2px -2px 4px var(--sl); z-index:-1;
}
.led.green { background:var(--green); box-shadow:0 0 8px var(--green),0 0 3px var(--green); }
.led.orange { background:var(--orange); box-shadow:0 0 8px var(--orange),0 0 3px var(--orange); }
.led.blue { background:var(--blue); box-shadow:0 0 8px var(--blue),0 0 3px var(--blue); }

.step-card {
  padding:22px 18px; border-radius:16px; background:var(--bg);
  box-shadow:6px 6px 12px var(--sd), -6px -6px 12px var(--sl);
  width:100%;
}
.step-card h3 { font-size:15px; font-weight:800; margin-bottom:8px; color:var(--text); }
.step-card p { font-size:12px; color:var(--text-m); line-height:1.6; }

/* ═══════ FEATURES (4-grid) ═══════ */

.feat-grid-4 {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.feat-card {
  padding:24px 18px; border-radius:16px; background:var(--bg);
  box-shadow:6px 6px 12px var(--sd), -6px -6px 12px var(--sl);
  text-align:center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feat-card:hover {
  transform:translateY(-3px);
  box-shadow:8px 8px 16px var(--sd-s), -8px -8px 16px var(--sl-s);
}
.feat-well {
  width:56px; height:56px; margin:0 auto 14px; border-radius:14px;
  background:var(--bg-d);
  box-shadow: inset 3px 3px 6px rgba(170,170,170,0.45), inset -3px -3px 6px rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
}
.feat-card h3 { font-size:14px; font-weight:800; color:var(--text); margin-bottom:6px; }
.feat-card p { font-size:12px; color:var(--text-m); line-height:1.5; }

/* ═══════ SCENARIOS ═══════ */

.scenario-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.scenario-card {
  padding:24px 18px; border-radius:16px; background:var(--bg);
  box-shadow:6px 6px 12px var(--sd), -6px -6px 12px var(--sl);
  transition: transform 0.2s;
}
.scenario-card:hover { transform:translateY(-3px); }
.scenario-card h3 { font-size:15px; font-weight:800; color:var(--orange); margin-bottom:6px; }
.scenario-card p { font-size:12px; color:var(--text-m); line-height:1.5; }

/* ═══════ DOWNLOAD PAGE ═══════ */

.dl-hero {
  padding: 104px 28px 40px;
}
.dl-hero-inner {
  max-width:800px; margin:0 auto; text-align:center;
}
.dl-eyebrow {
  font-size:12px; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
}
.dl-title {
  font-size:36px; font-weight:900; color:var(--text); margin-bottom:14px;
}
.dl-intro {
  font-size:14px; color:var(--text-m); line-height:1.8; margin-bottom:20px;
}
.dl-highlight-bar {
  display:inline-block; padding:12px 20px; border-radius:12px;
  background:var(--bg-d);
  box-shadow: inset 3px 3px 6px rgba(170,170,170,0.45), inset -3px -3px 6px rgba(255,255,255,0.5);
}
.dl-highlight-bar p {
  font-size:13px; color:var(--text-s); font-weight:500;
}

/* Platform cards */
.dl-platforms { padding: 32px 28px 60px; }
.dl-platforms-inner {
  max-width:800px; margin:0 auto;
  display:flex; flex-direction:column; gap:20px;
}

.platform-card {
  padding:24px; border-radius:18px; background:var(--bg);
  box-shadow:6px 6px 14px var(--sd), -6px -6px 14px var(--sl);
  transition: transform 0.2s;
}
.platform-card:hover { transform:translateY(-2px); }

.pc-header { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.pc-icon {
  width:52px; height:52px; flex-shrink:0; border-radius:14px;
  background:var(--bg);
  box-shadow:3px 3px 6px var(--sd), -3px -3px 6px var(--sl);
  display:flex; align-items:center; justify-content:center;
}
.pc-title-area { flex:1; }
.pc-title-area h3 { font-size:16px; font-weight:800; color:var(--text); margin-bottom:4px; }

.pc-badge {
  display:inline-block; padding:3px 10px; font-size:11px; font-weight:700;
  border-radius:6px;
}
.pc-badge.available { background:#D8F5E0; color:#1D8348; }
.pc-badge.awaiting_link { background:#FFF3CD; color:#856404; }
.pc-badge.coming_soon { background:#FFF3CD; color:#856404; }
.pc-badge.testing { background:#D6E9FF; color:#1A5276; }
.pc-badge.planned { background:#E8E8E8; color:#8E8E93; box-shadow: inset 1px 1px 3px rgba(170,170,170,0.3); }
.pc-badge.pending_release { background:#FFF3CD; color:#856404; }

.pc-desc { font-size:13px; color:var(--text-m); line-height:1.6; margin-bottom:16px; }

.pc-btn { font-size:13px; padding:10px 24px; }
.pc-actions {
  display:flex; flex-wrap:wrap; gap:10px;
}

/* Install notes */
.dl-notes-section { max-width:none; padding-bottom:40px; }
.dl-notes-inner {
  max-width:800px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.dl-notes-card {
  padding:22px; border-radius:16px; background:var(--bg);
  box-shadow:5px 5px 10px var(--sd), -5px -5px 10px var(--sl);
}
.dl-notes-card h2 { font-size:16px; font-weight:800; color:var(--text); margin-bottom:12px; }
.dl-notes-card ul {
  list-style:none; padding:0;
}
.dl-notes-card li {
  font-size:12px; color:var(--text-m); line-height:1.6;
  padding:8px 12px; margin-bottom:6px; border-radius:10px;
  background:var(--bg-d);
  box-shadow: inset 2px 2px 4px rgba(175,175,175,0.35), inset -2px -2px 4px rgba(255,255,255,0.45);
}
.dl-notes-card p { font-size:13px; color:var(--text-m); line-height:1.6; }

/* ═══════ FOOTER ═══════ */

.site-footer { padding:22px 28px; margin-top:20px; }
.footer-inner {
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-left { display:flex; align-items:center; gap:8px; }
.footer-brand { font-size:14px; font-weight:700; color:var(--text); }
.footer-tagline { font-size:12px; color:var(--text-h); }
.footer-links { display:flex; gap:16px; margin-top:6px; }
.footer-links a {
  font-size:12px; color:var(--text-m); text-decoration:none;
  transition: color 0.2s;
}
.footer-links a:hover { color:var(--orange); }
.footer-record {
  margin-top:14px;
  text-align:center;
  font-size:12px;
}
.footer-record a {
  color:var(--text-m);
  text-decoration:none;
  transition: color 0.2s;
}
.footer-record a:hover { color:var(--orange); }

.footer-inner {
  flex-wrap: wrap;
}

/* ═══════ SUPPORT PAGE ═══════ */

.support-stack {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.support-email-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.support-email-row a.btn-neu {
  word-break: break-all;
  text-align: center;
}
.support-faq-item h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.support-faq-item p {
  font-size: 13px;
  color: var(--text-m);
  line-height: 1.65;
}
.support-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.support-related-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.support-related-links a:hover {
  text-decoration: underline;
}

/* ═══════ SCROLL REVEAL ═══════ */

.reveal-ready {
  opacity:0; transform:translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.revealed { opacity:1 !important; transform:translateY(0) !important; }

/* ═══════ RESPONSIVE ═══════ */

@media (max-width:860px) {
  .hero-title { font-size:28px; }
  .hero-desc { max-width:none; }
  .hero-duo { grid-template-columns:1fr; max-width:380px; margin:0 auto 20px; }
  .steps-row { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .feat-grid-4 { grid-template-columns:repeat(2,1fr); }
  .scenario-grid { grid-template-columns:repeat(2,1fr); }
  .dl-notes-inner { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; gap:8px; text-align:center; }
}

@media (max-width:560px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:60px; left:0; right:0;
    background:var(--bg); padding:14px 20px; gap:8px;
    box-shadow:0 6px 14px var(--sd); z-index:999;
  }
  .nav-hamburger { display:flex; }
  .hero { padding:88px 18px 48px; }
  .hero-title { font-size:24px; }
  .btn-neu { padding:12px 20px; font-size:13px; }
  .section { padding:40px 18px 60px; }
  .section-title { font-size:22px; }
  .feat-grid-4 { grid-template-columns:1fr; }
  .scenario-grid { grid-template-columns:1fr; }
  .dl-hero { padding:88px 18px 32px; }
  .dl-title { font-size:28px; }
}