:root {
  --bg: #07101c;
  --bg-2: #0a1626;
  --panel: #0e1c2e;
  --panel-2: #12243a;
  --soft: #edf3f8;
  --white: #ffffff;
  --text: #d9e5ef;
  --text-dark: #122033;
  --muted: #91a4b8;
  --muted-dark: #617085;
  --line: rgba(255,255,255,.1);
  --line-dark: #d8e1e9;
  --accent: #ff8a1f;
  --accent-2: #ffb34e;
  --cyan: #44d9e6;
  --green: #5de2a8;
  --shadow: 0 24px 70px rgba(0,0,0,.25);
  --radius: 22px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 108px 0; overflow: hidden; }
.section-soft { background: var(--soft); color: var(--text-dark); }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 1000; background: var(--accent); color: #111; padding: 10px 16px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: .25s ease; }
.site-header.scrolled { background: rgba(7,16,28,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: linear-gradient(145deg, var(--accent), var(--accent-2)); border-radius: 12px; box-shadow: 0 10px 28px rgba(255,138,31,.28); }
.brand-mark svg { width: 28px; fill: #101923; }
.brand-mark.brand-logo { width: 56px; height: 56px; padding: 0; overflow: hidden; border-radius: 10px; background: transparent; box-shadow: none; flex: 0 0 56px; }
.brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.brand-logo.footer-logo { width: 68px; height: 68px; flex-basis: 68px; }
.brand strong { display: block; letter-spacing: .04em; font-size: 16px; line-height: 1.15; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav > a { color: #c8d5e1; font-size: 14px; font-weight: 650; transition: .2s; }
.main-nav > a:hover { color: var(--white); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 12px; padding: 11px; }
.menu-toggle span { display: block; height: 2px; background: white; margin: 5px 0; transition: .2s; }

.btn { border: 0; border-radius: 13px; min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111923; box-shadow: 0 14px 30px rgba(255,138,31,.24); }
.btn-primary:hover { box-shadow: 0 18px 38px rgba(255,138,31,.34); }
.btn-ghost { background: rgba(255,255,255,.06); color: white; border: 1px solid var(--line); }
.btn-ghost svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn-outline { background: transparent; color: inherit; border: 1px solid currentColor; }
.section-soft .btn-outline { color: var(--text-dark); border-color: #aab7c4; }
.btn-light { background: white; color: #172234; }
.btn-sm { min-height: 40px; padding-inline: 16px; border-radius: 10px; font-size: 13px; }
.btn-block { width: 100%; }

.hero { min-height: 900px; padding-top: 170px; background:
  radial-gradient(circle at 70% 16%, rgba(68,217,230,.12), transparent 25%),
  linear-gradient(180deg, #07101c 0%, #091422 100%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.hero-glow-one { width: 360px; height: 360px; background: rgba(255,138,31,.08); left: -180px; top: 130px; }
.hero-glow-two { width: 420px; height: 420px; background: rgba(34,112,255,.08); right: -230px; bottom: 80px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 900; color: var(--accent-2); }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 26px; height: 2px; background: var(--accent); }
.hero h1 { margin: 20px 0 24px; font-size: clamp(48px, 6.1vw, 78px); line-height: 1.02; letter-spacing: -.045em; max-width: 700px; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--accent), #ffd27a); -webkit-background-clip: text; background-clip: text; }
.hero-lead { color: #afc0cf; font-size: 18px; max-width: 650px; }
.hero-actions { display: flex; gap: 13px; margin: 36px 0 28px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px 22px; color: #b8c7d5; font-size: 13px; }
.hero-points i { color: var(--green); font-style: normal; font-weight: 900; margin-right: 6px; }

.machine-card { background: linear-gradient(180deg, rgba(20,40,63,.96), rgba(9,22,38,.98)); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; box-shadow: 0 40px 110px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.06); overflow: hidden; transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); }
.machine-topbar { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); color: #b8c8d8; font-size: 11px; }
.machine-dots { display: flex; gap: 6px; }
.machine-dots i { width: 8px; height: 8px; border-radius: 50%; background: #334b61; }
.machine-dots i:first-child { background: var(--accent); }
.status-dot { justify-self: end; color: var(--green); }
.status-dot::before { content:""; display:inline-block; width: 6px; height:6px; border-radius:50%; background:currentColor; margin-right:6px; box-shadow:0 0 10px currentColor; }
.machine-body { min-height: 390px; display: grid; grid-template-columns: 50px 1fr; }
.machine-sidebar { border-right: 1px solid var(--line); padding-top: 18px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.machine-sidebar span { width: 28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#557086; font-size:9px; }
.machine-sidebar .active { background:rgba(255,138,31,.15); color:var(--accent); }
.work-area { position:relative; padding: 38px 26px 60px; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 24px 24px; }
.board { position: relative; width: 86%; aspect-ratio: 1.45; margin: 12px auto 0; border: 2px solid #627b8f; border-radius: 5px; background: linear-gradient(135deg, rgba(96,126,145,.18), rgba(25,50,70,.34)); box-shadow: inset 0 0 30px rgba(0,0,0,.18), 0 24px 34px rgba(0,0,0,.15); }
.toolpath { position:absolute; border:2px solid var(--cyan); opacity:.75; }
.path-one { inset: 12% 10%; border-radius: 3px; }
.path-two { width: 26%; height: 28%; left: 18%; top: 25%; }
.path-three { width: 34%; height: 42%; right: 15%; top: 30%; border-radius:50%; }
.drill { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(255,138,31,.8); }
.d1{left:15%;top:18%}.d2{right:15%;top:18%}.d3{left:15%;bottom:18%}.d4{right:15%;bottom:18%}
.axis { position:absolute; color:var(--muted); font-size:9px; font-weight:900; }
.axis-x { right:20px; bottom:62px; }.axis-y { left:12px; top:25px; }
.machine-progress { position:absolute; left:26px; right:26px; bottom:18px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; color:#7790a5; font-size:9px; }
.machine-progress div { height:5px; background:#21394e; border-radius:8px; overflow:hidden; }
.machine-progress i { display:block; width:72%; height:100%; background:linear-gradient(90deg,var(--accent),var(--cyan)); animation:progress 3s ease-in-out infinite alternate; }
@keyframes progress { from{width:25%} to{width:92%} }
.machine-footer { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.machine-footer div { padding:16px 18px; border-right:1px solid var(--line); }
.machine-footer div:last-child{border:0}.machine-footer small{display:block;color:#6e879c;font-size:9px}.machine-footer strong{font-size:14px}.green{color:var(--green)}
.metric-strip { margin-top: 90px; display: grid; grid-template-columns: repeat(4,1fr); border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.metric-strip div { padding:22px 24px; border-right:1px solid var(--line); }
.metric-strip div:last-child { border:0; }
.metric-strip strong { display:block; color:white; font-size:21px; }
.metric-strip span { color:var(--muted); font-size:12px; }

.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:54px; }
.section-heading h2, .plugin-intro h2, .demo-copy h2, .faq-intro h2, .cta-box h2 { font-size:clamp(34px,4.2vw,54px); line-height:1.12; letter-spacing:-.035em; margin:12px 0 0; }
.section-heading p { max-width:520px; color:var(--muted-dark); margin:0; }
.section-heading.centered { display:block; text-align:center; max-width:760px; margin:0 auto 55px; }
.section-heading.centered p { margin:16px auto 0; }

.roadmap { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.roadmap-card { position:relative; background:white; border:1px solid #dce5ec; border-radius:var(--radius); padding:30px 24px; box-shadow:0 12px 36px rgba(23,42,61,.06); transition:.25s; }
.roadmap-card:hover { transform:translateY(-7px); box-shadow:0 22px 48px rgba(23,42,61,.1); }
.step { position:absolute; right:20px; top:18px; font-size:38px; line-height:1; color:#e5edf3; font-weight:900; }
.icon-box { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#fff3e5; color:#d76800; font-size:24px; }
.roadmap-card h3 { margin:24px 0 10px; font-size:20px; }
.roadmap-card p { color:var(--muted-dark); font-size:14px; }
.roadmap-card ul { margin:20px 0 0; padding:18px 0 0; list-style:none; border-top:1px solid #edf1f4; color:#56677a; font-size:13px; }
.roadmap-card li { margin:7px 0; }
.roadmap-card li::before { content:"•"; color:var(--accent); margin-right:8px; }

.course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.course-card { position:relative; background:#0c1929; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.course-card.featured { background:linear-gradient(180deg,#13263a,#0b1929); border-color:rgba(255,138,31,.48); transform:translateY(-10px); }
.popular { position:absolute; top:-14px; right:24px; background:var(--accent); color:#111b27; border-radius:50px; padding:6px 13px; text-transform:uppercase; font-size:9px; letter-spacing:.12em; font-weight:900; }
.course-label { color:var(--accent-2); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:900; }
.course-card h3 { margin:10px 0; font-size:28px; }
.course-desc { color:#9fb0bf; min-height:76px; font-size:14px; }
.course-meta { display:flex; gap:18px; color:#7790a4; font-size:11px; }
.course-card hr { width:100%; border:0; border-top:1px solid var(--line); margin:26px 0; }
.check-list { padding:0; margin:0 0 28px; list-style:none; flex:1; }
.check-list li { position:relative; padding-left:28px; margin:13px 0; color:#bfd0de; font-size:14px; }
.check-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:900; }

.plugin-section { background:linear-gradient(150deg,#06101c 0%,#0b1b2d 100%); }
.plugin-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.plugin-intro p { color:#9eb0bf; font-size:17px; }
.plugin-actions { display:flex; align-items:center; gap:24px; margin-top:30px; }
.text-link { color:white; font-weight:800; font-size:14px; }.text-link span{color:var(--accent);margin-left:5px}
.compatibility { margin-top:38px; padding:18px 20px; display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:center; border:1px solid var(--line); border-radius:14px; width:max-content; }
.compatibility span { color:#91a7ba; }.compatibility strong{color:var(--accent-2);font-size:21px}.compatibility small{color:#607a90;border-left:1px solid var(--line);padding-left:12px}
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature-card { position:relative; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:18px; padding:26px; min-height:180px; }
.feature-card i { position:absolute; top:18px; right:20px; font-style:normal; color:#2f4a5f; font-weight:900; font-size:22px; }
.feature-card h3 { margin:34px 0 7px; font-size:18px; }
.feature-card p { margin:0; color:#8fa3b5; font-size:13px; }

.workflow { background:white; border:1px solid #dce5eb; border-radius:24px; padding:14px; box-shadow:0 22px 54px rgba(23,42,61,.09); }
.workflow-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.workflow-tabs button { border:0; background:#f4f7fa; color:#536579; padding:15px 12px; border-radius:13px; font-weight:800; font-size:12px; }
.workflow-tabs button span { color:#a3b1be; margin-right:8px; }
.workflow-tabs button[aria-selected="true"] { background:#12243a; color:white; }.workflow-tabs button[aria-selected="true"] span{color:var(--accent)}
.workflow-panel { min-height:400px; display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; padding:54px; }
.workflow-panel[hidden] { display:none; }
.panel-number { color:var(--accent); font-weight:900; letter-spacing:.18em; }
.workflow-panel h3 { font-size:34px; margin:10px 0 14px; }.workflow-panel p{color:var(--muted-dark)}
.check-list.compact li { color:#46586b; margin:9px 0; }
.panel-visual { min-height:250px; border-radius:20px; background:#0d1a2a; position:relative; overflow:hidden; }
.model-visual { perspective:900px; display:grid; place-items:center; }
.model-visual span { position:absolute; width:62%; height:54%; border:2px solid var(--cyan); background:rgba(68,217,230,.06); transform:rotateX(58deg) rotateZ(-24deg); border-radius:5px; }
.model-visual span:nth-child(2){transform:translate(35px,-24px) rotateX(58deg) rotateZ(-24deg);border-color:var(--accent)}
.model-visual span:nth-child(3){width:28%;height:22%;transform:translate(-20px,35px) rotateX(58deg) rotateZ(-24deg);border-color:#8ca1b5}
.tool-visual { display:grid; place-items:center; }
.cutter { position:absolute; width:30px; height:140px; top:5px; background:linear-gradient(90deg,#a9bac8,#edf4f8,#7b91a2); clip-path:polygon(18% 0,82% 0,72% 66%,100% 100%,50% 86%,0 100%,28% 66%); filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.layers { position:absolute; bottom:35px; width:70%; display:flex; flex-direction:column; gap:8px; }.layers i{height:19px;border-radius:3px;background:#b77a3d;border-bottom:4px solid #74481f}.layers i:first-child{box-shadow:inset 0 0 0 2px var(--accent)}
.preview-visual { display:grid; place-items:center; }.preview-visual svg{width:90%;fill:none;stroke:var(--cyan);stroke-width:3}.preview-visual circle{fill:var(--accent);stroke:none}
.gcode-mini { background:#08131f;color:#b8d6e2;border-radius:18px;padding:32px;font:15px/1.7 "Cascadia Code",Consolas,monospace;box-shadow:inset 0 0 40px rgba(0,0,0,.25); }

.demo-section { background:linear-gradient(180deg,#0a1626,#08111d); }
.demo-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.demo-copy p { color:#9bb0c1; font-size:17px; }.code-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}.code-legend span{border:1px solid var(--line);border-radius:12px;padding:13px;color:#a9bac8;font-size:12px}.code-legend b{color:var(--accent);margin-right:7px}
.code-window { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#06101a; box-shadow:var(--shadow); }
.code-titlebar { height:52px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid var(--line); }.code-titlebar>span{display:flex;gap:6px}.code-titlebar i{width:9px;height:9px;border-radius:50%;background:#304759}.code-titlebar i:first-child{background:var(--accent)}.code-titlebar strong{font-size:11px;color:#8ea4b6}.code-titlebar button{justify-self:end;border:1px solid var(--line);background:transparent;color:#8ea4b6;border-radius:8px;padding:5px 10px;font-size:10px}
.code-window pre { margin:0; padding:30px; overflow:auto; min-height:390px; color:#d3e3eb; font:14px/1.7 "Cascadia Code",Consolas,monospace; }.comment{color:#60798d}.g{color:var(--cyan)}.m{color:var(--accent-2)}.feed{color:var(--green)}

.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; }.faq-intro p{color:var(--muted-dark);margin-bottom:28px}
.accordion details { border-bottom:1px solid #cfd9e1; }.accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;font-weight:850;cursor:pointer}.accordion summary::-webkit-details-marker{display:none}.accordion summary span{font-size:24px;color:#91a2b3;transition:.2s}.accordion details[open] summary span{transform:rotate(45deg);color:var(--accent)}.accordion details p{color:var(--muted-dark);padding:0 38px 22px 0;margin:0}

.cta-section { background:var(--soft); padding:0 0 100px; }.cta-box{background:linear-gradient(130deg,#ff8a1f,#ffb044);color:#111b26;border-radius:28px;padding:48px 54px;display:flex;justify-content:space-between;align-items:center;gap:40px;box-shadow:0 28px 60px rgba(206,106,15,.22)}.cta-box .kicker{color:#6b3506}.cta-box h2{max-width:760px;font-size:clamp(30px,4vw,46px)}.cta-box p{margin-bottom:0;color:#6b3b14}

.site-footer { background:#050b13; padding:70px 0 24px; border-top:1px solid var(--line); }.footer-grid{display:grid;grid-template-columns:1.6fr .75fr .9fr 1fr;gap:50px}.footer-grid>div:first-child p{color:#71879a;max-width:330px;font-size:13px}.footer-grid h3{font-size:13px;margin:3px 0 18px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:11px}.footer-grid a,.footer-link{color:#7f94a6;font-size:12px;text-align:left;border:0;background:none;padding:0}.footer-grid a:hover,.footer-link:hover{color:white}.placeholder-note{color:#667b8c;font-size:11px;margin:0}.socials{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important;margin-top:7px}.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid transparent!important;border-radius:10px;color:#fff!important;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.socials a:hover{transform:translateY(-2px);filter:brightness(1.07)}.socials svg{width:22px;height:22px;display:block}.socials svg path,.socials svg rect{fill:currentColor}.socials .social-cutout{fill:#ff0033}.social-youtube{background:#ff0033}.social-youtube:hover{box-shadow:0 8px 22px rgba(255,0,51,.28)}.social-facebook{background:#1877f2}.social-facebook:hover{box-shadow:0 8px 22px rgba(24,119,242,.28)}.social-messenger{background:#fff}.social-messenger svg{width:24px;height:24px}.social-messenger .messenger-bubble{fill:url(#messenger-gradient)}.social-messenger .messenger-bolt{fill:#fff}.social-messenger:hover{box-shadow:0 8px 22px rgba(123,44,255,.28)}.social-tiktok{background:#121212;border-color:#2f3945!important}.social-tiktok svg{overflow:visible}.social-tiktok .tiktok-cyan{fill:#25f4ee;transform:translate(-.55px,.45px)}.social-tiktok .tiktok-pink{fill:#fe2c55;transform:translate(.55px,-.35px)}.social-tiktok .tiktok-main{fill:#fff}.social-tiktok:hover{box-shadow:0 8px 22px rgba(37,244,238,.12),0 8px 22px rgba(254,44,85,.14)}.social-zalo{background:#0068ff}.social-zalo:hover{box-shadow:0 8px 22px rgba(0,104,255,.3)}.social-zalo svg rect{fill:#0068ff}.social-zalo .zalo-tail{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.social-zalo text{fill:#fff;font:700 6.1px Arial,sans-serif;letter-spacing:-.25px}.social-gmail{background:#fff;border-color:#d8e0e7!important}.social-gmail svg{width:24px;height:24px}.social-gmail .gmail-red-left{fill:#c5221f}.social-gmail .gmail-red-right{fill:#ea4335}.social-gmail .gmail-blue{fill:#4285f4}.social-gmail .gmail-green{fill:#34a853}.social-gmail .gmail-yellow{fill:#fbbc04}.social-gmail:hover{box-shadow:0 8px 22px rgba(234,67,53,.22)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;margin-top:55px;color:#53697b;font-size:11px}.footer-brand{margin-bottom:20px}

.modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:.25s; }.modal.open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.modal-dialog{position:relative;width:min(100%,590px);max-height:calc(100vh - 40px);overflow:auto;background:#f7fafc;color:var(--text-dark);border-radius:24px;padding:38px;box-shadow:0 40px 120px rgba(0,0,0,.5);transform:translateY(12px) scale(.98);transition:.25s}.modal.open .modal-dialog{transform:none}.modal-close{position:absolute;right:16px;top:13px;width:38px;height:38px;border:0;border-radius:10px;background:#e8eef3;color:#607185;font-size:25px}.modal-dialog h2{font-size:30px;margin:10px 0}.modal-dialog>p{color:var(--muted-dark);font-size:13px}.modal form{display:grid;gap:14px;margin-top:25px}.modal label{font-weight:800;font-size:12px}.modal input,.modal textarea,.modal select{width:100%;margin-top:6px;border:1px solid #cfd9e1;background:white;border-radius:11px;padding:12px 13px;color:#172537;outline:none}.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,138,31,.13)}.form-note{color:#7a8b9b;text-align:center}.toast{position:fixed;right:20px;bottom:20px;z-index:400;background:#14263a;color:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:12px 16px;font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }.reveal.visible{opacity:1;transform:none}

@media (max-width: 1020px) {
  .main-nav { position:fixed; left:20px; right:20px; top:80px; padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(7,16,28,.97); backdrop-filter:blur(18px); flex-direction:column; align-items:stretch; opacity:0; visibility:hidden; transform:translateY(-10px); transition:.2s; }
  .main-nav.open { opacity:1; visibility:visible; transform:none; }
  .main-nav a { padding:8px; }.menu-toggle{display:block}
  .hero { min-height:auto; }.hero-grid,.plugin-grid,.demo-grid{grid-template-columns:1fr;}.hero-grid{gap:55px}.machine-card{max-width:680px;margin:auto;transform:none}.roadmap{grid-template-columns:repeat(2,1fr)}.course-grid{grid-template-columns:1fr;max-width:720px;margin:auto}.course-card.featured{transform:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.faq-grid{grid-template-columns:1fr;gap:45px}.footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 720px) {
  .container { width:min(calc(100% - 28px),var(--container)); }.section{padding:78px 0}.hero{padding-top:130px}.hero h1{font-size:46px}.hero-actions,.plugin-actions{align-items:stretch;flex-direction:column}.hero-actions .btn,.plugin-actions .btn{width:100%}.metric-strip{grid-template-columns:repeat(2,1fr);margin-top:60px}.metric-strip div:nth-child(2){border-right:0}.metric-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}.section-heading{display:block}.section-heading p{margin-top:16px}.roadmap,.feature-grid{grid-template-columns:1fr}.workflow-tabs{grid-template-columns:1fr 1fr}.workflow-panel{grid-template-columns:1fr;padding:30px 18px;gap:25px}.panel-visual{min-height:220px}.code-legend{grid-template-columns:1fr}.cta-box{padding:36px 26px;align-items:stretch;flex-direction:column}.cta-box .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.machine-body{min-height:320px}.work-area{padding-inline:12px}.machine-progress{left:12px;right:12px;grid-template-columns:1fr}.machine-progress span{display:none}.machine-footer div{padding:13px 10px}.machine-topbar{grid-template-columns:1fr 1fr}.machine-topbar>span:nth-child(2){display:none}.course-card{padding:26px}.modal-dialog{padding:30px 20px}.faq-intro h2,.plugin-intro h2,.demo-copy h2,.section-heading h2{font-size:36px}
}

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


/* Trung tâm phát hành plugin */
.release-section {
  background:
    radial-gradient(circle at 86% 18%, rgba(68,217,230,.10), transparent 24%),
    radial-gradient(circle at 8% 78%, rgba(255,138,31,.08), transparent 24%),
    linear-gradient(180deg,#07101c 0%,#0a1626 100%);
}
.release-layout { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr); gap:28px; align-items:start; }
.release-card,.release-side-card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(20,39,61,.94),rgba(9,23,39,.96)); border-radius:24px; box-shadow:var(--shadow); }
.release-card { padding:34px; }
.release-topline { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:26px; }
.release-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,138,31,.14); color:var(--accent-2); border:1px solid rgba(255,138,31,.35); border-radius:999px; padding:7px 12px; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.release-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(255,138,31,.85); }
.release-state { color:#7f96aa; font-size:11px; }
.release-title-row { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.release-product { color:#98adbf; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.release-title-row h3 { margin:5px 0 0; font-size:clamp(34px,4.3vw,52px); line-height:1.05; }
.release-version { width:86px; height:86px; display:grid; place-items:center; border-radius:22px; background:linear-gradient(145deg,var(--accent),var(--accent-2)); color:#111b27; font-size:21px; font-weight:950; box-shadow:0 20px 48px rgba(255,138,31,.25); }
.release-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:28px 0; }
.release-meta span { border:1px solid var(--line); border-radius:12px; padding:13px; color:#a9bac9; font-size:11px; background:rgba(255,255,255,.025); }
.release-meta b { display:block; color:#627d92; font-size:9px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.release-summary { color:#adbecd; font-size:15px; }
.release-warning { margin:24px 0; padding:17px 18px; border-radius:15px; border:1px solid rgba(255,179,78,.35); background:rgba(255,138,31,.08); }
.release-warning strong { color:var(--accent-2); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.release-warning p { margin:5px 0 0; color:#b9c6d1; font-size:12px; }
.release-actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; }
.release-actions .btn svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.release-side { display:grid; gap:18px; }
.release-side-card { position:relative; padding:26px; overflow:hidden; }
.release-side-card h3 { margin:0 0 15px; font-size:22px; }
.side-number { position:absolute; right:18px; top:12px; color:rgba(255,255,255,.06); font-size:54px; font-weight:950; line-height:1; }
.install-steps { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.install-steps li { display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; }
.install-steps li>span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(68,217,230,.12); color:var(--cyan); font-size:11px; font-weight:900; }
.install-steps strong { font-size:12px; }
.install-steps p { color:#7f96a9; font-size:11px; margin:2px 0 0; }
.install-steps code { color:#9cdfe5; font-size:10px; }
.release-support p { color:#8da2b4; font-size:12px; }

@media (max-width: 1020px) {
  .release-layout { grid-template-columns:1fr; }
  .release-side { grid-template-columns:repeat(2,1fr); }
  .release-side-card:last-child { grid-column:1 / -1; }
}

@media (max-width: 720px) {
  .release-card { padding:24px 18px; }
  .release-topline,.release-title-row { align-items:flex-start; }
  .release-topline { flex-direction:column; }
  .release-version { width:68px; height:68px; border-radius:18px; font-size:17px; }
  .release-meta { grid-template-columns:repeat(2,1fr); }
  .release-actions { flex-direction:column; }
  .release-actions .btn { width:100%; }
  .integrity-box { grid-template-columns:1fr; }
  .integrity-box button { justify-self:start; }
  .release-side { grid-template-columns:1fr; }
  .release-side-card:last-child { grid-column:auto; }
}


/* Khu vực tải plugin tối giản. */
.download-simple-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: stretch;
}
.download-simple-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 42px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(20,39,61,.94), rgba(9,23,39,.96));
  box-shadow: var(--shadow);
}
.download-simple-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #111b27;
  font-size: 34px;
  font-weight: 950;
  box-shadow: 0 20px 48px rgba(255,138,31,.25);
}
.download-simple-card h3 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
}
.btn-download-clean {
  min-width: 210px;
  justify-content: center;
}
.btn-download-clean svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.download-simple-grid > .release-side-card:last-child {
  grid-column: 2;
}
@media (max-width: 900px) {
  .download-simple-grid { grid-template-columns: 1fr; }
  .download-simple-grid > .release-side-card:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  .download-simple-card { min-height: 260px; padding: 32px 20px; }
  .btn-download-clean { width: 100%; min-width: 0; }
}