:root {
  --navy:      #0d172d;
  --navy-mid:  #0c1a35;
  --navy-card: #1c2e5a;
  --navy-card2:#1f335f;
  --blue:      #1e72f0;
  --blue-v:    #2979ff;
  --blue-g:    #3d8bff;
  --blue-s:    #5ba4ff;
  --accent:    #00d4ff;
  --gold:      #ffd166;
  --green:     #00e5a0;
  --w:         #fff;
  --w70:       rgba(255,255,255,.70);
  --w40:       rgba(255,255,255,.40);
  --w10:       rgba(255,255,255,.08);
  --fd: 'Lexend Deca',sans-serif;
  --fb: 'Noto Sans Thai',sans-serif;
  --r:  16px;
  --rl: 24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--navy);color:var(--w);overflow-x:hidden;line-height:1.65}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");opacity:.4}

/* ── LANG SWITCH ── */
[data-th]{display:none !important}
[data-en]{display:inline-block}
body.lang-th [data-th]{display:inline-block !important}
body.lang-th [data-en]{display:none !important}
.block-th{display:none}
.block-en{display:block}
body.lang-th .block-th{display:block}
body.lang-th .block-en{display:none}
.flex-th{display:none}
.flex-en{display:flex}
body.lang-th .flex-th{display:flex}
body.lang-th .flex-en{display:none}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;background:rgba(7,15,31,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);transition:padding .3s, background .3s}
.nav-logo{font-family:var(--fd);font-size:1.35rem;font-weight:800;text-decoration:none;
  background:linear-gradient(135deg,var(--blue),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:var(--w70);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--w)}
.nav-right{display:flex;align-items:center;gap:12px}

/* Lang toggle */
.lang-toggle{display:flex;background:var(--w10);border:1px solid rgba(255,255,255,.12);border-radius:50px;overflow:hidden}
.lang-btn{padding:6px 14px;font-size:.78rem;font-weight:700;cursor:pointer;border:none;background:none;color:var(--w40);font-family:var(--fb);transition:all .2s}
.lang-btn.active{background:var(--blue-v);color:#fff}

.nav-cta{background:var(--blue-v);color:#fff;padding:9px 20px;border-radius:50px;font-size:.86rem;font-weight:700;text-decoration:none;transition:all .2s}
.nav-cta:hover{background:var(--blue-g);transform:translateY(-1px);box-shadow:0 8px 24px rgba(41,121,255,.4)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--w);border-radius:2px;transition:all 0.3s ease}

/* Hamburger to X Animation */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV ── */
.mobile-nav{position:fixed;inset:0;z-index:199;background:rgba(7,15,31,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  backdrop-filter:blur(20px);transform:translateX(100%);transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{color:var(--w);font-size:1.2rem;font-weight:600;text-decoration:none}
.mnav-close{position:absolute;top:24px;right:5vw;background:none;border:none;color:var(--w);font-size:1.4rem;cursor:pointer}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:130px 5vw 80px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(30,114,240,.22) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%,rgba(0,212,255,.1) 0%,transparent 60%),var(--navy)}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(30,114,240,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,114,240,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;
  background:rgba(30,114,240,.15);border:1px solid rgba(30,114,240,.35);
  padding:6px 16px;border-radius:50px;font-size:.82rem;color:var(--blue-s);font-weight:600;
  margin-bottom:28px;position:relative;z-index:1;animation:fadeUp .6s ease both}
.hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:var(--fd);font-size:clamp(2.4rem,5.5vw,5rem);font-weight:800;line-height:1.1;
  position:relative;z-index:1;animation:fadeUp .7s .1s ease both}
.gradient-text{background:linear-gradient(135deg,#fff 30%,var(--blue-s) 70%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(.95rem,1.8vw,1.18rem);color:var(--w70);max-width:680px;margin:18px auto 0;
  position:relative;z-index:1;animation:fadeUp .7s .2s ease both}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:38px;position:relative;z-index:1;animation:fadeUp .7s .3s ease both}
