/* StokLensa v13 — original product-first visual language.
 * Inspired by clear fintech UX patterns: editorial hierarchy, numbered flows,
 * transparent states, quiet data visuals. Not a reproduction of another brand. */
:root{
 --bg:#0a1212;--bg-alt:#0d1717;--surface:#111e1d;--surface-2:#192725;--surface-3:#243631;
 --text:#f5f7ef;--muted:#a9bcb3;--subtle:#8da197;--accent:#cef2a0;--accent-text:#142519;
 --outline:#30423a;--rule:#283a34;--header:rgba(10,18,18,.95);
 --shadow:0 24px 68px rgba(0,0,0,.14);
}
html[data-theme="light"]{
 --bg:#f6f8f3;--bg-alt:#eef3eb;--surface:#fff;--surface-2:#edf3e9;--surface-3:#e3eddd;
 --text:#13221d;--muted:#566c60;--subtle:#6c8375;--accent:#2d7347;--accent-text:#fff;
 --outline:#d2ded4;--rule:#d9e4db;--header:rgba(246,248,243,.96);
 --shadow:0 18px 54px rgba(27,61,36,.075);
}
html{scroll-padding-top:96px}
body{font-size:15px;line-height:1.7;letter-spacing:-.005em}
.container{max-width:1280px}
.site-header{height:85px;border-bottom:1px solid var(--outline);box-shadow:none}
.nav-shell{gap:18px}
.brand{font-weight:820;letter-spacing:-.06em}
.site-nav{gap:clamp(11px,1.6vw,27px);font-size:12px;letter-spacing:0}
.site-nav a{transition:color .18s;white-space:nowrap}
.site-nav a:focus-visible,.button:focus-visible{border-radius:5px}
.nav-actions{gap:9px}
.theme-toggle,.cloud-language,.button-outline,.button-ghost{box-shadow:none}
.theme-toggle{background:var(--surface);border-radius:12px}
.button{border-radius:10px;font-weight:770;min-height:42px;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.button:hover{transform:translateY(-1px)}
.button-primary{background:var(--accent)}
.button-primary:active{transform:translateY(0)}
button:disabled,.button:disabled{opacity:.55;cursor:not-allowed}
a,button,input,textarea,select,summary{ -webkit-tap-highlight-color:transparent }
h1,h2,h3{font-weight:770;letter-spacing:-.055em;line-height:1.12}
h1{font-size:clamp(46px,6.2vw,94px)}
h2{letter-spacing:-.057em}
.hero{padding-top:98px}
.hero-description{max-width:540px;font-size:17px}
.hero-grid{grid-template-columns:1.1fr .9fr}
.preview-window{transform:none;border-radius:19px;box-shadow:none}
.halo,.background-glow{display:none}
.eyebrow,.overline,.micro-label,.cloud-kicker,.cloud-eyebrow{letter-spacing:.15em}
.hero-footnote{margin-top:28px}
.section{border-color:var(--rule)}
.feature-card,.pricing-card,.faq-grid details,.flow-card,.about-panel,
.cloud-card,.cloud-stat,.manager-surface,.manager-notice,.manager-guide,
.manager-hero-side,.preview-warning,.ws-surface,.ws-metric-card,.workspace-app{
 box-shadow:none!important;border-color:var(--outline)!important;border-radius:17px;
}
.pricing-card.featured,.price-card.featured{border-color:var(--accent)!important}
.preview-stats>div,.cloud-stat,.v10-stats .cloud-stat,.manager-metric{
 background:var(--surface-2);border:1px solid var(--outline);
 border-radius:13px;padding:20px;
}
.cloud-shell{gap:clamp(30px,6vw,90px)}
.cloud-intro h1,.cloud-dashboard-title h1,.manager-hero h1{
 font-size:clamp(44px,5vw,76px);line-height:1.07;letter-spacing:-.065em
}
.cloud-card{background:var(--surface);padding:clamp(22px,3vw,35px)}
.cloud-stat{min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.cloud-stat strong{font-weight:800;letter-spacing:-.05em}
.cloud-note,.manager-notice,.preview-warning{
 background:var(--surface-2);border:1px solid var(--outline)!important;
 color:var(--muted);border-radius:13px;box-shadow:none
}
.cloud-note>span:first-child{color:var(--accent)}
.cloud-form input,.cloud-form select,.cloud-form textarea,
.manager-field input,.manager-field select,.manager-field textarea,
.manager-search,input[type="search"]{
 background:var(--surface-2);border:1px solid var(--outline);
 border-radius:10px;color:var(--text);transition:border-color .2s;
}
.cloud-form input:focus,.cloud-form select:focus,.cloud-form textarea:focus,
.manager-field input:focus,.manager-field select:focus{border-color:var(--accent)}
.cloud-table,.manager-table,.v10-table-card table{border-collapse:collapse}
.cloud-table th,.manager-table th,.v10-table-card th{
 text-align:left;text-transform:uppercase;letter-spacing:.09em;
 font-size:10px;font-weight:750;color:var(--subtle)
}
.cloud-table tr,.manager-table tr,.v10-table-card tr{border-bottom:1px solid var(--rule)}
.cloud-table th,.cloud-table td,.manager-table th,.manager-table td{padding-block:15px}
.cloud-tabs,.manager-tabs{border-color:var(--outline)}
.cloud-tab,.manager-tab{font-weight:730}
.cloud-tab.selected,.cloud-language.is-selected,.manager-tab.active{font-weight:800}
.cloud-card h2,.cloud-card h3,.v10-heading h2{letter-spacing:-.05em}
.cloud-store-shell{padding-bottom:120px}
.v10-form-grid,.cloud-work-grid{gap:18px}
.v10-table-card{overflow:hidden}
.v10-summary{font-weight:650}
.manager-toolbar{border:1px solid var(--outline);background:var(--surface);border-radius:14px}
.manager-tab.active{color:var(--accent)}
.manager-small,.ws-tab{border-radius:9px}
.manager-surface-heading,.v10-heading{gap:22px}
.workspace-sidebar{background:var(--surface)}
.ws-tab.is-selected{background:var(--surface-3);color:var(--accent)}
.ws-surface,.workspace-content{background:var(--surface)}
.doc-shell{padding-block:90px 120px}
.doc-shell h1{font-size:clamp(48px,6.2vw,86px);line-height:1.06}
.doc-shell h2{font-size:clamp(27px,3vw,42px);margin-top:56px;letter-spacing:-.045em}
.doc-shell p,.doc-shell li{line-height:1.9}
.doc-shell a:not(.button):hover{color:var(--accent)}
.site-footer{border-top:1px solid var(--outline)}
.footer-main,.footer-bottom{gap:24px}
details summary{cursor:pointer}
details[open] summary{color:var(--accent)}
[role="alert"],[role="status"]{overflow-wrap:anywhere}

/* New reusable Sakubit-inspired storytelling elements: visible system states,
   numbered flow explanations and product walk-throughs. */
.v13-process-section{padding:95px 0;background:var(--bg-alt);
 border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)}
.v13-process-top{display:grid;grid-template-columns:1.1fr .8fr;gap:50px;align-items:end;margin-bottom:35px}
.v13-process-top h2{margin:12px 0 0;font-size:clamp(36px,4.8vw,65px);line-height:1.1}
.v13-process-top p:last-child{color:var(--muted);font-size:15px;max-width:440px;margin:0}
.v13-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--outline);border:1px solid var(--outline);border-radius:17px;overflow:hidden}
.v13-process-item{padding:28px;background:var(--surface);display:flex;flex-direction:column;min-height:255px}
.v13-process-item small{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--accent)}
.v13-process-item h3{margin:54px 0 10px;font-size:23px}
.v13-process-item p{font-size:13px;color:var(--muted);line-height:1.75;margin:0}
.v13-process-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:23px;color:var(--muted);font-size:13px}
.v13-process-foot a{color:var(--accent);font-weight:800}
.v13-status-bar{display:flex;align-items:center;gap:11px;padding:13px 18px;border:1px solid var(--outline);border-radius:12px;background:var(--surface-2);margin:24px 0 0;color:var(--muted);font-size:13px}
.v13-status-bar strong{color:var(--text)}
.v13-status-dot{background:var(--accent);width:7px;height:7px;display:inline-block;border-radius:50%;flex:none}
.v13-subnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:25px 0 32px}
.v13-subnav a{padding:8px 13px;border:1px solid var(--outline);border-radius:9px;color:var(--muted);background:var(--surface);font-size:12px;font-weight:730}
.v13-subnav a:hover{color:var(--accent);border-color:var(--accent)}
.v13-callout{margin:35px 0;padding:24px;background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;color:var(--muted)}
.v13-callout strong{color:var(--text)}
.v13-page-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:33px}
.v13-page-links a{display:inline-flex;padding:12px 17px;border:1px solid var(--outline);border-radius:9px;font-weight:700;font-size:13px}
.v13-page-links a:first-child{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.v13-page-links a:hover{border-color:var(--accent)}
@media(max-width:1100px){.site-nav{gap:13px}.site-nav a{font-size:11px}.v13-process-grid{grid-template-columns:repeat(2,1fr)}.v13-process-item{min-height:205px}.v13-process-item h3{margin-top:28px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:660px;margin-inline:auto;width:100%}.v13-process-top{grid-template-columns:1fr}.v13-process-top p:last-child{max-width:700px}}
@media(max-width:720px){.container{padding-inline:18px}.site-header{height:76px}.v13-process-section{padding-block:70px}.v13-process-grid{grid-template-columns:1fr}.v13-process-item{min-height:0;padding:24px}.v13-process-item h3{margin:24px 0 10px}.v13-process-foot{align-items:start;flex-direction:column}.v13-status-bar{align-items:start}.cloud-card{padding:20px}.cloud-shell{gap:30px}.doc-shell{padding-block:62px 80px}.manager-toolbar{overflow:auto}.cloud-table-scroll{max-width:100%;overflow:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}