/* ============================================================
   CORE THEME | iDeate Solutions Enterprise Web Kit
   Base typography, layout, navigation, cards, tables, footer and responsive design. Prefer changing tokens over editing repeated selectors.
   ============================================================ */
@import url('./tokens.css');

*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px
}

body {
   margin: 0;
   background: var(--surface);
   color: var(--ink);
   font: 400 16px/1.65 var(--font)
}

img,
svg {
   max-width: 100%
}

a {
   color: var(--link);
   text-underline-offset: 3px
}

button,
input,
textarea,
select {
   font: inherit
}

button {
   cursor: pointer
}

a,
button,
input,
textarea,
select {
   outline-offset: 4px
}

:focus-visible {
   outline: 3px solid #388ad4;
   outline-offset: 3px
}

h1,
h2,
h3,
h4 {
   line-height: 1.16;
   letter-spacing: -.025em;
   margin: 0 0 .6em;
   font-weight: 750
}

h1 {
   font-size: clamp(2.7rem, 5.4vw, 4.75rem)
}

h2 {
   font-size: clamp(2rem, 3.1vw, 2.85rem)
}

h3 {
   font-size: clamp(1.18rem, 1.5vw, 1.5rem)
}

p {
   margin: 0 0 1.2rem
}

.container {
   width: min(calc(100% - 2*var(--gutter)), var(--container));
   margin-inline: auto
}

.section {
   padding-block: var(--section-space)
}

.section.alt {
   background: var(--surface-2)
}

.section.dark {
   background: var(--navy-950);
   color: white
}

.section-header {
   max-width: 780px;
   margin-bottom: 38px
}

.kicker {
   display: inline-block;
   color: #a75b00;
   letter-spacing: .13em;
   font-weight: 800;
   text-transform: uppercase;
   font-size: .77rem;
   margin-bottom: 16px
}

.section.dark .kicker,
/* HERO: Main above-the-fold message and decorative orb. */
.hero .kicker {
   color: #ffbd59
}

.lead {
   font-size: clamp(1.05rem, 1.5vw, 1.25rem);
   color: var(--ink-muted)
}

.dark .lead {
   color: #c9d5e2
}

/* LAYOUT GRIDS: Reusable two-, three- and four-column arrangements. */
.grid {
   display: grid;
   gap: 24px
}

.grid.cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid.cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid.cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

/* Header: double-tier navigation with mobile disclosure */

/* ACCESSIBILITY / SKIP LINK: Visible when focused. */
.skip-link {
   position: absolute;
   top: -90px;
   left: 10px;
   background: #fff;
   color: #111;
   padding: 10px 16px;
   z-index: 1000
}

.skip-link:focus {
   top: 10px
}

/* GLOBAL HEADER: Top utility strip and navigation. Markup lives in site-shell.js. */
.utility-bar {
   background: var(--navy-900);
   color: #e0e7ef;
   font-size: .78rem
}

.utility-bar .container {
   display: flex;
   justify-content: flex-end;
   gap: 25px;
   padding-block: 8px
}

.utility-bar a {
   color: inherit;
   text-decoration: none
}

.main-header {
   background: #fff;
   border-bottom: 1px solid #e2e7ed;
   color: #182334;
   position: relative;
   z-index: 60
}

.main-header .header-inner {
   min-height: 76px;
   display: flex;
   align-items: center;
   gap: 38px
}

.wordmark {
   font-size: 1.43rem;
   color: #162033;
   font-weight: 850;
   text-decoration: none;
   letter-spacing: -.04em;
   white-space: nowrap
}

.wordmark .brand-dot {
   color: #e88a00
}

.primary-nav {
   display: flex;
   align-items: center;
   gap: 28px;
   margin-left: auto
}

.primary-nav>a,
.menu-button {
   color: #182334;
   text-decoration: none;
   background: none;
   border: 0;
   padding: 15px 0;
   font-size: .92rem;
   font-weight: 650
}

.menu-button[aria-expanded="true"] {
   color: #075d9d
}

.nav-item {
   position: relative
}

.menu-panel {
   position: absolute;
   left: -24px;
   top: calc(100% + 2px);
   width: 300px;
   padding: 14px;
   background: white;
   border: 1px solid #dfe5ed;
   border-radius: 12px;
   box-shadow: 0 20px 46px #17233629;
   z-index: 65
}

.menu-panel[hidden] {
   display: none
}

.menu-panel a {
   display: block;
   padding: 10px 12px;
   border-radius: 6px;
   text-decoration: none;
   color: #1a2738;
   font-size: .94rem
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
   background: #eef2f7
}

.header-action {
   margin-left: 0
}

.mobile-button {
   display: none;
   margin-left: auto;
   background: #fff;
   border: 1px solid #b9c6d3;
   border-radius: 8px;
   padding: 8px 12px
}

.mobile-panel[hidden] {
   display: none
}

