/* © TechNext Pte. Ltd. (technext.asia). All rights reserved. This design and code are not licensed for copying, reuse or AI training. */
/* /get-started and /free-website-with-odoo (22 Oct 2026): the focused offer pages in the glass system (builds on home-fx.css).
   Replaces get-started.css for these two pages. A focused page: the header keeps only the logo (no menu, no Nexi Explains, no header
   button) and the side tabs and the floating bubbles are hidden, so the form is the one thing to do.
   Motion: transform / opacity, ease cubic-bezier(.16,1,.3,1), no bounce; reduced motion shows everything still. */

.gs-fx .header .nav, .gs-fx .header .header-cta, .gs-fx .header .menu-btn, .gs-fx .side-tabs, .gs-fx .wa-float, .gs-fx .cat-float { display: none !important; }
/* footer links are plain text here (the inline script also drops their href for keyboard users) */
.gs-fx .footer nav a, .gs-fx .header .brand { pointer-events: none; cursor: default; color: inherit; text-decoration: none; }
#gs-form { scroll-margin-top: 96px; }
.gs-fx main { --muted: #5C5F78; }

/* loops pause off-screen (assets/js/pages/get-started-fx.js toggles .is-off) */
[data-loop].is-off, [data-loop].is-off *, [data-loop].is-off *::before, [data-loop].is-off *::after, [data-loop].is-off::before, [data-loop].is-off::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- hero */
.gs-fx .gs-hero { padding: 72px 0 80px; }
.gs-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; }
.gs-copy h1 { margin: 0 0 20px; font: 800 clamp(2.3rem, 1.4rem + 3vw, 3.7rem)/1.04 var(--font-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.gs-copy h1 em { position: relative; display: block; width: fit-content; font-style: normal; color: var(--blue); }
.gs-copy h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 4px; background: rgba(49,103,202,.22); transform-origin: left; animation: fxUnder 1.1s .35s var(--fx-ease) both; }
.gs-copy .lead { max-width: 44ch; margin: 0; font-size: 1.13rem; line-height: 1.6; color: var(--body); }
.gs-ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.gs-ticks li { display: flex; gap: 10px; align-items: flex-start; font: 500 1rem/1.5 var(--font-body); color: var(--ink); }
.gs-ticks .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); stroke-width: 2.6; }
.gs-hero-proof { display: inline-flex; align-items: center; gap: 12px; margin: 30px 0 0; padding: 6px 18px 6px 8px; border-radius: 999px; background: var(--fx-glass); border: 1px solid var(--fx-edge);
  box-shadow: 0 1px 2px rgba(31,31,61,.05), 0 10px 24px -18px rgba(30,70,145,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 13.5px/1.35 var(--font-body); color: var(--body); max-width: 100%; }
.gs-hero-proof img { height: 26px; width: auto; flex: none; }

/* the form: one glass card with a live conic edge */
.gs-form { position: relative; padding: 32px; border-radius: 26px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.gs-glow { opacity: 1; }
.gs-form-h { margin: 0 0 4px; font: 800 1.5rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.gs-form-sub { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--body); }
.gs-form .field label { font-size: 13.5px; line-height: 1.4; }
.gs-form .field input, .gs-form .field select, .gs-form .field textarea { border-radius: 12px; background-color: rgba(255,255,255,.92); border-color: #DCE3F1; }
.gs-form .field input:focus, .gs-form .field select:focus, .gs-form .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,103,202,.16); }
.gs-form .form-foot { margin-top: 4px; }
.gs-form .gs-submit { width: 100%; justify-content: center; }
.gs-form.is-sent .gs-form-h, .gs-form.is-sent .gs-form-sub, .gs-form.is-sent .gs-privacy { display: none; }
.gs-privacy { margin: 14px 0 0; font-size: 13px; color: var(--body); }
.gs-form .form-status:empty { display: none; }
.gs-form.is-flash { animation: gsFlash 1.2s var(--fx-ease); }
@keyframes gsFlash { 0%, 100% { box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; } 30% { box-shadow: 0 0 0 4px rgba(49,103,202,.32), var(--fx-depth-h); } }

/* ---------------------------------------------------------------- industries strip */
.gs-fx main > section.gs-proof { padding: 0 !important; border-block: 1px solid var(--line) !important; background: #fff !important; }
.gs-proof-in { display: flex; align-items: center; gap: 28px; padding-block: 20px; }
.gs-proof-h { flex: none; font: 600 14px/1.2 var(--font-body); color: var(--body); }
.gs-proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; flex: 1; justify-content: space-between; }
.gs-proof-list li { display: flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--font-body); color: var(--ink); }
.gs-proof-list .ic { width: 30px; height: 30px; flex: none; }

