html, body {
  background: #0b0f14; 
  margin: 0;
  padding: 0;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  color:#f5f5f7;
  background:radial-gradient(circle at top,#81d8d0 0,#151f2b 45%,#020308 100%);
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.page{min-height:100vh;display:flex;flex-direction:column}
.container{width:100%;max-width:1200px;margin:0 auto;padding:24px 20px 28px}

header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(20px);
  background:linear-gradient(to bottom,rgba(1,6,12,.96),rgba(1,6,12,.82),transparent);
  border-bottom:1px solid rgba(255,255,255,.04)
}
.header-inner{max-width:1200px;margin:0 auto;padding:10px 20px 8px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  background:conic-gradient(from 140deg,#ffb347,#ff6a88,#9f6bff,#45c4ff,#ffb347);
  padding:6px;
  box-shadow:0 0 0 .5px rgba(255,255,255,.12);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.brand-text-main{font-size:17px;letter-spacing:.06em;color:#f5f5f7}
.brand-text-sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.55)}
.header-right{display:flex;align-items:center;gap:22px}
.header-nav{display:flex;align-items:center;gap:16px;font-size:11px;color:rgba(245,245,247,.76)}
.header-nav a{padding:4px 0;position:relative;opacity:.85}
.header-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:rgba(255,210,97,.9);transition:width .16s ease}
.header-nav a:hover::after{width:100%}
.header-nav a.is-current{opacity:1;font-weight:600}
.header-nav a.is-current::after{width:100%}

.lang-toggle{display:flex;align-items:center;gap:10px;font-size:11px;color:rgba(245,245,247,.7)}
.lang-btn{border:none;background:transparent;padding:2px 0;font-size:11px;cursor:pointer;opacity:.7}
.lang-btn.is-active{opacity:1;font-weight:600}
.lang-sep{width:1px;height:10px;background:rgba(245,245,247,.4)}

.pricing-main{flex:1}
.hero-block{padding-top:18px;padding-bottom:4px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:26px;align-items:center}
.hero-text{text-align:left}
.hero-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.78);margin-bottom:6px}
.hero-title{font-size:26px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.hero-subtitle{font-size:13px;color:rgba(245,245,247,.78);max-width:520px;margin-bottom:6px}
.hero-note{font-size:11px;color:rgba(245,245,247,.7);max-width:520px}
.hero-extra-pill{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,10,18,.96);font-size:11px;color:rgba(245,245,247,.82)}
.hero-extra-dot{width:8px;height:8px;border-radius:999px;background:radial-gradient(circle,#ffd261,#ff9c59)}
.hero-secondary{font-size:11px;color:rgba(245,245,247,.7);margin-top:8px}

.hero-right-card{
  border-radius:22px;padding:14px 16px 12px;
  background:radial-gradient(circle at top,rgba(255,210,97,.16),rgba(6,8,16,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 52px rgba(0,0,0,.9)
}
.hero-right-title{font-size:13px;font-weight:600;margin-bottom:8px}
.hero-right-list{list-style:none;font-size:11px;color:rgba(245,245,247,.86)}
.hero-right-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-right-dot{width:7px;height:7px;border-radius:999px;background:radial-gradient(circle,#72ffd4,#00d3a4);flex-shrink:0}

.trust-strip{
  margin-top:18px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.08);
  background:rgba(6,8,16,.96);font-size:11px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}
.trust-strip-left{color:rgba(245,245,247,.8)}
.trust-strip-right{display:flex;gap:10px;flex-wrap:wrap}
.trust-pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,22,.96);color:rgba(245,245,247,.82);white-space:nowrap}

.billing-toggle{
  margin-top:20px;display:inline-flex;align-items:center;padding:4px;border-radius:999px;
  background:rgba(3,6,16,.92);border:1px solid rgba(255,255,255,.08);
  font-size:11px;gap:2px
}
.billing-toggle-btn{border:none;border-radius:999px;padding:5px 14px;background:transparent;color:rgba(245,245,247,.7);cursor:pointer;min-width:86px}
.billing-toggle-btn.is-active{background:linear-gradient(120deg,#ffd261,#ff9c59);color:#020308;font-weight:600}
.billing-toggle-save{margin-left:10px;font-size:11px;color:#ffd261}

.plans-wrap{margin-top:28px}
.plans-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:11px;color:rgba(245,245,247,.7);flex-wrap:wrap}
.plans-toolbar-left{opacity:.88}
.plans-view-label{margin-right:6px}
.plans-view-btn-group{display:inline-flex;align-items:center;padding:2px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(6,8,16,.96)}
.plans-view-btn{border:none;background:transparent;padding:4px 10px;font-size:11px;cursor:pointer;color:rgba(245,245,247,.7);min-width:52px}
.plans-view-btn.is-active{background:rgba(255,255,255,.08);border-radius:999px;color:#f5f5f7;font-weight:600}

.ui-pill-btn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(6,8,16,.96);
  color:rgba(245,245,247,.82);
  padding:4px 10px;border-radius:999px;
  font-size:11px;cursor:pointer
}
.ui-pill-btn.is-active{
  border-color:rgba(255,210,97,.7);
  color:#ffd261
}

.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{
  position:relative;border-radius:22px;padding:18px 18px 16px;
  background:rgba(6,6,12,.92);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.65);
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.plan-card--popular{border-color:rgba(255,210,97,.55);box-shadow:0 18px 40px rgba(0,0,0,.65);background:radial-gradient(circle at top left,rgba(255,210,97,.14),rgba(6,6,12,.96))}
.plan-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 24px 60px rgba(0,0,0,.9)}
.plan-card--popular:hover{border-color:rgba(255,210,97,.65)}
.plan-card.is-selected:not(.plan-card--popular){border-color:rgba(255,255,255,.08);box-shadow:0 22px 52px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.05) inset}

.plan-card[data-plan-card="essential"]:hover{border-color:#4cd964;box-shadow:0 24px 60px rgba(76,217,100,.55)}
.plan-card[data-plan-card="business"]:hover{border-color:#bf5af2;box-shadow:0 24px 60px rgba(191,90,242,.55)}

.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;min-height:30px}
.plan-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.78)}
.plan-tag span{opacity:.65;margin-left:6px}
.plan-badge{font-size:10px;padding:3px 9px;border-radius:999px;background:rgba(255,210,97,.1);border:1px solid rgba(255,210,97,.8);color:#ffd261}
.plan-title{font-size:17px;font-weight:600;margin-bottom:4px;word-break:normal;overflow-wrap:anywhere}
.plan-subtitle{font-size:12px;color:rgba(245,245,247,.74);margin-bottom:14px}
.plan-price-row{margin-bottom:4px;display:flex;align-items:baseline;gap:6px}
.plan-price-amount{font-size:24px;font-weight:600}
.plan-price-unit{font-size:13px;color:rgba(245,245,247,.86)}
.plan-price-note{font-size:11px;color:rgba(245,245,247,.7);margin-bottom:8px}
.plan-limit{font-size:11px;color:rgba(245,245,247,.65);margin-bottom:12px}

.plan-meta-row{display:flex;flex-wrap:wrap;gap:8px;font-size:10px;color:rgba(245,245,247,.74);margin-bottom:10px}
.plan-meta-pill{padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,22,.96);white-space:nowrap}

.plan-cta{margin-top:4px;margin-bottom:14px}
.plan-cta button{
  width:100%;
  min-height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:none;padding:9px 16px;font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(120deg,#ffd261,#ff9c59);color:#020308;
  box-shadow:0 10px 24px rgba(0,0,0,.8);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease
}
.plan-cta button:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(0,0,0,.95);filter:brightness(1.03)}
.plan-cta button:active{transform:translateY(0);box-shadow:0 10px 22px rgba(0,0,0,.9)}

.plan-cta button:focus-visible,
.billing-toggle-btn:focus-visible,
.plans-view-btn:focus-visible,
.mobile-floating-btn:focus-visible,
.scroll-top:focus-visible,
.ui-pill-btn:focus-visible,
.calc-input:focus-visible,
.modal-close:focus-visible,
.drawer-close:focus-visible{
  outline:2px solid #ffd261;outline-offset:2px
}

.plan-features{list-style:none;margin-top:6px;padding-top:2px;position:relative}
.plan-feature{
  display:flex;align-items:center;gap:7px;font-size:11px;color:rgba(245,245,247,.84);
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer
}
.plan-feature:hover{color:#f5f5f7}
.plan-feature-dot{width:7px;height:7px;border-radius:999px;background:radial-gradient(circle,#72ffd4,#00d3a4);box-shadow:0 0 10px rgba(0,211,164,.8);flex-shrink:0}

.plans-wrap.is-compact .plan-features{display:none}
.plans-wrap.is-compact .plan-features::after{display:none}

/* Compact view: make cards truly compact and avoid see-through overlaps */
.plans-wrap:not(.is-compact) .plans-compare{display:none}
.plans-wrap.is-compact .plan-price-note,
.plans-wrap.is-compact .plan-limit,
.plans-wrap.is-compact .plan-meta-row{display:none}
.plans-wrap.is-compact .plan-card{background:rgba(6,6,12,.98)}
.plans-wrap.is-compact .plan-subtitle{margin-bottom:10px}
.plans-wrap.is-compact .plan-cta{margin-bottom:10px}

.plans-compare{
  margin-top:34px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background:rgb(5,7,14);padding:12px 14px;font-size:11px;color:rgba(245,245,247,.80);
  position:relative;z-index:12
}
.plans-compare-row{
  display:grid;grid-template-columns:.9fr 1fr 1fr 1fr;
  gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)
}
.plans-compare-row:nth-child(2n){background:radial-gradient(circle at left,rgba(255,255,255,.02),transparent)}
.plans-compare-row:last-child{border-bottom:none}
.plans-compare-label{color:rgba(245,245,247,.74)}
.plans-compare-value{color:rgba(245,245,247,.90);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.plans-compare-row.is-hidden{display:none}

.plans-footer-note{margin-top:16px;font-size:11px;color:rgba(245,245,247,.64);text-align:center}

.flow-section{margin-top:34px;margin-bottom:4px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:center}
.flow-title{font-size:16px;font-weight:600;margin-bottom:6px}
.flow-subtitle{font-size:12px;color:rgba(245,245,247,.78);margin-bottom:12px;max-width:480px}
.flow-steps{display:flex;flex-direction:column;gap:8px;font-size:12px}
.flow-step{display:flex;gap:8px;align-items:flex-start}
.flow-step-index{width:18px;height:18px;border-radius:999px;background:radial-gradient(circle,#ffd261,#ff9c59);color:#020308;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flow-step-text{color:rgba(245,245,247,.84);font-size:11px}
.flow-card{border-radius:18px;padding:12px 14px 10px;background:rgba(6,8,16,.96);border:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(245,245,247,.8)}
.flow-card-title{font-size:12px;font-weight:600;margin-bottom:6px}
.flow-card-list{list-style:none}
.flow-card-item{margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.assurance-section{margin-top:30px}
.assurance-title{font-size:16px;font-weight:600;margin-bottom:6px}
.assurance-subtitle{font-size:12px;color:rgba(245,245,247,.76);margin-bottom:12px}
.assurance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.assurance-card{border-radius:16px;padding:12px 12px 11px;background:rgba(8,8,16,.9);border:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(245,245,247,.82);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.assurance-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(0,0,0,.9);background:rgba(10,12,22,.98)}
.assurance-card-title{font-weight:600;margin-bottom:4px;font-size:12px}
.assurance-card-text{font-size:11px;color:rgba(245,245,247,.8)}

.setup-section{margin-top:30px}
.setup-title{font-size:16px;font-weight:600;margin-bottom:6px}
.setup-subtitle{font-size:12px;color:rgba(245,245,247,.76);margin-bottom:10px}
.setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;font-size:11px}
.setup-card{border-radius:16px;padding:11px 12px 10px;background:rgba(8,8,16,.9);border:1px solid rgba(255,255,255,.08);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.setup-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(0,0,0,.9);background:rgba(10,12,22,.98)}
.setup-card-title{font-weight:600;margin-bottom:4px;font-size:12px}
.setup-card-text{color:rgba(245,245,247,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.signup-section{margin-top:40px;padding:24px 22px 22px;border-radius:22px;background:rgba(6,8,16,.96);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 60px rgba(0,0,0,.9)}
.signup-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;align-items:flex-start}
.signup-copy-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.7);margin-bottom:4px}
.signup-copy-title{font-size:20px;font-weight:600;margin-bottom:6px}
.signup-copy-subtitle{font-size:12px;color:rgba(245,245,247,.76);margin-bottom:14px;max-width:460px}
.signup-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.signup-pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(12,14,26,.96);font-size:10px;color:rgba(245,245,247,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signup-selected-plan{margin-top:4px;font-size:11px;color:rgba(245,245,247,.82)}
.signup-selected-plan strong{color:#ffd261}
.signup-form-title{font-size:13px;font-weight:600;margin-bottom:6px}
.signup-form-note{font-size:11px;color:rgba(245,245,247,.68);margin-bottom:14px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form-field{font-size:12px;color:rgba(245,245,247,.86);display:flex;flex-direction:column;gap:4px}
.form-field--full{grid-column:1 / -1}
.form-label{font-size:11px}
.form-input,.form-select,.form-textarea{
  width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(8,8,16,.96);color:#f5f5f7;font-size:12px;padding:7px 9px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(245,245,247,.4)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:rgba(88,180,255,.9);box-shadow:0 0 0 1px rgba(88,180,255,.55);background:rgba(8,8,18,.98)
}
.form-textarea{min-height:80px;resize:vertical}
.form-inline-row{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;flex-wrap:wrap}
.form-checkbox-row{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(245,245,247,.7)}
.form-checkbox-row input{width:14px;height:14px}
.signup-submit{
  border:none;border-radius:999px;padding:9px 20px;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(120deg,#ffd261,#ff9c59);color:#020308;
  box-shadow:0 10px 26px rgba(0,0,0,.9);white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease
}
.signup-submit:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,.95);filter:brightness(1.03)}
.signup-submit:active{transform:translateY(0);box-shadow:0 10px 24px rgba(0,0,0,.9)}
.signup-message{margin-top:6px;font-size:11px;color:#30d158;min-height:14px}
.signup-message.error{color:#ff453a}

.reco-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,7,14,.85);
  font-size:11px;color:rgba(245,245,247,.78)
}
.reco-note strong{color:#ffd261}

.faq-section{margin-top:36px;margin-bottom:140px}
.faq-title{font-size:16px;font-weight:600;margin-bottom:6px;text-align:left}
.faq-subtitle{font-size:12px;color:rgba(245,245,247,.7);margin-bottom:14px}

.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}


.faq-item{border-radius:16px;padding:0;background:rgba(8,8,16,.9);border:1px solid rgba(255,255,255,.08);font-size:12px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.faq-item[open]{background:rgba(10,12,22,.98);border-color:rgba(255,255,255,.18)}
.faq-item:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:0 14px 32px rgba(0,0,0,.9)}
.faq-summary{
  list-style:none;cursor:pointer;padding:12px 12px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.faq-summary::-webkit-details-marker{display:none}
.faq-q{font-weight:600;font-size:12px;margin:0}
.faq-caret{opacity:.7}
.faq-answer{padding:0 12px 12px;font-size:11px;color:rgba(245,245,247,.8)}


.calc-section{margin-top:26px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(5,7,14,.92);padding:14px 14px 12px}
.calc-title{font-size:13px;font-weight:600;margin-bottom:6px}
.calc-sub{font-size:11px;color:rgba(245,245,247,.72);margin-bottom:10px}
.calc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:12px 14px;align-items:end}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-label{font-size:11px;color:rgba(245,245,247,.72)}
.calc-input{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(8,8,16,.96);color:#f5f5f7;font-size:12px;padding:8px 10px;outline:none
}
.calc-range{width:100%}
.calc-result{
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(6,8,16,.96);
  padding:10px 12px;font-size:11px;color:rgba(245,245,247,.82)
}
.calc-result strong{color:#ffd261}
.calc-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.calc-kpi{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(12,14,26,.96);font-size:10px;color:rgba(245,245,247,.82)}


.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;align-items:flex-end;justify-content:center;z-index:80
}
.drawer-backdrop.is-open{display:flex}
.drawer{
  width:min(920px,100%);
  border-radius:18px 18px 0 0;
  background:rgba(6,8,16,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 -20px 60px rgba(0,0,0,.85);
  padding:12px 14px 14px
}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer-title{font-size:12px;font-weight:600}
.drawer-close{border:1px solid rgba(255,255,255,.12);background:rgba(10,12,22,.96);color:rgba(245,245,247,.82);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:11px}
.drawer-body{margin-top:10px}
.drawer-grid{display:grid;grid-template-columns:.9fr 1fr 1fr 1fr;gap:10px;font-size:11px}
.drawer-head{color:rgba(245,245,247,.65)}
.drawer-cell{padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(8,8,16,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-yes{color:#30d158}
.drawer-no{color:rgba(245,245,247,.55)}


.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);display:none;align-items:center;justify-content:center;z-index:90;padding:18px}
.modal-backdrop.is-open{display:flex}
.modal{
  width:min(640px,100%);
  border-radius:18px;
  background:rgba(6,8,16,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 80px rgba(0,0,0,.9);
  padding:14px 14px 12px
}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-title{font-size:12px;font-weight:600}
.modal-close{border:1px solid rgba(255,255,255,.12);background:rgba(10,12,22,.96);color:rgba(245,245,247,.82);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:11px}
.modal-body{margin-top:10px;font-size:11px;color:rgba(245,245,247,.78);line-height:1.55}
.modal-kv{display:grid;grid-template-columns:120px 1fr;gap:8px 10px;margin-top:10px}
.modal-k{color:rgba(245,245,247,.62)}
.modal-v{color:rgba(245,245,247,.86)}

footer{margin-top:18px;padding:10px 20px 12px;font-size:11px;color:rgba(245,245,247,.6);text-align:left;max-width:1200px;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.version-badge{padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(6,8,16,.8);color:rgba(245,245,247,.72);font-size:10px}
.footer-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-lang{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(6,8,16,0.86);
}
.footer-lang .lang-btn{padding:4px 10px;border-radius:999px;background:transparent;border:none;cursor:pointer;color:rgba(245,245,247,.82);opacity:.92;font-size:11px}
.footer-lang .lang-btn:hover{background:rgba(255,255,255,0.08);color:#ffd261}
.footer-lang .lang-btn.is-active{background:rgba(255,255,255,0.10);font-weight:600;opacity:1;color:#f5f5f7}

.mobile-floating-cta{
  position:fixed;left:0;right:0;bottom:0;padding:8px 14px 12px;display:none;
  align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(to top,rgba(2,3,8,.98),rgba(2,3,8,.92));
  border-top:1px solid rgba(255,255,255,.08);z-index:60
}
.mobile-floating-text{font-size:11px;color:rgba(245,245,247,.8)}
.mobile-floating-text span{color:#ffd261}
.mobile-floating-btn{border:none;border-radius:999px;padding:7px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(120deg,#ffd261,#ff9c59);color:#020308;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.9)}



.mobile-floating-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.mobile-plan-tabs{display:flex;gap:6px;flex-wrap:wrap}
.mobile-plan-tab{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,22,.92);
  color:rgba(245,245,247,.82);
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  cursor:pointer;
  line-height:1;
  white-space:nowrap
}
.mobile-plan-tab.is-active{
  border-color:rgba(255,210,97,.70);
  color:#ffd261;
  background:rgba(255,210,97,.08)
}

.scroll-top{
  position:fixed;right:18px;bottom:70px;width:32px;height:32px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(2,4,9,.9);color:rgba(245,245,247,.82);
  font-size:16px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.9);z-index:55
}
.scroll-top.is-visible{display:flex}

@media (max-width:960px){
  .faq-section{margin-bottom:120px}

  .header-inner{padding-inline:16px}
  .header-nav{display:none}
  .container{padding:18px 16px 32px}
  .hero-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .plans-grid{grid-template-columns:minmax(0,1fr)}
  .plan-card{max-width:520px;margin:0 auto}
  .plans-compare-row{grid-template-columns:1.1fr 1.5fr;row-gap:4px}
  .flow-section{grid-template-columns:minmax(0,1fr)}
  .assurance-grid{grid-template-columns:minmax(0,1fr)}
  .setup-grid{grid-template-columns:minmax(0,1fr)}
  .signup-layout{grid-template-columns:minmax(0,1fr);gap:22px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .mobile-floating-cta{display:flex}
  .calc-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hero-title{font-size:22px}
  .signup-section{padding:18px 16px 18px}
  .trust-strip{border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition-duration:.01ms !important}
}


.faq-card{
  border-radius:16px;
  padding:12px 12px 11px;
  background:rgba(8,8,16,0.90);
  border:1px solid rgba(255,255,255,0.08);
  font-size:12px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.faq-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.20);
  box-shadow:0 14px 32px rgba(0,0,0,0.90);
  background:rgba(10,12,22,0.98);
}
.faq-q{font-weight:600;margin-bottom:4px;font-size:12px}
.faq-a{font-size:11px;color:rgba(245,245,247,0.80)}



:root {
  --bg: #050509;
  --bg-alt: #0b0c12;
  --bg-soft: #0c0f19;
  --card: #11131f;
  --card-soft: #141827;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f5f7;
  --muted: #a1a1b3;
  --accent: #f5b200;
  --accent-soft: rgba(245, 178, 0, 0.16);
  --pill: rgba(255, 255, 255, 0.06);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 25px 80px rgba(0, 0, 0, 0.7);
  --shadow-subtle: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}



header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 10, 0.9),
    rgba(5, 5, 10, 0.7),
    transparent
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}



.nav-toggle {
  display: none;                
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 14, 0.9);
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-lines {
  position: relative;
  width: 16px;
  height: 12px;
}

.nav-toggle-lines .line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: #f5f5f7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-lines .line-1 {
  top: 0;
}
.nav-toggle-lines .line-2 {
  top: 5px;
}
.nav-toggle-lines .line-3 {
  top: 10px;
}


.nav-toggle.is-open .line-1 {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle.is-open .line-2 {
  opacity: 0;
}
.nav-toggle.is-open .line-3 {
  transform: translateY(-5px) rotate(-45deg);
}


.nav-mobile {
  display: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 10, 0.98);
  backdrop-filter: blur(16px);
}

.nav-mobile.is-open{
  display:block;
}


.nav-mobile-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-mobile-link {
    font-size: 14px;
    padding: 10px 0 16px;
    position: relative;
    text-decoration: none;
}

.nav-mobile-link:not(:last-of-type)::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

.nav-mobile-link:hover {
    text-decoration: none;
    color: #f5f5f7;
}

.nav-mobile-link:hover {
    text-decoration: none;
    color: #f5f5f7;
}

.nav-mobile-pill {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 8, 14, 0.9);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


.nav-mobile.nav-mobile-open {
  display: block;
}

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


.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: conic-gradient(
    from 140deg,
    #ffb347,
    #ff6a88,
    #9f6bff,
    #45c4ff,
    #ffb347
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.brand-mark::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #050509;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-label-main {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    line-height: 1.1;
}

.brand-label-sub {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  color: var(--muted);
}

.nav-main {
  display: flex;
  align-items: center;
  margin-left: -80px;
  margin-right: 12px;
}

.nav-main {
  display: flex;
  align-items: center;
  margin-left: -80px;
  margin-right: 12px;
}

.nav-main .nav-link {
  margin-right: 32px;
}

.nav-main .nav-login {
  margin-left: 56px;
}

.nav-main .nav-link {
  margin-right: 32px;
}

.nav-main .nav-login {
  margin-left: 56px;
}

.nav-right a {
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 600;
}

.nav-right a:hover {
  color: #f5f5f7;
  text-decoration: none;
}

.nav-pill {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 8, 14, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #72ffd4, #00d3a4);
  box-shadow: 0 0 14px rgba(0, 211, 164, 0.8);
}



footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 11px 0 11px;
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
  background: radial-gradient(circle at bottom, #101324, transparent 65%);
}

footer a {
  color: var(--muted);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-lang {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-lang-label {
  font-size: 11px;
  color: var(--muted);
}

.footer-lang-select {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(8, 9, 18, 0.96);
  color: var(--muted);
  outline: none;
  appearance: none;
}

.footer-lang-select:focus {
  border-color: var(--accent);
  color: var(--text);
}



@media (max-width: 768px) {
    header {
        height: 56px;
    }

    header .container {
        padding: 0 18px;
        height: 100%;
    }

    .header-inner {
        height: 100%;
        padding: 0;
        gap: 8px;
    }

    .nav-right {
        display: none;
    }

    .nav-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        margin-left: auto;
        border: none;
        background: transparent;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .nav-toggle-lines {
        width: 22px;
        height: 16px;
    }

    .nav-toggle-lines .line {
        height: 2px;
    }

    .nav-toggle-lines .line-1 {
        top: 0;
    }
    .nav-toggle-lines .line-2 {
        top: 7px;
    }
    .nav-toggle-lines .line-3 {
        top: 14px;
    }

    .nav-mobile {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 35;
    }

    .hero {
        padding-top: 20px;
    }

    .hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .hero-panel {
        order: 1;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-slogan {
        font-size: 14px;
    }

    .hero-subtext {
        font-size: 12px;
    }

    .feature-grid,
    .steps-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-tagline {
        flex-wrap: wrap;
        max-width: 100%;
        font-size: 9px;
        letter-spacing: 0.1em;
    }
}

.lang-banner {
    background: linear-gradient(
        to right,
        rgba(15, 15, 25, 0.98),
        rgba(7, 7, 12, 0.98)
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.lang-banner-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lang-banner-text {
    opacity: 0.9;
}

.lang-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lang-banner-btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
    white-space: nowrap;
}

.lang-banner-btn-primary {
    background: linear-gradient(110deg, #f5b200, #ff7a00);
    color: #030307;
    box-shadow: 0 8px 24px rgba(245, 178, 0, 0.45);
}

.lang-banner-btn-primary:hover {
    transform: translateY(-1px);
}

.lang-banner-btn-secondary {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(10, 10, 18, 0.9);
    color: var(--muted);
}

.lang-banner-btn-secondary:hover {
    border-color: #f5b200;
    color: #fefce8;
    background: rgba(18, 18, 28, 0.95);
}

@media (max-width: 768px) {
    .lang-banner-inner {
        padding: 8px 16px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lang-banner-text {
        font-size: 12px;
    }

    .lang-banner-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .lang-banner-btn {
        padding: 6px 12px;
    }
}


.nav-main .nav-link.is-current{color:#f5f5f7}
.nav-mobile-link.is-current{color:#f5f5f7}




:root{
  
  --ms-green: rgba(76,217,100,.52);
  --ms-green-strong: rgba(76,217,100,.88);

  
  --ms-glass-1: rgba(255,255,255,.085);
  --ms-glass-2: rgba(255,255,255,.045);

  
  --ms-stroke-in: rgba(255,255,255,.14);
  --ms-stroke-out: rgba(0,0,0,.35);
  --ms-shadow: rgba(0,0,0,.58);

  
  --ms-field-bg: rgba(255,255,255,.085);
  --ms-field-bg-hover: rgba(255,255,255,.10);
  --ms-field-stroke: rgba(255,255,255,.18);
  --ms-field-stroke-2: rgba(255,255,255,.24);
}


.signup-section .ms-signup-right,
.signup-section .signup-layout > :last-child{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 30px 26px 24px !important;     
  background: transparent !important;
  border: 1px solid var(--ms-green) !important;

  
  box-shadow:
    0 24px 90px var(--ms-shadow),
    0 0 0 1px var(--ms-stroke-in) inset,
    0 0 0 1px rgba(76,217,100,.10) inset,
    0 1px 0 rgba(255,255,255,.10) inset !important;
}


.signup-section .ms-signup-right::before,
.signup-section .signup-layout > :last-child::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:0;

  
  background:
    radial-gradient(900px 520px at 18% 0%,
      rgba(255,255,255,.18), transparent 58%),
    radial-gradient(760px 460px at 92% 12%,
      rgba(76,217,100,.075), transparent 66%),
    radial-gradient(620px 360px at 30% 120%,
      rgba(0,0,0,.28), transparent 60%),
    linear-gradient(180deg, var(--ms-glass-1), var(--ms-glass-2));
}


@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .signup-section .ms-signup-right::before,
  .signup-section .signup-layout > :last-child::before{
    -webkit-backdrop-filter: blur(30px) saturate(1.35) contrast(1.05);
    backdrop-filter: blur(30px) saturate(1.35) contrast(1.05);
  }
}


.signup-section .ms-signup-right::after,
.signup-section .signup-layout > :last-child::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:0;

  
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.012) 0 1px,
      rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%);
  opacity: .55;
  mix-blend-mode: overlay;
}


.signup-section .ms-signup-right > *,
.signup-section .signup-layout > :last-child > *{
  position: relative;
  z-index: 1;
}


.signup-section .ms-signup-right:hover,
.signup-section .ms-signup-right:focus-within,
.signup-section .signup-layout > :last-child:hover,
.signup-section .signup-layout > :last-child:focus-within{
  border-color: var(--ms-green-strong) !important;
  box-shadow:
    0 28px 110px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 0 1px rgba(76,217,100,.14) inset,
    0 0 22px rgba(76,217,100,.10) !important;
}


.signup-section .ms-signup-right,
.signup-section .signup-layout > :last-child{
  color: rgba(245,245,247,.92);
}


.signup-section .ms-signup-right input,
.signup-section .ms-signup-right select,
.signup-section .ms-signup-right textarea,
.signup-section .signup-layout > :last-child input,
.signup-section .signup-layout > :last-child select,
.signup-section .signup-layout > :last-child textarea{
  border-radius: 14px !important;
  background: var(--ms-field-bg) !important;
  border: 1px solid var(--ms-field-stroke) !important;
  color: rgba(245,245,247,.92) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 10px 26px rgba(0,0,0,.12) !important;
}

.signup-section .ms-signup-right input:hover,
.signup-section .ms-signup-right select:hover,
.signup-section .ms-signup-right textarea:hover,
.signup-section .signup-layout > :last-child input:hover,
.signup-section .signup-layout > :last-child select:hover,
.signup-section .signup-layout > :last-child textarea:hover{
  background: var(--ms-field-bg-hover) !important;
  border-color: var(--ms-field-stroke-2) !important;
}


.signup-section .ms-signup-right input:focus,
.signup-section .ms-signup-right select:focus,
.signup-section .ms-signup-right textarea:focus,
.signup-section .signup-layout > :last-child input:focus,
.signup-section .signup-layout > :last-child select:focus,
.signup-section .signup-layout > :last-child textarea:focus{
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(88,180,255,.70) !important;
  box-shadow:
    0 0 0 2px rgba(88,180,255,.18),
    0 1px 0 rgba(255,255,255,.10) inset !important;
}


.signup-section .ms-signup-right input::placeholder,
.signup-section .ms-signup-right textarea::placeholder,
.signup-section .signup-layout > :last-child input::placeholder,
.signup-section .signup-layout > :last-child textarea::placeholder{
  color: rgba(245,245,247,.56) !important;
}


.signup-section .ms-signup-right input[type="checkbox"],
.signup-section .signup-layout > :last-child input[type="checkbox"]{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}


.signup-section .ms-signup-right input:-webkit-autofill,
.signup-section .ms-signup-right textarea:-webkit-autofill,
.signup-section .ms-signup-right select:-webkit-autofill,
.signup-section .signup-layout > :last-child input:-webkit-autofill,
.signup-section .signup-layout > :last-child textarea:-webkit-autofill,
.signup-section .signup-layout > :last-child select:-webkit-autofill{
  -webkit-text-fill-color: rgba(245,245,247,.92) !important;
  transition: background-color 9999s ease-out 0s !important;
  box-shadow: 0 0 0 1000px var(--ms-field-bg) inset !important;
  border-color: rgba(255,255,255,.22) !important;
}


#scroll-top-btn.scroll-top{
  background: rgba(255,255,255,0.18);   
  border: 1px solid rgba(255,255,255,0.35); 
  box-shadow: 0 6px 18px rgba(0,0,0,0.35),  
              0 0 0 1px rgba(255,255,255,0.12); 
  opacity: 1;                           
  color: rgba(255,255,255,0.95);        
}

#scroll-top-btn.scroll-top:hover{
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 8px 22px rgba(0,0,0,0.40),
              0 0 0 1px rgba(255,255,255,0.18);
}

/* Header current page state (Pricing) */
.nav-main .nav-link.is-current{
  color:#f5f5f7;
  position:relative;
}
.nav-main .nav-link.is-current::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.35);
}
.nav-mobile-link.is-current{
  color:#f5f5f7;
  font-weight:700;
}


.nav-mobile-cta{
  margin-top:8px;
  padding:10px 12px;
  border-radius:999px;
  background:linear-gradient(120deg,#ffd261,#ff9c59);
  color:#020308 !important;
  text-align:center;
  font-weight:600;
}