/* ===================================================================
   SolveBox SPA — Optimized, brand-agnostic stylesheet
   - Variables centralize branding, spacing, and elevation
   - Duplicates merged, conflicts resolved (bottom-of-file wins retained)
   - Structure: Reset & Base → Layout → Typography → Components → Utilities
   =================================================================== */

/* === Reset & Base ================================================== */
:root{
  /* Branding (swap here for another bank/project) */
  --brand-primary:   #26c2a8;           /* main action / accent (teal)   */
  --brand-primary-2: #159b86;           /* darker accent for gradients   */
  --brand-bg:        #0b2b33;           /* page background               */
  --brand-bg-2:      #091a22;           /* deeper background             */
  --brand-surface:   #0e2f37;           /* card surface                  */
  --brand-text:      #e8f1f2;           /* primary foreground            */
  --brand-muted:     #9fb3b7;           /* secondary foreground          */
  --brand-font:      Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;

  /* Layout scale */
  --header-h: 56px;
  --footer-h: 60px;
  --container-max: 1120px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 28px;

  /* Components */
  --radius: 12px;
  --border: rgba(255,255,255,.08);

  /* Effects */
  --shadow-sm: 0 6px 14px rgba(0,0,0,.22);
  --shadow:    0 12px 26px rgba(0,0,0,.28);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(100,242,201,.28);
}

/* Derived (kept to avoid visual change) */
:root{
  --accent:  var(--brand-primary);
  --accent-2:var(--brand-primary-2);
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow:hidden}                  /* global no-scroll per spec */
body{
  margin:0; color:var(--brand-text);
  font:15px/1.5 var(--brand-font);
  background:
    radial-gradient(1100px 760px at 75% 10%, #0e3540 0, transparent 60%),
    linear-gradient(180deg, var(--brand-bg), var(--brand-bg-2));
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand-text); text-decoration:none}
a:hover{opacity:.92}
a:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
img{max-width:100%; display:block}

/* === Layout (grid, flex, containers) =============================== */
.container{max-width:var(--container-max); margin-inline:auto; padding:0 var(--space-3)}
.spa-shell{height:calc(100vh - var(--header-h) - var(--footer-h)); position:relative; z-index:1}
.pane{
  display:none;
  height:100%;
  overflow-y:auto;   /* allow vertical scroll */
  overflow-x:hidden;
  padding:var(--space-4) 0 calc(var(--space-4) + var(--space-2));
  scroll-behavior:smooth; /* gentle scroll */
}
.pane.active{display:block}

.grid{display:grid; gap:var(--space-3)}
.values{grid-template-columns:repeat(4,1fr)}
.tools-grid{
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  align-items:stretch; gap:var(--space-3);
}
.pricing{grid-template-columns:repeat(3,1fr)}

@media (max-width:1024px){
  .values{grid-template-columns:repeat(2,1fr)}
  .tools-grid,.pricing{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .topnav{display:none}
  .values,.tools-grid,.pricing{grid-template-columns:1fr}
}

/* Header & Nav */
.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(10,20,30,.72), rgba(10,20,30,.32));
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:18px; min-height:var(--header-h)}
.logo{font-weight:700; letter-spacing:.3px}
.topnav{display:flex; gap:12px}
.topnav a{opacity:.82; padding:8px 10px; border-radius:10px}
.topnav a.is-active{background:rgba(255,255,255,.06)}
.topnav a:hover{opacity:1}
.nav-cta{margin-left:auto; display:flex; gap:15px; align-items:center}

/* Fixed Footer (transparent, always visible) */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  height:var(--footer-h); padding:6px 0;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(9,26,34,0), rgba(9,26,34,.18));
  backdrop-filter:blur(4px);
}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; width:100%; padding:0 var(--space-3)}

/* === Typography ===================================================== */
.hero{padding:28px 0 18px}
.hero h1{font-size:36px; line-height:1.12; margin:0 0 8px}
.sub{color:var(--brand-muted); margin:0 0 14px; max-width:60ch}
.trustline{color:var(--brand-muted); margin-top:10px}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin:6px 0 18px}
.section-head h2{margin:0}
.small{font-size:12px}
.muted{color:var(--brand-muted)}

/* === Components (buttons, cards, modals, forms) ==================== */
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--brand-text);
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{box-shadow:var(--shadow)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn-accent{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#03201b; border-color:transparent}
.btn-ghost{background:transparent}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.22)}
.site-header .btn{padding:6px 12px; font-size:14px}
.site-header .nav-cta .btn{padding:6px 10px}