.hero-price-badge{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.3);
  padding:7px 16px;border-radius:50px;font-size:.86rem;color:var(--gold);font-weight:600;
  margin-top:26px;position:relative;z-index:1;animation:fadeUp .7s .4s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* mockup */
.hero-mockup{position:relative;z-index:1;margin-top:60px;width:100%;max-width:1200px;animation:fadeUp .9s .5s ease both}
.mockup-window{background:var(--navy-card);border:1px solid rgba(30,114,240,.2);border-radius:var(--rl);overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(30,114,240,.1),inset 0 1px 0 rgba(255,255,255,.06)}
.mockup-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.md{width:11px;height:11px;border-radius:50%}
.md1{background:#ff5f57}.md2{background:#febc2e}.md3{background:#28c840}

/* Mockup Navbar */
.mockup-nav{display:none; /* ปิดส่วนเดิมหากใช้ mockup-body ใหม่ */
  background:rgb(30 58 138 / var(--tw-bg-opacity, 1));border-bottom:1px solid rgba(255,255,255,.06)}
.mockup-nav-right{display:flex;align-items:center;gap:15px}
.m-user-info{display:flex;flex-direction:column;text-align:right;line-height:1.2}
.m-u-name{font-size:0.65rem;font-weight:700;color:var(--w)}
.m-u-role{font-size:0.5rem;color:var(--w40)}
.m-user-icon{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--accent));border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center}
.m-lang-btn{background:var(--w10);border:1px solid rgba(255,255,255,0.1);color:var(--w70);
  font-size:0.5rem;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:var(--fb);transition:all 0.2s;
  display:flex;align-items:center;gap:6px}
.m-lang-btn:hover{background:var(--w20);color:var(--w)}

.mockup-url{flex:1;background:rgba(255,255,255,.07);border-radius:6px;padding:5px 12px;
  font-size:.78rem;color:var(--w40);text-align:center}
.mockup-body{display:grid;grid-template-columns:180px 1fr;height:520px;background:var(--navy-mid)}
.mockup-sb{background:var(--navy-mid);border-right:1px solid var(--w10);
  padding:16px 12px;display:flex;flex-direction:column;gap:12px;order: -1; height: 100%;}

