/* Landing visual system */
:root {
  --blue-50: #eef4fb;
  --blue-100: #dce9f7;
  --blue-200: #c8daee;
  --blue-300: #a9c5e4;
  --blue-400: #689acb;
  --blue-500: #326da5;
  --blue-600: #194e7d;
  --blue-700: #153e69;
  --blue-800: #12365a;
  --blue-900: #102e4d;
  --blue-950: #0d2944;
  --gray-50: #f7f8f7;
  --gray-100: #f0f2f2;
  --gray-200: #e1e7eb;
  --gray-600: #586579;
  --gray-800: #24364b;
  --gray-900: #14263e;
  --grad-sky: linear-gradient(135deg, #ff973f, #e97025);
  --grad-hero: linear-gradient(135deg, #102f50, #0b2039);
  --grad-card: linear-gradient(180deg, #f4f8fc, #fff);
  --shadow-lg: 0 18px 45px rgba(17,43,70,.09);
  --shadow-xl: 0 25px 60px rgba(17,43,70,.13);
}
body { color: var(--gray-800); }
::selection { background: #ffca9d; color: #102d4b; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #ed842f;
  outline-offset: 3px;
}
.section-wrap, .cta-inner, .footer-grid, .footer-bottom, .lic-inner { max-width: 1260px; padding-inline: 2rem; }
.hero {
  min-height: min(790px, calc(100svh - 112px));
  padding: 5.8rem 0 6.2rem;
  background: #102e4d;
  isolation: isolate;
}
.hero::before {
  background: radial-gradient(circle at 74% 22%, rgba(49,105,151,.42), transparent 33%),
    radial-gradient(circle at 15% 85%, rgba(238,114,36,.16), transparent 28%);
}
.hero::after {
  content: '';
  position: absolute;
  width: 690px;
  height: 690px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  left: -240px;
  bottom: -350px;
  box-shadow: 0 0 0 95px rgba(255,255,255,.025), 0 0 0 190px rgba(255,255,255,.018);
  pointer-events: none;
}
.hero-grid { opacity: .4; background-size: 32px 32px; animation: none; }
.hero-container { max-width: 1260px; padding-inline: 2rem; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: clamp(2.5rem, 5vw, 6rem); width: 100%; }
.hero-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.17); color: #e9f2fa; font-size: .78rem; padding: .5rem .85rem; margin-bottom: 1.65rem; }
.pulse-dot { background: #ff9b4d; animation: none; box-shadow: 0 0 0 4px rgba(255,155,77,.16); }
.hero-h1 { font-size: clamp(2.9rem, 5vw, 5.25rem); line-height: 1.34; letter-spacing: -.045em; margin-bottom: 1.25rem; }
.hero-h1 .hl { color: #ffad68; background: none; -webkit-text-fill-color: currentColor; animation: none; }
.hero-p { color: #c4d2e0; font-size: 1.05rem; line-height: 2.05; max-width: 550px; margin-bottom: 2.1rem; }
.hero-btns { margin-bottom: 2.25rem; gap: .75rem; }
.btn-primary-lg, .btn-ghost-lg { min-height: 56px; border-radius: 13px; padding: .85rem 1.4rem; font-size: .92rem; justify-content: center; }
.btn-primary-lg { box-shadow: 0 14px 30px rgba(216,98,26,.25); }
.btn-primary-lg:hover { box-shadow: 0 18px 36px rgba(216,98,26,.32); }
.btn-ghost-lg { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.27); }
.hero-benefits { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; color: #cbd8e4; font-size: .78rem; }
.hero-benefits span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-benefits i { color: #ffad68; font-size: .9rem; }
.hero-visual { padding: 1.25rem 0; }
.mock-card {
  background: #fff;
  color: #1e344f;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 23px;
  padding: 1.55rem;
  box-shadow: 0 35px 80px rgba(3,17,32,.34), 0 0 0 10px rgba(255,255,255,.055);
  animation: none;
}
.mock-hdr { border-bottom: 1px solid #e9eef2; padding-bottom: 1.2rem; margin-bottom: 1.25rem; }
.mock-hdr-title { color: #172e49; font-size: .98rem; font-weight: 800; }
.mock-hdr-date { color: #8998aa; font-size: .72rem; margin-top: .25rem; }
.live-badge { color: #16815c; background: #e6f7ef; border: 1px solid #c9ead9; font-weight: 700; }
.live-dot { animation: none; }
.mock-row { background: #f6f8fa; padding: .75rem .85rem; border-radius: 11px; margin-bottom: .55rem; }
.mock-row:hover { background: #eef3f8; }
.mock-name { color: #273b53; font-weight: 700; font-size: .82rem; }
.mock-time { color: #8a98a9; font-size: .69rem; }
.s-ok { background: #e0f6eb; color: #16764f; }
.s-out { background: #fff0dc; color: #a65d0b; }
.s-abs { background: #fce8e7; color: #bd4343; }
.mock-footer { border-color: #e8edf2; margin-top: 1.15rem; }
.mock-ftr-txt { color: #64758a; font-weight: 700; }
.mock-prog { background: #e7edf1; height: 7px; }
.mock-prog-fill { background: linear-gradient(90deg, #ef7b2e, #ffae62); }
.float-chip { background: #fff; border: 1px solid #e8eef4; box-shadow: 0 18px 45px rgba(4,18,34,.18); animation: none; padding: .7rem .95rem; }
.float-chip .ci-lbl { color: #8291a2; }
.float-chip .ci-val { color: #17334e; }
.fc1 { right: -1.5rem; bottom: -1.2rem; }
.fc2 { left: -2rem; top: -.65rem; }
.section-center { margin-bottom: 3.25rem; }
.section-chip { background: #fff4e9; color: #be5e20; border: 1px solid #f8ddc3; padding: .4rem .9rem; font-size: .75rem; }
.section-h2 { font-size: clamp(1.85rem, 3.2vw, 2.65rem); line-height: 1.45; letter-spacing: -.035em; }
.section-p { line-height: 1.95; }
.section-divider { background: #ee8136; width: 38px; height: 3px; }
.problems, .features, .how, .pricing, .addons, .compare, .testimonials, .faq, .articles-section { padding-block: clamp(4.5rem, 7vw, 7rem); }
.problems { background: #f5f7f8; }
.problem-grid, .feat-grid, .addon-grid, .test-grid { gap: 1rem; }
.prob-card, .feat-card, .addon-card, .test-card { border-color: #e7ebee; border-radius: 18px; box-shadow: 0 8px 30px rgba(19,45,68,.035); }
.prob-card { padding: 1.7rem; }
.prob-card::after { background: #f18840; }
.prob-card:hover, .feat-card:hover, .addon-card:hover { border-color: #f2c39f; }
.feat-card { text-align: right; padding: 1.85rem; }
.feat-icon { margin: 0 0 1.3rem; background: #edf4fa; color: #245a8a; border-radius: 14px; width: 56px; height: 56px; }
.feat-card:hover .feat-icon { background: #173f66; box-shadow: none; }
.how { background: #102d4b; }
.how .section-chip { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); color: #f9bd8b; }
.step-num { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #ffaf73; }
.step:hover .step-num { background: #e97b32; border-color: #e97b32; box-shadow: 0 0 0 8px rgba(233,123,50,.13); }
.pricing, .compare { background: #f5f7f8; }
.plan-card { border: 1px solid #e3e8ed; box-shadow: 0 16px 40px rgba(18,44,69,.04); }
.plan-card.featured { border: 2px solid #ee8c46; background: linear-gradient(180deg, #fff6ed, #fff 38%); }
.plan-card.featured:hover { box-shadow: 0 24px 56px rgba(140,79,29,.13); }
.popular-tag { background: #ed7c31; box-shadow: none; }
.plan-icon { background: #edf4fa !important; }
.plan-icon i { color: #285f90 !important; }
.btn-plan-fill, .btn-submit { box-shadow: 0 8px 22px rgba(230,113,41,.2); }
.btn-plan-fill:hover, .btn-submit:hover { box-shadow: 0 12px 30px rgba(230,113,41,.28); }
.ctable thead tr { background: #142f4d; }
.ctable thead th.fc { background: #e97b32; }
.compare-wrap { overflow-x: auto; }
.ctable { min-width: 680px; }
.faq { background: #f2f6f8; }
.use-card { min-height: 275px; padding: 1.9rem; display: flex; flex-direction: column; align-items: flex-start; }
.use-card::before { display: none; }
.use-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #235780; background: #edf4fa; font-size: 1.35rem; margin-bottom: 1.4rem; }
.use-index { color: #df7b36; font-size: .72rem; font-weight: 800; margin-bottom: .45rem; }
.use-card h3 { font-size: 1.1rem; color: #18324e; margin-bottom: .7rem; }
.use-card p { font-size: .87rem; line-height: 1.9; color: #627184; }
.faq-item { border-color: #e2e9ee; border-radius: 14px; margin-bottom: .75rem; }
.faq-btn { padding: 1.2rem 1.4rem; }
.faq-body.open { max-height: 400px; }
.cta-section { padding-block: clamp(4.5rem, 7vw, 7rem); background: #102d4b; }
.cta-section::before { background: radial-gradient(circle at 15% 10%, rgba(239,127,53,.17), transparent 34%), radial-gradient(circle at 90% 85%, rgba(86,148,196,.2), transparent 40%); }
.cta-form-card { background: #fff; border: 1px solid #fff; box-shadow: 0 25px 60px rgba(0,14,31,.22); }
.contact-route-card { padding: 2.2rem; }
.contact-route-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #fff0e3; color: #d16e29; font-size: 1.55rem; margin-bottom: 1.7rem; }
.contact-route-kicker { color: #cc712f; font-size: .76rem; font-weight: 800; }
.contact-route-card h3 { color: #19334e; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.55; margin: .5rem 0 .8rem; }
.contact-route-card p { color: #66788a; font-size: .9rem; line-height: 1.95; margin-bottom: 1.6rem; }
.contact-route-card .btn-submit { min-height: 52px; text-decoration: none; }
.contact-route-card .btn-submit:hover { color: #fff; }
.contact-route-note { display: block; color: #95a1ad; font-size: .71rem; text-align: center; margin-top: .9rem; }
.cta-form-card label { color: #263c52; }
.cta-form-card input, .cta-form-card select { background: #f7f9fb; border-color: #dce5eb; color: #1e344a; min-height: 48px; }
.cta-form-card input::placeholder { color: #9ba8b4; }
.cta-form-card input:focus, .cta-form-card select:focus { background: #fff; border-color: #ed8a41; box-shadow: 0 0 0 3px rgba(239,127,53,.15); }
.cta-form-card select option { background: #fff; color: #1e344a; }
.form-success h4 { color: #19334e; }
.form-success p { color: #6e7e8e; }
.footer, .licenses { background: #0b2239; }
.footer { padding-top: 4rem; }
@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero-container { gap: 2.5rem; }
  .hero-h1 { font-size: clamp(2.6rem, 5vw, 4rem); }
}
@media (max-width: 768px) {
  .hero { padding: 4.5rem 0 5rem; }
  .hero-container { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { display: block; width: min(100%, 560px); margin: 0 auto; padding: .8rem 1rem; }
  .hero-h1 { max-width: 650px; }
  .hero-p { max-width: 650px; }
  .fc1 { right: 0; }
  .fc2 { left: 0; }
  .section-wrap, .cta-inner, .footer-grid, .footer-bottom, .lic-inner { padding-inline: 1.25rem; }
}
@media (max-width: 576px) {
  .hero { padding: 3.35rem 0 4.5rem; }
  .hero-container { padding-inline: 1.25rem; gap: 2.4rem; }
  .hero-h1 { font-size: clamp(2.35rem, 9vw, 3.1rem); }
  .hero-p { font-size: .94rem; margin-bottom: 1.6rem; }
  .hero-badge { font-size: .7rem; margin-bottom: 1.2rem; }
  .hero-btns { gap: .65rem; margin-bottom: 1.5rem; }
  .btn-primary-lg, .btn-ghost-lg { min-height: 50px; }
  .hero-benefits { gap: .5rem 1rem; font-size: .72rem; }
  .hero-visual { padding: 0; }
  .mock-card { padding: 1rem; border-radius: 18px; }
  .mock-row { padding: .6rem; }
  .mock-name { font-size: .72rem; }
  .mock-time { font-size: .62rem; }
  .status-chip { font-size: .57rem; white-space: nowrap; }
  .float-chip { display: none; }
  .section-h2 { font-size: 1.85rem; }
  .section-center { margin-bottom: 2.4rem; }
  .prob-card, .feat-card, .addon-card, .test-card { padding: 1.4rem; }
  .pricing-grid { gap: 1rem; }
  .cta-form-card { padding: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}