.mobile-panel {
   padding: 16px 0 25px;
   border-top: 1px solid #e2e7ed
}

.mobile-panel a {
   display: block;
   padding: 9px 0;
   color: #19283b;
   text-decoration: none
}

.mobile-panel strong {
   display: block;
   margin-top: 16px
}

/* PRODUCT SUBNAV: Secondary in-page navigation. */
.product-nav-wrap {
   position: sticky;
   top: 0;
   z-index: 40;
   padding: 13px 0;
   background: color-mix(in srgb, var(--surface) 95%, transparent);
   backdrop-filter: blur(12px)
}

.product-nav {
   display: flex;
   align-items: center;
   gap: 34px;
   padding: 13px 24px;
   border: 1px solid var(--line);
   background: var(--surface);
   border-radius: 15px;
   box-shadow: var(--shadow-sm);
   overflow-x: auto;
   white-space: nowrap
}

.product-nav strong {
   margin-right: auto;
   color: var(--ink)
}

.product-nav a {
   color: var(--ink-muted);
   font-size: .88rem;
   text-decoration: none
}

.product-nav a:hover {
   color: var(--link)
}

/* Hero variations */
.hero {
   background: radial-gradient(ellipse 52% 95% at 100% 25%, #344869 0%, transparent 75%), linear-gradient(120deg, #111923, #1e3048);
   color: white;
   overflow: hidden
}

.hero .container {
   padding-block: clamp(80px, 10vw, 145px);
   position: relative
}

.hero-copy {
   max-width: 780px;
   position: relative;
   z-index: 1
}

.hero p {
   max-width: 650px;
   color: #d7e0ed;
   font-size: 1.18rem
}

.hero h1 span {
   color: #ffb346
}

.hero-orb {
   position: absolute;
   right: -150px;
   top: 35px;
   width: 480px;
   aspect-ratio: 1;
   border: 1px solid #6995d7;
   border-radius: 50%;
   box-shadow: 0 0 0 55px #1f376344, 0 0 0 115px #22375f33;
   opacity: .7
}

.hero.light {
   background: var(--surface-2);
   color: var(--ink)
}

.hero.light p {
   color: var(--ink-muted)
}

.hero.light .kicker {
   color: #9a5700
}

.hero.light h1 span {
   color: #9b5700
}

.hero.light .hero-orb {
   border-color: #aa85db;
   box-shadow: 0 0 0 55px #dcd5ee77, 0 0 0 115px #d3e1f277
}

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 46px;
   padding: 11px 22px;
   border-radius: 8px;
   border: 1px solid transparent;
   text-decoration: none;
   font-size: .91rem;
   font-weight: 750;
   transition: background .2s, transform .2s, box-shadow .2s
}

.btn-primary {
   background: var(--brand);
   color: #111a25
}

.btn-primary:hover {
   background: var(--brand-hover);
   color: #111a25;
   transform: translateY(-2px)
}

.btn-secondary {
   background: transparent;
   border-color: currentColor;
   color: inherit
}

.btn-secondary:hover {
   background: #ffffff20
}

.btn-neutral {
   background: var(--navy-950);
   color: #fff
}

.btn-neutral:hover {
   background: #334256;
   color: #fff
}

.actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 32px
}

/* Featured card glow: layered shadow avoids pseudo-element stacking issues */

/* CARDS: Rounded content surfaces and interactive outer glow. */
.card {
   position: relative;
   isolation: isolate;
   display: flex;
   flex-direction: column;
   min-width: 0;
   padding: 28px;
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   background: var(--surface-2);
   color: var(--ink);
   text-decoration: none;
   box-shadow: var(--shadow-sm);
   transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease
}

.card h3 {
   margin-top: 14px
}

.card p {
   color: var(--ink-muted);
   font-size: .94rem
}

.card .card-link {
   font-weight: 750;
   color: var(--link);
   margin-top: auto
}

.card .tag {
   align-self: flex-start;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 2px 8px;
   font-size: .67rem;
   letter-spacing: .06em;
   font-weight: 800
}

.card-icon {
   width: 45px;
   height: 45px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #e2ecfa;
   color: #155b97;
   font-size: 1.2rem;
   font-weight: 750
}

.card:hover,
.card:focus-within,
.card:focus-visible,
.card.is-featured {
   transform: translateY(-4px);
   border-color: #d9c2e8;
   box-shadow: 0 12px 27px rgba(30, 36, 50, .11), -10px -4px 23px rgba(var(--glow-pink)/.38), 12px -3px 27px rgba(var(--glow-violet)/.40), 3px 14px 27px rgba(var(--glow-blue)/.3)
}

.card.is-featured {
   transform: none
}

.card:focus-visible {
   outline: 3px solid #237ac1
}

.card-dark {
   background: #243244;
   color: #fff;
   border-color: #45566e
}

.card-dark p {
   color: #cdd7e5
}