.m-sb-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 12px;
}
.m-sb-new-campaign-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #60a5fa;
  color: #60a5fa;
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.m-sb-new-campaign-btn:hover {
  border-color: #3b82f6;
  color: #2563eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.m-sb-usage-container { padding: 0 4px; }
.m-sb-usage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.m-sb-usage-label { font-size: 11px; font-weight: 600; color: #374151; }
.m-sb-usage-count { font-size: 11px; font-weight: 600; color: #60a5fa; }
.m-sb-progress-track { height: 4px; width: 100%; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.m-sb-progress-fill { height: 100%; background: #60a5fa; border-radius: 99px; transition: width 0.5s ease; }

/* Dashboard Mockup Layout */
.mockup-main { padding: 0 !important; overflow: hidden; height: 100%; display: flex; flex-direction: column; background: #12264f; }
.m-dash-layout { display: flex; height: 100%; min-height: 480px; }

/* Left Config Side */
.m-dash-config {
  width: 45%; background: #eff6ff; border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column;
  height: 100%; /* Ensure it takes full height of parent */
  overflow: hidden; /* Hide any direct overflow, let child handle scroll */
}
.m-dash-config-scroll { padding: 16px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.m-dash-title { margin-bottom: 16px; text-align: left; }
.m-dash-title div { font-size: 0.7rem; font-weight: 700; color: #000; }
.m-dash-title p span{ font-size: 0.5rem; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); font-weight: 500; padding: 0;}

.m-dash-form { display: flex; flex-direction: column; gap: 12px; }
.m-dash-fg { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.m-dash-fg label { font-size: 0.55rem; font-weight: 600; color: #475569; }
.m-dash-fg input, .m-dash-fg textarea {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px;
  font-size: 0.55rem; color: #334155; font-family: var(--fb); outline: none; background: #fff;
}
.m-dash-select {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; background: #fff;
  font-size: 0.55rem; color: #64748b; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.m-dash-disabled-select {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; background: #fff;
  font-size: 0.55rem; color: #64748b; display: flex; justify-content: space-between; align-items: center; cursor: not-allowed; opacity: .5;
}
.m-dash-upload { 
  width: 50%; 
  aspect-ratio: 1/1;
  border: 2px dashed #cbd5e1; 
  border-radius: 12px;
  padding: 8px;
  background: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  cursor: pointer;
  transition: all 0.15s;
}
.m-dash-upload:hover { border-color: var(--blue-v); background: #eff6ff; } 
.m-dash-upload-icon-circle {
  width: 28px; 
  height: 28px; 
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: rgb(255 255 255);
  display: flex; 
  align-items: center;
  justify-content: center;
  color: rgb(67, 164, 255);
}
.m-dash-upload-icon-circle svg { 
  width: 16px;
  height: 16px;
}
.m-dash-upload-text {
  text-align: center; 
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-dash-upload-text p {
  font-size: 0.55rem;
  font-weight: 600;
  color: #374151;
}
.m-dash-upload-text .m-dash-upload-hint { 
  font-size: 0.5rem;
  color: #6b7280;
  margin-top: 3px;
  font-weight: 400;
}
.m-dash-browse-btn { 
  color: var(--blue-v); 
  border-radius: 50px; 
  border: 1px solid #e2e8f0; 
  background: #fff;
  padding: 6px 20px;
  font-size: 0.55rem; 
  font-weight: 500;
  display: flex; 
  align-items: center;
  justify-content: center; 
  gap: 8px;
  transition: all 0.15s; 
}
.m-dash-browse-btn:hover { background: #f9fafb; } 

.m-dash-lang-select { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-dash-lang-select button {
  padding: 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  font-size: 0.55rem; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.2s;
}
.m-dash-lang-select button.active { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.m-dash-footer { padding: 12px 16px; background: #eff6ff; border-top: 1px solid #e2e8f0; }
.m-dash-gen-btn {
  width: 100%; background: var(--blue-v); color: #fff; border: none; border-radius: 8px;
  padding: 8px; font-size: 0.7rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 12px rgba(41, 121, 255, 0.2); transition: all 0.2s;
}
.m-dash-gen-btn:hover { background: var(--blue-g); transform: translateY(-1px); }

/* Sidebar Credit Card */
.m-sb-credit-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);display:flex;flex-direction:column;gap:6px}
.m-sb-credit-header{display:flex;justify-content:space-between;align-items:center}
.m-sb-credit-label{font-size:8.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.025em}
.m-sb-credit-info-icon{color:var(--blue-s);cursor:pointer}
.m-sb-credit-val{font-size:1rem;font-weight:700;color:#0f172a;line-height:1;text-align:left;margin-top:2px}
.m-sb-credit-btn{background:var(--blue-v);color:#fff;border:none;border-radius:8px;padding:8px 10px;
  font-size:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:6px;transition:all 0.2s;box-shadow:0 4px 12px rgba(41,121,255,0.25);font-family:var(--fb)}
.m-sb-credit-btn:hover{background:var(--blue-g);transform:translateY(-1px);box-shadow:0 6px 16px rgba(41,121,255,0.35)}

/* Sidebar Campaigns */
.m-sb-section-title {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; padding: 0 8px; margin-top: 8px; text-align:left;
}
.m-sb-campaign-list { display: flex; flex-direction: column; gap: 4px; }
.m-sb-campaign-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; color: #64748b;
}
.m-sb-campaign-item.active { background: #eff6ff; color: var(--blue-v); }
.m-sb-campaign-dot { width: 6px; height: 6px; fill: currentColor; flex-shrink: 0; }
.m-sb-campaign-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sb-campaign-more {
  background: #fff; border: none; border-radius: 6px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-v); cursor: pointer; transition: background 0.2s;
}
.m-sb-campaign-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.m-sb-campaign-more:hover { background: #f1f5f9; }

/* Right Preview Side */
.m-dash-preview {
  width: 55%; background: #f8fafc; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.m-dash-preview-box {
  width: 120px; height: 120px; background: rgb(30 58 138 / var(--tw-bg-opacity, 1)); border-radius: 20px;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 15px 45px rgba(0, 62, 167, 0.1); margin-bottom: 20px;
}
.m-dash-preview-logo {
  font-family: var(--fd); font-weight: 800; font-size: 1rem;
  background: linear-gradient(to right, var(--blue-s), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.m-dash-preview-badge {
  position: absolute; bottom: -6px; right: -6px; width: 30px; height: 30px;
  background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; transform: rotate(12deg);
}
.m-dash-preview-text h3 { font-size: 1rem; font-weight: 700; color: #000; margin-bottom: 6px; }
.m-dash-preview-text p { font-size: 0.65rem; color: #475569; max-width: 220px; line-height: 1.4; }
.m-dash-preview-stats {
  width: 100%; border-top: 1px solid #e2e8f0; margin-top: 20px; padding-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.m-dash-stat .val { font-size: 0.9rem; font-weight: 700; color: var(--blue); }
.m-dash-stat .lbl { font-size: 0.45rem; color: #94a3b8; font-weight: 700; margin-top: 2px; text-transform: uppercase; }

.sb-logo{font-family:var(--fd);font-size:.9rem;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:10px;padding-left:4px}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--w70)}
.sb-item svg{flex-shrink:0}
.sb-item.on{background:rgba(255,255,255,.1);color:var(--w);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sb-item:hover{background:var(--w10);color:var(--w)}
.mockup-hdr{padding:18px 20px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--w10);font-size:11px;font-weight:700;color:var(--w);text-align:left}

/* 2 Columns Main Content */
.mockup-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px;overflow-y:auto;flex:1;transition:opacity 0.2s ease}
.tpl-card{border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.05);aspect-ratio:1/1;
  font-size:.65rem;font-weight:600;color:#fff;text-align:center;
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
  background-size: cover; background-position: center; position: relative;}
.tpl-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.tc1{background:linear-gradient(135deg,#1a3a6e,#1e72f0)}
.tc2{background:linear-gradient(135deg,#1e3250,#00bcd4)}
.tc3{background:linear-gradient(135deg,#2d1b69,#7c4dff)}
.tc4{background:linear-gradient(135deg,#1a2a1a,#4caf50)}
.tc5{background:linear-gradient(135deg,#3e1f1f,#f44336)}
.tc6{background:linear-gradient(135deg,#2a1f3e,#e91e63)}

/* ── BTN ── */
.btn-p{display:inline-flex;align-items:center;gap:8px;background:var(--blue-v);color:#fff;
  padding:15px 30px;border-radius:50px;font-size:.98rem;font-weight:700;text-decoration:none;
  transition:all .25s;box-shadow:0 4px 24px rgba(41,121,255,.35)}
.btn-p:hover{background:var(--blue-g);transform:translateY(-2px);box-shadow:0 10px 40px rgba(41,121,255,.55)}
.btn-s{display:inline-flex;align-items:center;gap:8px;background:var(--w10);color:var(--w);
  padding:15px 26px;border-radius:50px;font-size:.98rem;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,.15);transition:all .25s;backdrop-filter:blur(8px)}
.btn-s:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* ── SECTIONS ── */
section{padding:96px 5vw;position:relative}
.slabel{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-s);margin-bottom:10px;display:block}
.stitle{font-family:var(--fd);font-size:clamp(1.7rem,3.2vw,2.8rem);font-weight:800;line-height:1.15}
.ssub{color:var(--w70);font-size:1rem;max-width:600px;margin-top:10px;line-height:1.7}
.tc{text-align:center}.tc .ssub{margin-left:auto;margin-right:auto}

/* ── STATS ── */
.stats-strip{background:var(--navy-mid);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  padding:36px 5vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.stat-item{text-align:center}
.stat-n{font-family:var(--fd);font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,var(--w) 40%,var(--blue-s));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-l{color:var(--w70);font-size:.85rem;margin-top:3px}

/* ── OVERVIEW ── */
#overview{background:var(--navy)}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:56px}
.flow-card{background:var(--navy-card);border:1px solid rgba(30,114,240,.2);border-radius:var(--rl);padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.flow-step{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.flow-step:last-child{border-bottom:none}
.flow-num{width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--accent));
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.82rem;font-weight:800}
.flow-content h4{font-size:.92rem;font-weight:700;margin-bottom:3px}
.flow-content p{font-size:.83rem;color:var(--w70)}
.ov-text{display:flex;flex-direction:column;gap:26px}
.check-item{display:flex;align-items:flex-start;gap:13px}
.check-icon{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:rgba(30,114,240,.15);border:1px solid rgba(30,114,240,.3);
  display:flex;align-items:center;justify-content:center;font-size:.65rem;margin-top:2px;color:var(--blue-s)}
.check-content h4{font-weight:700;margin-bottom:3px}
.check-content p{color:var(--w70);font-size:.9rem}

/* ── FEATURES ── */
#features{background:var(--navy-mid);border-top:1px solid rgba(255,255,255,.05)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:52px}
.feat-card{background:var(--navy-card);border:1px solid rgba(255,255,255,.07);border-radius:var(--rl);
  padding:30px 26px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--accent));opacity:0;transition:opacity .3s}
.feat-card:hover{transform:translateY(-5px);border-color:rgba(30,114,240,.3);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.feat-card:hover::before{opacity:1}
.feat-icon{width:50px;height:50px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);border:1.5px solid transparent;
  position: relative; z-index: 2;}

/* Color Variants for Icons */
.feat-icon.i-blue, .uc-icon.i-blue     { color: #60a5fa; background: rgba(96, 165, 250, 0.25); border-color: rgba(96, 165, 250, 0.5); }
.feat-icon.i-cyan, .uc-icon.i-cyan     { color: #22d3ee; background: rgba(34, 211, 238, 0.25); border-color: rgba(34, 211, 238, 0.5); }
.feat-icon.i-indigo, .uc-icon.i-indigo { color: #818cf8; background: rgba(129, 140, 248, 0.25); border-color: rgba(129, 140, 248, 0.5); }
.feat-icon.i-gold, .uc-icon.i-gold     { color: #fbbf24; background: rgba(251, 191, 36, 0.25); border-color: rgba(251, 191, 36, 0.5); }
.feat-icon.i-green, .uc-icon.i-green   { color: #34d399; background: rgba(52, 211, 153, 0.25); border-color: rgba(52, 211, 153, 0.5); }
.feat-icon.i-purple, .uc-icon.i-purple { color: #a78bfa; background: rgba(167, 139, 250, 0.25); border-color: rgba(167, 139, 250, 0.5); }
.feat-icon.i-pink, .uc-icon.i-pink     { color: #f472b6; background: rgba(244, 114, 182, 0.25); border-color: rgba(244, 114, 182, 0.5); }

.feat-card:hover .feat-icon, .uc-card:hover .uc-icon { 
  transform: translateY(-3px) scale(1.1); 
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-color: currentColor;
  filter: drop-shadow(0 0 8px currentColor);
}

.feat-icon svg{width:24px;height:24px}
.feat-card h3{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:9px}
.feat-card p{color:var(--w70);font-size:.88rem;line-height:1.65}

/* ── USE CASES ── */
#usecases{background:var(--navy)}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:48px}
.uc-card{border-radius:var(--rl);padding:28px 22px;border:1px solid rgba(255,255,255,.08);
  background:var(--navy-card2);transition:all .3s;cursor:default}
.uc-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.uc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px; transition: all 0.3s ease; border: 1.5px solid transparent;}
.uc-icon svg{width:24px;height:24px}
.uc-card h3{font-family:var(--fd);font-size:.97rem;font-weight:700;color:var(--blue-s);margin-bottom:7px}
.uc-card p{color:var(--w70);font-size:.84rem;line-height:1.6}

/* ── PRICING ── */
#pricing{background:var(--navy-mid);border-top:1px solid rgba(255,255,255,.05)}
.pricing-tabs{display:flex;justify-content:center;gap:10px;margin:28px 0 48px;flex-wrap:wrap}
.ptab{padding:9px 22px;border-radius:50px;font-size:.85rem;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);background:none;color:var(--w70);font-family:var(--fb);transition:all .2s}
.ptab.active{background:var(--blue-v);color:#fff;border-color:var(--blue-v)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.price-card{background:var(--navy-card);border:1px solid rgba(255,255,255,.08);border-radius:var(--rl);
  padding:32px 26px;transition:transform .3s;display:flex;flex-direction:column}
.price-card:hover{transform:translateY(-4px)}
.price-card.feat{border-color:rgba(30,114,240,.5);
  background:linear-gradient(160deg,rgba(14,30,70,1) 0%,rgba(10,20,46,1) 100%);
  box-shadow:0 0 50px rgba(30,114,240,.15),0 0 0 1px rgba(30,114,240,.3);position:relative;overflow:hidden}
.feat-badge{position:absolute;top:16px;right:-30px;background:var(--blue-v);
  padding:4px 42px;font-size:.7rem;font-weight:700;transform:rotate(35deg)}
.price-tier{font-size:.78rem;font-weight:700;color:var(--blue-s);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.price-amount{font-family:var(--fd);font-size:2.6rem;font-weight:800;line-height:1}
.price-amount span{font-size:1.1rem;font-weight:500;color:var(--w70)}
.price-per{color:var(--w70);font-size:.84rem;margin-top:5px;min-height:38px}
.price-div{border:none;border-top:1px solid rgba(255,255,255,.07);margin:20px 0}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1}
.price-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;color:var(--w70)}
.price-feats li::before{content:'✓';width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:rgba(30,114,240,.2);color:var(--blue-s);display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:800;margin-top:1px}
.price-feats li.x{color:rgba(255,255,255,.25)}
.price-feats li.x::before{content:'×';background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
.pcta{display:block;text-align:center;margin-top:22px;padding:12px;border-radius:50px;
  font-weight:700;font-size:.92rem;text-decoration:none;transition:all .25s;font-family:var(--fb)}
.pcta.prim{background:var(--blue-v);color:#fff;box-shadow:0 6px 20px rgba(41,121,255,.35)}
.pcta.prim:hover{background:var(--blue-g);box-shadow:0 10px 30px rgba(41,121,255,.5)}
.pcta.outl{border:1px solid rgba(255,255,255,.2);color:var(--w)}
.pcta.outl:hover{border-color:var(--blue);background:rgba(30,114,240,.1)}
.pricing-note{text-align:center;color:var(--w40);font-size:.8rem;margin-top:20px}

/* currency selector */
.currency-sel{display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.curr-btn{padding:5px 14px;border-radius:50px;font-size:.78rem;font-weight:600;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);background:none;color:var(--w70);font-family:var(--fb);transition:all .2s}
.curr-btn.active{background:var(--w10);color:var(--w);border-color:rgba(255,255,255,.3)}
.price-display{transition:opacity .3s}

/* ── TESTIMONIALS ── */
#testimonials{background:var(--navy)}
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:48px}
.test-card{background:var(--navy-card);border:1px solid rgba(255,255,255,.07);border-radius:var(--rl);padding:26px}
.stars{color:var(--gold);font-size:.88rem;margin-bottom:12px}
.test-txt{color:var(--w70);font-size:.9rem;line-height:1.7;margin-bottom:18px}
.test-author{display:flex;align-items:center;gap:11px}
.t-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-weight:800;font-size:.82rem;flex-shrink:0}
.t-av1{background:linear-gradient(135deg,var(--blue),var(--accent))}
.t-av2{background:linear-gradient(135deg,#7c4dff,#e91e63)}
.t-av3{background:linear-gradient(135deg,#00bcd4,#4caf50)}
.t-av4{background:linear-gradient(135deg,#ff9800,#f44336)}
.t-info strong{font-size:.88rem;display:block}
.t-info span{font-size:.78rem;color:var(--w40)}

/* ── CTA BANNER ── */
#cta-banner{padding:96px 5vw;text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(30,114,240,.2) 0%,transparent 70%),var(--navy-mid);
  border-top:1px solid rgba(30,114,240,.12);border-bottom:1px solid rgba(30,114,240,.12)}
#cta-banner .stitle{max-width:700px;margin:10px auto}
#cta-banner .ssub{margin:10px auto 34px}

/* ── CONTACT ── */
#contact{background:var(--navy)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.contact-info{display:flex;flex-direction:column;gap:22px}
.ci{display:flex;align-items:flex-start;gap:14px}
.ci-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:rgba(30,114,240,.15);border:1px solid rgba(30,114,240,.25);
  display:flex;align-items:center;justify-content:center}
.ci-icon svg{width:20px;height:20px}
.ci-text strong{display:block;font-weight:600;margin-bottom:1px}
.ci-text a,.ci-text span{color:var(--w70);font-size:.88rem;text-decoration:none;transition:color .2s}
.ci-text a:hover{color:var(--blue-s)}
.contact-form{display:flex;flex-direction:column;gap:14px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:.83rem;font-weight:600;color:var(--w70)}
.fg input,.fg textarea,.fg select{background:var(--navy-card);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:11px 14px;color:var(--w);font-family:var(--fb);font-size:.9rem;
  transition:border-color .2s,box-shadow .2s;outline:none}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,114,240,.12)}
.fg textarea{min-height:110px;resize:vertical}
.fg select option{background:var(--navy-card)}
.form-submit{background:var(--blue-v);color:#fff;border:none;cursor:pointer;
  padding:13px 26px;border-radius:50px;font-size:.93rem;font-weight:700;font-family:var(--fb);
  transition:all .25s;box-shadow:0 6px 20px rgba(41,121,255,.3)}
.form-submit:hover{background:var(--blue-g);box-shadow:0 10px 30px rgba(41,121,255,.5);transform:translateY(-1px)}

/* ── FOOTER ── */
footer{background:var(--navy-mid);border-top:1px solid rgba(255,255,255,.06);padding:56px 5vw 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.footer-brand p{color:var(--w70);font-size:.87rem;max-width:280px;line-height:1.7;margin-top:12px}
.footer-col h4{font-family:var(--fd);font-size:.88rem;font-weight:700;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul li a{color:var(--w40);font-size:.86rem;text-decoration:none;transition:color .2s}
.footer-col ul li a:hover{color:var(--w70)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.06);font-size:.8rem;color:var(--w40)}
.social-links{display:flex;gap:9px}
.social-links a{width:34px;height:34px;border-radius:9px;background:var(--w10);
  border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .2s}
.social-links a:hover{background:rgba(30,114,240,.2);border-color:rgba(30,114,240,.4)}
.social-links svg{width:16px;height:16px}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .nav-links{gap:16px}
  .nav-links a{font-size:.82rem}
}

@media(max-width:900px){
  .ov-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{padding:12px 5vw !important}
  .nav-links, .nav-cta{display:none}
  .nav-right{gap:20px}
  .hamburger{display:flex}
  /* Sidebar stays on the left always */
  .mockup-body{grid-template-columns: 160px 1fr; height: 660px;} 
  .mockup-sb{display:flex; padding: 16px 8px; border-right: 1px solid #e2e8f0; width: auto; align-items: stretch;}
  /* Sidebar components remain visible and layout consistent with desktop */
  .m-dash-layout { flex-direction: column; height: auto; min-height: unset; }
  .m-dash-config, .m-dash-preview { width: 100%; }
  .m-dash-config { border-right: none; border-bottom: 1px solid #e2e8f0; height: 320px; display: flex; flex-direction: column; overflow: hidden; }
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
      .mockup-main-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:center}
  .pricing-grid{grid-template-columns:1fr}
}