/* ---------------------------------------------------------------- what you get */
.gs-get-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.gs-get-copy .sec-head { margin-bottom: 28px; }
.gs-mock { position: relative; padding: 0 0 70px; }
.gs-mock-site { border-radius: 20px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff; overflow: hidden; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gs-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(244,247,253,.9); border-bottom: 1px solid #E3E9F5; }
.gs-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DAE5; }
.gs-mock-bar span { margin-left: 12px; flex: 1; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--body); }
.gs-mock-body { padding: 16px 20px 22px; }
.gs-mock-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.gs-mock-nav b { width: 62px; height: 12px; border-radius: 4px; background: var(--ink); margin-right: auto; }
.gs-mock-nav span { width: 34px; height: 7px; border-radius: 4px; background: #DCE1EC; }
.gs-mock-nav em, .gs-mock-hero em { font: 700 12px/1 var(--font-body); font-style: normal; color: #fff; background: var(--blue); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.gs-mock-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: center; margin-bottom: 20px; }
.gs-mock-hero b { display: block; height: 13px; border-radius: 4px; background: var(--ink); margin-bottom: 8px; }
.gs-mock-hero b.s { width: 70%; }
.gs-mock-hero span { display: block; height: 7px; width: 85%; border-radius: 4px; background: #DCE1EC; margin: 12px 0 14px; }
.gs-mock-img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--blue-300), var(--blue) 60%, var(--blue-700)); }
.gs-mock-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-100%); animation: gsSheen 4.2s var(--fx-ease) infinite; }
@keyframes gsSheen { 55%, 100% { transform: translateX(100%); } }
.gs-mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gs-mock-cards span { height: 44px; border-radius: 10px; background: rgba(241,244,250,.9); border: 1px solid #E6EAF2; }
.gs-mock-odoo { position: absolute; right: -18px; bottom: 0; width: min(340px, 84%); padding: 14px 16px 16px; border-radius: 18px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth-h), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.gs-mock-odoo-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--ink); }
.gs-mock-odoo-h b { font-family: var(--font-display); }
.gs-mock-odoo-h small { margin-left: auto; font-size: 12px; color: var(--body); }
.gs-mock-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gs-mock-apps span { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 12px; opacity: .55; }
.gs-mock-apps span.on { opacity: 1; background: var(--blue-050); outline: 1.5px solid var(--blue-300); }
.gs-mock-apps small { font-size: 12px; font-weight: 600; color: var(--ink); }
.gs-mock-apps i { position: absolute; top: -9px; right: -4px; font: 700 12px/1 var(--font-body); font-style: normal; color: #fff; background: var(--ok); padding: 3px 8px; border-radius: 999px; }
.gs-mock-apps span.on i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(19,122,74,.5); animation: fxPing 2.2s var(--fx-ease) infinite; }