.card-dark .card-link {
   color: #a6d8ff
}

.card.flat {
   background: var(--surface);
   box-shadow: none
}

.card.compact {
   padding: 22px;
   min-height: 200px
}

.card .badge {
   color: #875100;
   font-weight: 750;
   font-size: .78rem
}

.card>ul {
   padding-left: 20px
}

.card>ul li {
   margin-bottom: 8px
}

/* Other surfaces */
.stat {
   border-left: 3px solid #e79518;
   padding-left: 22px
}

.stat strong {
   display: block;
   font-size: clamp(2rem, 3vw, 3rem);
   line-height: 1.2
}

.stat span {
   color: var(--ink-muted)
}

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(35px, 7vw, 100px);
   align-items: center
}

.feature-list {
   list-style: none;
   padding: 0;
   margin: 0
}

.feature-list li {
   padding: 18px 0;
   border-bottom: 1px solid var(--line);
   display: flex;
   gap: 18px
}

.feature-list li::before {
   content: '✓';
   color: #a66b00;
   font-weight: 900
}

.table-scroll {
   overflow-x: auto;
   border: 1px solid var(--line);
   border-radius: 14px
}

/* COMPARISON TABLE: Native semantic table and responsive wrapper. */
.comparison {
   border-collapse: collapse;
   width: 100%;
   min-width: 640px
}

.comparison th,
.comparison td {
   padding: 16px 20px;
   text-align: left;
   border-bottom: 1px solid var(--line)
}

.comparison th {
   background: var(--navy-900);
   color: #fff
}

.comparison tbody tr:nth-child(even) {
   background: var(--surface-2)
}

.comparison tbody tr:last-child td {
   border-bottom: 0
}

/* TABS: Pair with the tab behavior in components.js. */
.tabs [role="tablist"] {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--line);
   margin-bottom: 24px
}

.tabs [role="tab"] {
   padding: 13px 20px;
   border: 0;
   background: transparent;
   border-bottom: 3px solid transparent;
   color: var(--ink-muted);
   font-weight: 750
}

.tabs [role="tab"][aria-selected="true"] {
   color: var(--ink);
   border-color: var(--brand)
}

.tabs [role="tabpanel"][hidden] {
   display: none
}

/* FAQ ACCORDION: Native details/summary presentation. */
.accordion {
   border-top: 1px solid var(--line)
}

.accordion details {
   border-bottom: 1px solid var(--line)
}

.accordion summary {
   cursor: pointer;
   padding: 19px 8px;
   font-weight: 750
}

.accordion details p {
   padding-inline: 8px;
   color: var(--ink-muted)
}

/* CTA BANNER: High-contrast conversion section. */
.cta-band {
   padding-block: 58px;
   background: var(--navy-900);
   color: white
}

.cta-band .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 25px
}

.cta-band p {
   color: #c8d7e6;
   margin: 0
}

/* GLOBAL FOOTER: Markup comes from site-shell.js. */
.site-footer {
   background: var(--navy-950);
   color: #c4cedb;
   padding: 65px 0 30px
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr repeat(3, 1fr);
   gap: 45px
}

.site-footer h3 {
   color: #fff;
   font-size: 1rem
}

.site-footer a {
   color: #ced9e6;
   text-decoration: none;
   display: block;
   margin: 9px 0
}

.site-footer a:hover {
   text-decoration: underline
}

.footer-bottom {
   border-top: 1px solid #38495b;
   margin-top: 48px;
   padding-top: 23px;
   font-size: .85rem
}

/* Forms */
.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 18px
}

.field label {
   font-weight: 700
}

.field input,
.field textarea,
.field select {
   padding: 12px 14px;
   background: var(--surface);
   color: var(--ink);
   border: 1px solid var(--line-strong);
   border-radius: 8px;
   max-width: 100%
}

.field input:focus,
.field textarea:focus {
   border-color: #126db2
}

.form-note {
   font-size: .88rem;
   color: var(--ink-muted)
}

@media(max-width:950px) {

   .primary-nav,
   .header-action {
      display: none
   }

   .mobile-button {
      display: block
   }

   .grid.cols-3,
   .grid.cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .split {
      gap: 35px
   }
}

@media(max-width:650px) {
   .utility-bar {
      display: none
   }

   .grid.cols-3,
   .grid.cols-4,
   .grid.cols-2,
   .split {
      grid-template-columns: 1fr
   }

   .section {
      padding-block: 56px
   }

   .hero-orb {
      opacity: .17
   }

   .hero .container {
      padding-block: 75px
   }

   .cta-band .container {
      align-items: flex-start;
      flex-direction: column
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .product-nav {
      gap: 22px
   }

   .product-nav strong {
      margin-right: 0
   }

   .card {
      padding: 24px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important
   }

   .card:hover,
   .card:focus-visible,
   .card:focus-within,
   .btn:hover {
      transform: none
   }
}