/* One visual language for marketing, membership and setup. */
body[data-page] { background-color: #0a0f0d; }
body[data-page="landing"] { --muted: #a1aaa5; --accent-ink: #76dfab; --wrap: 1200px; }
[data-page="landing"] .navbar { border-radius: 12px; background: #101713ed; box-shadow: 0 6px 28px #0002; }
.nav-links a { color: #b0bdb5; }
[data-page="landing"] .btn-primary { box-shadow: none; }
[data-page="landing"] .hl { text-shadow: none; color: #74dfa6; }
[data-page="landing"] .hero { padding: 72px 0 84px; background: #0a0f0d; }
[data-page="landing"] .hero-canvas { opacity: .24; }
[data-page="landing"] .hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 62px; align-items: center; }
[data-page="landing"] .hero-copy { max-width: 100%; }
[data-page="landing"] h1 { font-size: clamp(40px, 4.3vw, 61px); font-weight: 600; line-height: 1.09; letter-spacing: -2.8px; max-width: 16ch; }
[data-page="landing"] .hero p.lead { font-size: 16px; line-height: 1.8; color: #aebdb4; max-width: 45ch; }
[data-page="landing"] .eyebrow { font-size: 10px; letter-spacing: 1.8px; color: #94c9aa; }
[data-page="landing"] .platforms { margin-top: 50px; gap: 23px; }
[data-page="landing"] .chip { background: #f1f5f2; border-radius: 8px; box-shadow: none; }
[data-page="landing"] .card, [data-page="landing"] .step, [data-page="landing"] .metric { box-shadow: none; background: #111a15; border-color: #ffffff12; }
[data-page="landing"] .card:hover, [data-page="landing"] .step:hover { border-color: #3ecf8e50; box-shadow: 0 14px 40px #0002; transform: translateY(-3px); }
[data-page="landing"] .plan { box-shadow: none; background: #111a15; }
[data-page="landing"] .plan.hot { background: #12231a; border: 1px solid #3ecf8e80; box-shadow: 0 12px 40px #0002; transform: none; }
[data-page="landing"] .plan.hot:hover { transform: translateY(-3px); }
[data-page="landing"] .plan .tag { color: #082719; background: #66dda0; box-shadow: none; }
[data-page="landing"] .apply, [data-page="landing"] .modal { background: #111a15; }
[data-page="landing"] .modal .btn-primary { background: #3ecf8e; box-shadow: none; }
[data-page="landing"] section[id] { scroll-margin-top: 100px; }
.nav-toggle { display: none; }
body.modal-open #page { transform: none; filter: none; opacity: 1; border-radius: 0; }
.backdrop { visibility: hidden; background: #030b07cc; transition: opacity .18s, visibility .18s; }
.backdrop.open { visibility: visible; }
.modal { border-radius: 16px; transform: translateY(12px); transition: transform .18s, opacity .18s; }
.product-preview { position: relative; padding: 23px; border: 1px solid #8ad2a632; background: linear-gradient(155deg, #1b2c22, #101a14 60%); border-radius: 16px; box-shadow: 0 28px 70px #0004; }
.preview-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid #ffffff10; color: #a5baac; font-size: 11px; }
.preview-toolbar img { width: 19px; height: 22px; object-fit: contain; }
.preview-toolbar b { color: #e3f0e7; font-size: 13px; font-weight: 600; }
.preview-tag { margin-left: auto; padding: 3px 7px; border-radius: 4px; border: 1px solid #ffffff18; color: #a1b1a6; font-size: 9px; letter-spacing: .5px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 20px; }
.preview-heading h2 { font-size: 21px; font-weight: 550; letter-spacing: -.6px; }
.preview-heading p { margin: 6px 0 0; font-size: 11px; color: #9cafA1; }
.preview-monogram { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #6ace9333; border-radius: 50%; color: #92d8ae; font-size: 12px; background: #244d3330; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-stat { border: 1px solid #ffffff0d; border-radius: 8px; padding: 14px; background: #ffffff03; }
.preview-stat small { display: block; font-size: 10px; color: #99ab9e; margin-bottom: 5px; }
.preview-stat b { display: block; color: #e1eee5; font-size: 14px; font-weight: 500; }
.preview-flow { margin-top: 20px; padding: 19px 16px; background: #09130db0; border: 1px solid #ffffff0b; border-radius: 9px; }
.preview-flow-title { display: flex; justify-content: space-between; font-size: 11px; color: #d4e6da; }
.preview-flow-title span { color: #789685; font-size: 9px; }
.preview-chart { margin-top: 8px; width: 100%; height: 93px; }
.preview-steps { display: flex; justify-content: space-between; margin-top: 6px; color: #8ca395; font-size: 10px; }
.preview-footer { display: flex; gap: 9px; align-items: center; margin-top: 17px; padding-top: 16px; border-top: 1px solid #ffffff0d; font-size: 10px; color: #a5bcaf; }
.preview-footer i { width: 6px; height: 6px; border-radius: 50%; background: #61d496; }
.preview-caption { font-size: 10px; color: #80958a; text-align: center; margin: 16px 0 0; }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid #ffffff14; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 16px; color: #e3eee7; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: #83cfa5; font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: #a9b8af; font-size: 14px; line-height: 1.9; max-width: 70ch; margin: -2px 0 24px; }
.faq details a { color: #92e4b5; text-decoration: underline; text-underline-offset: 4px; }
/* Member panel and account pages */
[data-page="portal"] { --wrap: 1160px; --panel: #121b16; --muted: #a3b1a8; --line: #ffffff12; }
[data-page="portal"] .login-wrap { background: radial-gradient(ellipse at 50% 0, #265a3525, transparent 60%); min-height: 100dvh; }
[data-page="portal"] .login, [data-page="reset"] .kart { background: #111a15; border-radius: 16px; border-color: #ffffff14; box-shadow: 0 25px 70px #0003; }
[data-page="portal"] .login { padding: 38px; max-width: 420px; }
[data-page="portal"] .login h1 { font-weight: 550; font-size: 26px; margin-top: 26px; }
[data-page="portal"] .login .brand { justify-content: flex-start; }
[data-page="portal"] .login h1, [data-page="portal"] .login p.sub { text-align: left; }
[data-page="portal"] .btn-primary { box-shadow: none; border-radius: 8px; }
[data-page="portal"] input { border-radius: 8px; background: #0b130f; }
[data-page="portal"] .top { background: #101a15ed; }
[data-page="portal"] .kpi, [data-page="portal"] .panel { box-shadow: none; }
[data-page="portal"] .cards { gap: 16px; margin: 26px 0; }
[data-page="portal"] .kpi { padding: 22px; border-radius: 12px; }
[data-page="portal"] .kpi .val { margin: 12px 0 5px; font-size: 27px; font-weight: 550; }
[data-page="portal"] .kpi .lab { font-size: 10px; letter-spacing: .8px; }
[data-page="portal"] .panel { padding: 25px; border-radius: 12px; margin-bottom: 20px; }
[data-page="portal"] .panel h2 { text-transform: none; font-size: 15px; font-weight: 550; color: #e0ebe4; letter-spacing: -.2px; }
.portal-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 0; }
.portal-heading .eyebrow { margin-bottom: 8px; font-size: 10px; color: #85b899; letter-spacing: 1.5px; }
.portal-heading h1 { margin: 0; font-size: 28px; font-weight: 550; letter-spacing: -.8px; }
.portal-heading h1 small { font-size: 12px; margin-top: 8px; font-weight: 400; letter-spacing: 0; }
.portal-support { padding: 9px 14px; border: 1px solid #ffffff18; border-radius: 8px; color: #c0d4c7; font-size: 12px; text-decoration: none; white-space: nowrap; }
.portal-support:hover { background: #ffffff08; }
[data-page="portal"] .empty { padding: 20px; background: #ffffff02; border: 1px dashed #ffffff16; border-radius: 8px; line-height: 1.8; font-size: 13px; }
[data-page="portal"] .seg { padding: 4px; background: #09120d; border: 1px solid #ffffff12; border-radius: 8px; }
[data-page="portal"] .seg button { min-height: 34px; padding: 6px 14px; }
[data-page="portal"] .seg button.on { color: #9eedbe; background: #213e2b; }
[data-page="portal"] .note { font-style: normal; line-height: 1.8; }
[data-page="portal"] .tbl:focus-visible { outline-offset: 3px; }
[data-page="onboarding"] .sarmal { max-width: 660px; }
[data-page="onboarding"] .adim-govde { padding: 0 0 32px 8px; }
[data-page="onboarding"] .varlik-blok { background: #121b16; border-color: #ffffff15; }
[data-page="reset"] .kart { max-width: 410px; padding: 34px; }
[data-page="privacy"] main, [data-page="terms"] main { line-height: 1.85; }
@media (max-width: 1000px) {
  [data-page="landing"] .hero-grid { gap: 28px; }
  .nav-links { gap: 15px; margin-left: 0; }
  .nav-links a { font-size: 12px; }
}
@media (max-width: 1050px) {
  .navbar { position: relative; }
  .nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; background: #ffffff06; border: 1px solid #ffffff16; border-radius: 8px; color: #d7e6dc; }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav-right { margin-left: 0; }
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 12px; background: #132017; border: 1px solid #ffffff20; border-radius: 12px; box-shadow: 0 16px 35px #0005; }
  .nav-links.is-open { display: flex; flex-direction: column; gap: 0; }
  .nav-links a { padding: 12px; font-size: 14px; border-radius: 6px; }
  .nav-links a:hover { background: #ffffff08; }
}
@media (max-width: 860px) {
  [data-page="landing"] .hero-grid { grid-template-columns: 1fr; max-width: 610px; margin: 0 auto; gap: 38px; }
  [data-page="landing"] .hero { padding: 42px 0 65px; }
  [data-page="landing"] h1 { max-width: 17ch; font-size: clamp(38px, 6.8vw, 56px); }
  .product-preview { max-width: 520px; width: 100%; }
  [data-page="landing"] .platforms { justify-content: center; }
  [data-page="landing"] .platforms > span { width: 100%; text-align: center; }
}
@media (max-width: 520px) {
  [data-page="landing"] .navbar { padding: 9px 12px; }
  [data-page="landing"] .nav-right { width: auto; margin-left: 0; gap: 8px; }
  [data-page="landing"] .nav-right .btn { padding: 8px 12px; min-height: 40px; font-size: 12px; white-space: nowrap; }
  [data-page="landing"] .nav-right .btn-primary { display: none; }
  [data-page="landing"] .brand { font-size: 16px; gap: 6px; }
  [data-page="landing"] .brand .mark { height: 23px; }
  [data-page="landing"] .navbar { gap: 8px; flex-wrap: nowrap; }
  [data-page="landing"] h1 { letter-spacing: -1.6px; font-size: 39px; }
  [data-page="landing"] .hero { padding-top: 34px; }
  [data-page="landing"] .hero-cta { margin-top: 26px; }
  [data-page="landing"] .hero-cta .btn { width: auto; flex: 1; padding: 12px 15px; font-size: 13px; white-space: nowrap; }
  .product-preview { padding: 18px; }
  .preview-heading h2 { font-size: 19px; }
  [data-page="portal"] main { padding: 22px 16px 40px; }
  [data-page="portal"] .login { padding: 28px 24px; }
  [data-page="portal"] .cards, [data-page="portal"] .perf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-page="portal"] .kpi { padding: 16px 13px; }
  [data-page="portal"] .kpi .val { font-size: 23px; }
  [data-page="portal"] .panel { padding: 18px; }
  .portal-heading { flex-wrap: wrap; gap: 12px; }
  .portal-heading h1 { font-size: 24px; overflow-wrap: anywhere; }
  [data-page="portal"] .plan-main { min-width: 0; }
  [data-page="portal"] .scope li { flex-wrap: wrap; }
  [data-page="portal"] .scope .nm { min-width: 120px; }
  [data-page="reset"] .kart { padding: 28px 24px; }
}

/* Additional services have their own accessible navigation group. */
.nav-extra { position:relative; }
.nav-extra>summary { display:flex; align-items:center; gap:5px; list-style:none; cursor:pointer; color:#b0bdb5; font-size:14px; white-space:nowrap; }
.nav-extra>summary::-webkit-details-marker { display:none; }
.nav-extra>summary:hover,.nav-extra[open]>summary { color:#e1f0e6; }
.nav-extra>summary:focus-visible { outline:2px solid #76dfab; outline-offset:5px; border-radius:3px; }
.nav-extra>summary svg { transition:transform .18s; }.nav-extra[open]>summary svg { transform:rotate(180deg); }
.nav-extra-links { position:absolute; top:calc(100% + 20px); left:-16px; width:250px; padding:9px; border:1px solid #ffffff20; border-radius:10px; background:#132017; box-shadow:0 18px 45px #0005; display:grid; gap:2px; }
.nav-extra-links a { display:block; font-size:13px!important; padding:11px 12px; border-radius:5px; }
.nav-extra-links a:hover,.nav-extra-links a:focus-visible { background:#ffffff08; }
.nav-extra-links a:first-child { color:#86d9a6; border-bottom:1px solid #ffffff12; border-radius:0; margin-bottom:4px; }
@media (min-width:1051px) and (max-width:1100px) { .nav-extra>summary { font-size:12px; } }
@media (max-width:1050px) { .nav-links { max-height:calc(100dvh - 105px); overflow-y:auto; }.nav-extra>summary { padding:12px; font-size:14px; }.nav-extra-links { position:static; width:auto; margin:0 5px 7px 12px; border:0; border-left:1px solid #7c9d8950; border-radius:0; box-shadow:none; padding:0 0 0 5px; }.nav-extra-links a { padding:10px 12px; } }
@media (prefers-reduced-motion:reduce) { .nav-extra>summary svg { transition:none; } }