.gs-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gs-incl-col { border-radius: 20px; padding: 22px; border: 1px solid var(--fx-edge); background: var(--fx-glass); box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gs-incl-free { border-color: rgba(49,103,202,.35); box-shadow: 0 0 0 1px rgba(49,103,202,.1), var(--fx-depth-h); }
.gs-incl-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 800 1.02rem/1.3 var(--font-display); color: var(--ink); }
.gs-incl-col h3 .ic { width: 20px; height: 20px; flex: none; color: var(--blue); }
.gs-incl-paid h3 .ic { color: var(--body); }
.gs-incl-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--body); }
.gs-incl-col li { position: relative; padding-left: 26px; }
.gs-incl-col li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.gs-incl-paid li::before { background: none; border: 2px solid #AEB6CA; width: 9px; height: 9px; top: 8px; left: 4px; }
.gs-get-note { margin: 20px 0 0; font: 600 15px/1.5 var(--font-body); color: var(--ink); }

/* ---------------------------------------------------------------- steps */
.gs-how .sec-head { margin-bottom: 40px; }
.gs-steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gs-steps::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent) -30% 0 / 24% 100% no-repeat, var(--fx-line); animation: gsPath 4.2s var(--fx-ease) infinite; }
@keyframes gsPath { to { background-position: 130% 0, 0 0; } }
.gs-steps li { position: relative; z-index: 1; }
.gs-n { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font: 800 16px/1 var(--font-display); box-shadow: 0 0 0 6px rgba(49,103,202,.1); }
.gs-when { display: block; margin: 0 0 4px; font: 650 13.5px/1.3 var(--font-body); color: var(--blue-700); }
.gs-steps h3 { margin: 0 0 8px; font: 800 20px/1.3 var(--font-display); color: var(--ink); letter-spacing: -.015em; }
.gs-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------- quick answers */
.gs-faq-in { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.gs-faq-in .sec-head { position: sticky; top: calc(var(--header-h) + 24px); margin-bottom: 0; }
.gs-qas { display: grid; border-radius: 24px; background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.gs-qa { padding: 22px 26px; }
.gs-qa + .gs-qa { border-top: 1px solid var(--fx-line); }
.gs-qa h3 { margin: 0 0 6px; font: 800 1.05rem/1.3 var(--font-display); color: var(--ink); }
.gs-qa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* calm.css forces main section h2 to ink with !important: restore white on the dark close band */
.gs-fx main section .fx-close h2 { color: #fff !important; }
.gs-fx .fx-close p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- the "leaving already?" pop-up (inline script in get-started.html) */
.gs-exit { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; }
.gs-exit[hidden] { display: none; }
.gs-exit-bg { position: absolute; inset: 0; background: rgba(20,28,58,.45); opacity: 0; transition: opacity .22s ease; }
.gs-exit-box { position: relative; width: min(440px, 100%); background: rgba(255,255,255,.96); border: 1px solid var(--fx-edge); border-radius: 24px; padding: 26px 24px 18px; box-shadow: 0 30px 70px -20px rgba(20,40,90,.45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .4s var(--fx-ease); }
.gs-exit.is-open .gs-exit-bg { opacity: 1; }
.gs-exit.is-open .gs-exit-box { opacity: 1; transform: none; }
.gs-exit-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--body); cursor: pointer; }
.gs-exit-x:hover { background: #F1F4FA; color: var(--ink); }
.gs-exit-x .ic { width: 18px; height: 18px; transition: opacity .25s ease, transform .3s var(--fx-ease); }
/* 3-second countdown ring in place of the (x) */
.gs-exit-ring, .gs-exit-count { display: none; }
.gs-exit.is-locked .gs-exit-x { cursor: default; background: transparent; }
.gs-exit.is-locked .gs-exit-x .ic { opacity: 0; transform: scale(.4) rotate(-90deg); }
.gs-exit.is-locked .gs-exit-ring { display: block; position: absolute; inset: 4px; width: 36px; height: 36px; margin: auto; transform: rotate(-90deg); }
.gs-exit-ring circle { fill: none; stroke-width: 2.5; }
.gs-exit-ring .t { stroke: #E4E8F0; }
.gs-exit-ring .p { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; }
.gs-exit.is-locked .gs-exit-ring .p { animation: gsRing 3s linear forwards; }
@keyframes gsRing { to { stroke-dashoffset: 94.25; } }
.gs-exit.is-locked .gs-exit-count { display: grid; place-items: center; position: absolute; inset: 0; font: 700 13px/1 var(--font-display); color: var(--body); }
.gs-exit-who { display: flex; align-items: center; gap: 10px; margin: 0 40px 14px 0; }
.gs-exit-who img { width: 40px; height: 40px; object-fit: contain; padding: 6px; border-radius: 50%; background: #EEF3FC; }
.gs-exit-who b { display: block; font: 700 15px/1.2 var(--font-display); color: var(--ink); }
.gs-exit-who small { display: block; font-size: 12.5px; color: var(--body); }
.gs-exit-bubble { position: relative; background: #F3F6FC; border-radius: 6px 18px 18px 18px; padding: 16px 18px; min-height: 64px; }
.gs-exit-msg h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 6px; }
.gs-exit-msg p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--body); }
.gs-exit-typing { display: none; gap: 5px; align-items: center; height: 32px; }
.gs-exit-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8A98B6; animation: gsDot 1s infinite var(--fx-ease); }
.gs-exit-typing i:nth-child(2) { animation-delay: .15s; }
.gs-exit-typing i:nth-child(3) { animation-delay: .3s; }
.gs-exit.is-typing .gs-exit-typing { display: flex; }
.gs-exit.is-typing .gs-exit-msg { display: none; }
.gs-exit-msg { animation: gsMsg .3s ease; }
@keyframes gsDot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes gsMsg { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gs-exit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.gs-exit-actions .btn { justify-content: center; padding-inline: 12px; white-space: nowrap; }
.gs-exit-foot { display: flex; justify-content: center; gap: 20px; margin-top: 10px; font-size: 14px; }
.gs-exit-foot button, .gs-exit-foot a { background: none; border: 0; min-height: 44px; padding: 6px 4px; color: var(--body); font: 500 14px var(--font-body); cursor: pointer; text-decoration: none; }
.gs-exit-foot button:hover, .gs-exit-foot a:hover { color: var(--ink); text-decoration: underline; }
.gs-exit-foot [hidden] { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .gs-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .gs-copy .lead { max-width: none; }
  .gs-get-grid, .gs-faq-in { grid-template-columns: 1fr; gap: 40px; }
  .gs-faq-in .sec-head { position: static; }
  .gs-mock { max-width: 560px; }
  .gs-proof-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gs-proof-list { justify-content: flex-start; }
  .gs-steps::before { display: none; }
}
@media (max-width: 720px) {
  .gs-fx .gs-hero { padding: 40px 0 56px; }
  .gs-form { padding: 24px 18px; border-radius: 22px; }
  .gs-ticks { margin-top: 20px; }
  .gs-incl { grid-template-columns: 1fr; }
  .gs-mock-odoo { right: 0; }
  .gs-steps { grid-template-columns: 1fr; gap: 22px; }
  .gs-qa { padding: 18px 18px; }
}
@media (max-width: 480px) {
  .gs-exit-actions { grid-template-columns: 1fr; }
  .gs-exit-box { padding: 22px 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-copy h1 em::after, .gs-steps::before, .gs-mock-img::after, .gs-mock-apps span.on i::after, .gs-form.is-flash, .gs-exit-typing i, .gs-exit-msg, .gs-exit.is-locked .gs-exit-ring .p { animation: none !important; }
  .gs-exit-bg, .gs-exit-box, .gs-exit-x .ic { transition: none; }
}