/* Cards */
.card{
  border:1px solid var(--border); background:var(--brand-surface);
  border-radius:var(--radius); padding:var(--space-3); box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.card:hover{box-shadow:var(--shadow); border-color:rgba(255,255,255,.12)}
.card h3{margin:0 0 4px}
.card--loading{display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--brand-muted)}

/* Chips & badges */
.chip,.badge{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border)}
.chip{color:#cfe1e3}
.badge{color:#031d18; background:var(--accent); border-color:rgba(0,0,0,.06)}

/* Tools Catalog (card internals + full-card color tints) */
.tool-head{display:flex; align-items:center; gap:8px; justify-content:space-between}
.tool-meta{display:flex; gap:6px; margin:8px 0}
.tool-actions{display:flex; gap:8px; margin-top:auto}
.tools-grid .card{display:flex; flex-direction:column; min-height:170px}

/* Per-card tint system (same palette logic reused across sections) */
.tools-grid > .card.tool{
  --t-s:72%; --t-l:52%; --alpha-strong:.26; --alpha-soft:.14; --t-h:165;
  --t-strong:hsl(var(--t-h) var(--t-s) var(--t-l) / var(--alpha-strong));
  --t-soft:  hsl(var(--t-h) var(--t-s) calc(var(--t-l) - 14%) / var(--alpha-soft));
  --t-border:hsl(var(--t-h) var(--t-s) var(--t-l) / .38);
  --t-chip:  hsl(var(--t-h) var(--t-s) var(--t-l) / .28);
  --t-chip-b:hsl(var(--t-h) var(--t-s) var(--t-l) / .46);
  --t-btn-1: hsl(var(--t-h) var(--t-s) calc(var(--t-l) + 8%) / .90);
  --t-btn-2: hsl(var(--t-h) var(--t-s) calc(var(--t-l) - 6%) / .78);
  --t-text:#ecf8f5; --t-text-d:#cfe6e2; --t-text-i:#062621;
  background:
    radial-gradient(120% 120% at 0% 0%, var(--t-strong), transparent 60%),
    linear-gradient(to bottom right, var(--t-soft), transparent);
  border-color:var(--t-border); color:var(--t-text);
}
.tools-grid > .card.tool:nth-child(6n+1){--t-h:165} /* emerald  */
.tools-grid > .card.tool:nth-child(6n+2){--t-h:205} /* blue     */
.tools-grid > .card.tool:nth-child(6n+3){--t-h:258} /* violet   */
.tools-grid > .card.tool:nth-child(6n+4){--t-h:38 } /* amber    */
.tools-grid > .card.tool:nth-child(6n+5){--t-h:330} /* rose     */
.tools-grid > .card.tool:nth-child(6n+6){--t-h:190} /* cyan     */
.tools-grid > .card.tool h3{color:var(--t-text)}
.tools-grid > .card.tool p {color:var(--t-text-d)}
.tools-grid > .card.tool .badge,
.tools-grid > .card.tool .chip{background:var(--t-chip); border-color:var(--t-chip-b); color:var(--t-text)}
.tools-grid > .card.tool .btn-accent{background:linear-gradient(180deg, var(--t-btn-1), var(--t-btn-2)); color:var(--t-text-i); border-color:transparent}
.tools-grid > .card.tool .btn:not(.btn-accent){background:transparent; color:var(--t-text); border-color:var(--t-border)}
.tools-grid > .card.tool:hover{transform:translateY(-1px); box-shadow:var(--shadow)}

/* Roadmap — pill layout with full-pill tints */
.roadmap{display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; list-style:none; margin:10px 0 0; padding:0}
.roadmap > li{
  --r-s:72%; --r-l:52%; --alpha-strong:.26; --alpha-soft:.14; --r-h:165;
  --r-strong:hsl(var(--r-h) var(--r-s) var(--r-l) / var(--alpha-strong));
  --r-soft:  hsl(var(--r-h) var(--r-s) calc(var(--r-l) - 14%) / var(--alpha-soft));
  --r-border:hsl(var(--r-h) var(--r-s) var(--r-l) / .38);
  --r-chip:  hsl(var(--r-h) var(--r-s) var(--r-l) / .28);
  --r-chip-b:hsl(var(--r-h) var(--r-s) var(--r-l) / .46);
  --r-text:#ecf8f5; --r-text-d:#cfe6e2;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; border:1px solid var(--r-border);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--r-strong), transparent 60%),
    linear-gradient(to bottom right, var(--r-soft), transparent);
  box-shadow:var(--shadow-sm); flex:0 0 auto; max-width:min(48ch,100%); color:var(--r-text);
}
.roadmap > li:nth-child(6n+1){--r-h:165}
.roadmap > li:nth-child(6n+2){--r-h:205}
.roadmap > li:nth-child(6n+3){--r-h:258}
.roadmap > li:nth-child(6n+4){--r-h:38 }
.roadmap > li:nth-child(6n+5){--r-h:330}
.roadmap > li:nth-child(6n+6){--r-h:190}
.roadmap .rm-badge{font-weight:700; padding:2px 8px; border-radius:999px; background:var(--r-chip); border:1px solid var(--r-chip-b); color:var(--r-text)}
.roadmap .rm-text{line-height:1.35; color:var(--r-text-d)}
.roadmap > li:hover{transform:translateY(-1px); box-shadow:var(--shadow)}

/* Pricing — full-card tint + professional tick list */
.price{font-weight:700; font-size:18px}
.pricing > .card{
  --p-s:70%; --p-l:50%; --alpha-strong:.28; --alpha-soft:.16; --p-h:205;
  --p-strong:hsl(var(--p-h) var(--p-s) var(--p-l) / var(--alpha-strong));
  --p-soft:  hsl(var(--p-h) var(--p-s) calc(var(--p-l) - 14%) / var(--alpha-soft));
  --p-border:hsl(var(--p-h) var(--p-s) var(--p-l) / .36);
  --p-text:#eef8fb; --p-text-d:#cfe2e7; --p-check:hsl(var(--p-h) var(--p-s) calc(var(--p-l) + 6%) / .95);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--p-strong), transparent 60%),
    linear-gradient(to bottom right, var(--p-soft), transparent);
  border-color:var(--p-border); color:var(--p-text);
}
.pricing > .card:nth-child(1){--p-h:205} /* blue   */
.pricing > .card:nth-child(2){--p-h:165} /* emerald*/
.pricing > .card:nth-child(3){--p-h:258} /* violet */
.pricing > .card h3,.pricing > .card .price{color:var(--p-text)}
.pricing .list{margin:10px 0 14px; padding:0; list-style:none; display:grid; gap:8px}
.pricing .list li{display:grid; grid-template-columns:18px 1fr; align-items:start; column-gap:8px; color:var(--p-text-d)}
.pricing .list li::before{content:"✔"; font-size:14px; font-weight:700; line-height:1; color:var(--p-check); transform:translateY(2px)}
.pricing > .card .btn{border-color:var(--p-border)}
.pricing > .card .btn.btn-accent{color:#06221b}

/* Optional: bottom illustration layer if present in DOM */
.page-bg{position:fixed; left:0; right:0; bottom:0; height:clamp(180px,26vh,420px); z-index:0; pointer-events:none; overflow:hidden}
.page-bg::after{
  content:""; position:absolute; left:-18%; right:-18%; top:-18%; bottom:0;
  background:url('assets/bg-upload.webp') bottom center/cover no-repeat;
  transform-origin:center bottom; transform:scale(.82);
}
.page-bg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--brand-bg) 0%, rgba(11,43,51,0.92) 20%, rgba(11,43,51,0) 70%);
}
.site-header,.spa-shell,.site-footer{position:relative; z-index:1}

/* === Utilities (helpers, spacing, visibility) ====================== */
.list{margin:0; padding-left:18px}                 /* legacy list (kept for docs) */
#values,#trust-list,.values,.tools-grid,.pricing{list-style:none; margin:0; padding:0}
.hidden{display:none !important}


/* About text: readable line length & clean wrapping */
.about-text{
  /* target ~60–70 characters per line for readability */
  max-width: 64ch;
  /* margin: 0 auto;                 /* center inside the pane */ */
}

.about-text p{
  margin: 0 0 0.7rem;             /* a bit of breathing room */
  white-space: normal;            /* ensure wrapping */
  overflow-wrap: anywhere;        /* wrap even long words/links */
  hyphens: auto;                  /* soft hyphenation where supported */
  text-wrap: pretty;              /* nicer line breaks (supported in modern browsers) */
}

/* Responsive tune: slightly wider on big screens, narrower on small */
@media (min-width: 1200px){
  .about-text{ max-width: 70ch; }
}
@media (max-width: 640px){
  .about-text{ max-width: 52ch; }
}
a.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}