/* Studio visual system. Shared accents, authored symbols and section compositions. */
:root {
  --ks-sidebar: 224px;
  --visual-accent: #b1a1ff;
  --visual-teal: #78dcca;
  --visual-warm: #e7b985;
  --visual-tint: rgba(177,161,255,.09);
  --visual-border: rgba(177,161,255,.22);
  --visual-ease: cubic-bezier(.22,.75,.25,1);
}
[data-theme="light"] {
  --visual-accent: #6350bf;
  --visual-teal: #147d72;
  --visual-warm: #966334;
  --visual-tint: rgba(99,80,191,.06);
  --visual-border: rgba(99,80,191,.2);
}
.ui-icon { display:block; width:24px; height:24px; flex:0 0 auto; }
.ui-icon .icon-fill { fill:currentColor; fill-opacity:.13; }
.ui-icon .icon-solid { fill:currentColor; stroke:none; }
.ui-icon .icon-detail { opacity:.55; }
.section-symbol { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; color:var(--visual-accent); background:var(--visual-tint); border:1px solid var(--visual-border); border-radius:12px; }
.section-symbol .ui-icon { width:21px; height:21px; }
.section-eyebrow { display:flex; align-items:center; gap:12px; line-height:1.5; }
.section-index { font:11px/1 ui-monospace,monospace; letter-spacing:.04em; opacity:.5; margin-inline-start:5px; }
.eyebrow { color:var(--ks-muted)!important; }
.section h2, .apps-v2-brand h1, .privacy-v2-brand h1 { text-wrap:balance; overflow-wrap:break-word; }
.section h2 { font-size:clamp(36px,4.2vw,60px)!important; line-height:1.07!important; letter-spacing:-.045em!important; }
.section { padding:80px 0!important; scroll-margin-top:86px; }
.section-head { gap:34px; }
.section-head > div { min-width:0; flex:1 1 58%; }
.section-head .section-lead { flex:0 1 360px; }
.section-head > .btn { flex:0 0 auto; }
.btn { gap:12px; transition:transform .25s var(--visual-ease),background .25s,border-color .25s!important; }
.btn .ui-icon { width:18px; height:18px; transition:transform .25s var(--visual-ease); }
.btn:hover .ui-icon { transform:translateX(3px); }
[dir="rtl"] .btn:hover .ui-icon { transform:translateX(-3px); }
.btn.primary { background:var(--visual-accent)!important; color:#16141f!important; border-color:var(--visual-accent)!important; }
[data-theme="light"] .btn.primary { color:#fff!important; }
.btn:not(.primary):hover { background:var(--visual-tint)!important; border-color:var(--visual-border)!important; }

/* Compact navigation, with optical rather than font-dependent icons. */
.sidebar { padding-top:28px!important; }
.brand-mini strong { font-size:13px!important; }
.nav { gap:9px!important; }
.sidebar .nav a { position:relative; padding:11px 12px!important; gap:12px!important; font-size:13px; transition:background .22s,color .22s; }
.sidebar .nav .ico { width:24px!important; flex-basis:24px!important; }
.sidebar .nav .ico .ui-icon { width:23px; height:23px; }
.sidebar .nav a.active { background:var(--visual-tint)!important; color:var(--ks-text)!important; }
.sidebar .nav a.active .ico { color:var(--visual-accent); }
.sidebar .nav a.active::after { content:""; position:absolute; inset-inline-end:0; top:15px; bottom:15px; width:2px; border-radius:2px; background:var(--visual-accent); }
.sidebar-toggle { display:grid; place-items:center; }
.sidebar-toggle .ui-icon { width:20px; height:20px; transition:transform .3s; }
.sidebar.collapsed .sidebar-toggle .ui-icon { transform:rotate(180deg); }
.control { min-height:42px; transition:background .2s,border-color .2s,color .2s; }
.topbar > div { align-items:center; }
.lang-menu-wrap { display:flex; }
.topbar .lang-native { position:absolute!important; }
.control:hover { background:var(--visual-tint)!important; border-color:var(--visual-border)!important; }
.theme-control { width:42px; height:42px; padding:9px!important; }
.theme-control [data-theme-label] { display:grid; place-items:center; }
.theme-control .ui-icon { width:20px; height:20px; }
.theme-moon { display:none; }
[data-theme="light"] .theme-sun { display:none; }
[data-theme="light"] .theme-moon { display:block; }
.mobile-menu { align-items:center; justify-content:center; }
.mobile-menu .ui-icon { width:21px; height:21px; }
.lang-button { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.lang-button::after { content:""; width:6px; height:6px; border-inline-end:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg); margin-top:-3px; transition:transform .2s; }
.lang-button[aria-expanded="true"]::after { transform:rotate(225deg); margin-top:3px; }
.lang-menu { padding:8px; border-radius:16px; }
.lang-menu button { padding:10px 12px; }
.lang-menu button:hover,.lang-menu button[aria-selected="true"] { background:var(--visual-tint); color:var(--visual-accent); }
[data-theme="light"] .lang-menu button:hover,[data-theme="light"] .lang-menu button[aria-selected="true"] { color:var(--visual-accent); }

/* The studio mark sits among the real products, rather than in an empty hero. */
.hero.hero-v3 { display:grid!important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important; min-height:610px!important; gap:32px!important; padding:50px 0 84px!important; }
.hero.hero-v3 .hero-copy { min-width:0; max-width:none!important; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; font-size:10px!important; letter-spacing:.14em!important; }
.studio-dot { width:6px; height:6px; border-radius:50%; background:var(--visual-teal); flex:0 0 6px; box-shadow:0 0 0 4px rgba(120,220,202,.08); }
.hero.hero-v3 h1 { font-size:clamp(70px,7.6vw,112px)!important; line-height:.91!important; letter-spacing:-.065em!important; }
.hero.hero-v3 h1 span { color:var(--visual-accent)!important; }
.hero.hero-v3 .hero-copy p { margin:28px 0 30px!important; max-width:500px!important; font-size:clamp(17px,1.4vw,21px)!important; line-height:1.65!important; }
.hero.hero-v3 .actions { margin:0!important; gap:10px!important; }
.hero.hero-v3 .actions .btn { font-size:13px!important; padding:0 16px!important; }
.studio-stage { position:relative; width:100%; max-width:450px; aspect-ratio:1; justify-self:center; transform:perspective(900px) rotateX(var(--stage-y,0deg)) rotateY(var(--stage-x,0deg)); transition:transform .5s var(--visual-ease); }
.studio-stage-core { position:absolute; inset:33%; display:grid; place-items:center; background:var(--ks-surface); border:1px solid var(--ks-line); border-radius:28%; box-shadow:0 18px 42px rgba(0,0,0,.12); }
.studio-stage-core::before { content:""; position:absolute; inset:-13px; border:1px solid var(--visual-border); border-radius:30%; transform:rotate(12deg); }
.studio-stage-core img { width:73%; height:73%; object-fit:contain; }

/* Principles: one family, five individual accents. */
.principles { gap:12px!important; }
.principle { position:relative; padding:24px 20px!important; border-radius:22px!important; transition:background .25s,border-color .25s,transform .3s var(--visual-ease); }
.principle:not(:first-child) { padding-inline-start:20px!important; }
.principle-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:25px; gap:12px; }
.principle .principle-icon { width:50px; height:50px; margin:0; border:1px solid var(--visual-border); border-radius:16px; color:var(--visual-accent); background:var(--visual-tint); }
.principle .principle-icon .ui-icon { width:29px; height:29px; }
.principle:nth-child(2) .principle-icon,.principle:nth-child(5) .principle-icon { color:var(--visual-teal); }
.principle:nth-child(4) .principle-icon { color:var(--visual-warm); }
.principle-number { font:11px/1.5 ui-monospace,monospace; color:var(--ks-muted); opacity:.58; }
.principle strong { font-size:17px!important; line-height:1.35!important; }
.principle p { font-size:13px!important; line-height:1.65!important; margin-top:12px!important; }
.principle:hover { border-color:var(--visual-border)!important; }

/* A framed collection and a connected three-step narrative. */
.portfolio-section .section-head > div { flex-basis:70%; }
.portfolio-section h2 { max-width:760px; }
.portfolio-section .app-mosaic { grid-template-columns:repeat(9,minmax(0,1fr))!important; gap:16px!important; padding:30px!important; border:1px solid var(--ks-line)!important; border-radius:28px!important; background:var(--ks-surface)!important; }
.portfolio-section .app-icon { border-radius:21px!important; outline:5px solid var(--ks-bg); outline-offset:0; }
.portfolio-section .app-icon.featured { border-radius:27px!important; }
.portfolio-section .app-icon:focus-visible { outline:2px solid var(--visual-accent); outline-offset:5px; }
.app-icon.featured::after { display:none; }
.app-icon .tip { display:none; max-width:min(220px,calc(100vw - 24px)); white-space:normal; text-align:center; width:max-content; }
.app-icon:is(:hover,:focus-visible) .tip { display:block; opacity:1; transform:translate(calc(-50% + var(--tip-shift,0px)),0); }
.clarity { grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr); gap:50px; }
.clarity h2 { margin-bottom:26px; }
.clarity-copy p { font-size:15px; line-height:1.8; }
.clarity-close { padding-inline-start:18px; border-inline-start:2px solid var(--visual-accent); margin-top:24px!important; }
.clarity-path { gap:18px; }
.clarity-path li { position:relative; gap:16px; padding:20px!important; border:1px solid var(--ks-line)!important; border-radius:20px; background:var(--ks-surface); font-size:15px; }
.clarity-path li:not(:last-child)::after { content:""; position:absolute; top:100%; inset-inline-start:43px; height:19px; width:1px; background:var(--visual-border); }
.clarity-path .principle-icon { flex:0 0 46px; width:46px; height:46px; border-radius:14px; color:var(--visual-accent); background:var(--visual-tint); }
.clarity-path li:first-child .principle-icon { color:var(--visual-warm); }
.clarity-path li:last-child .principle-icon { color:var(--visual-teal); }
.path-index { margin-inline-start:auto; font:11px/1 ui-monospace,monospace; color:var(--ks-muted); opacity:.55; }
.contact-card { position:relative; max-width:none; padding:42px!important; border:1px solid var(--visual-border)!important; border-radius:28px!important; background:var(--visual-tint)!important; }
.contact-card h2 { max-width:820px; font-size:clamp(34px,4.2vw,60px)!important; }
.contact-card p { font-size:16px!important; }
.email-cta { background:var(--ks-bg); padding:0 20px 0 12px; border-color:var(--visual-border); }
.email-cta-icon { color:var(--visual-accent); background:var(--visual-tint); }
.footer { margin-top:30px; padding-block:30px 12px!important; }
.footer-links a { position:relative; transition:color .2s; }
.footer-links a:hover { color:var(--visual-accent); }
.footer-links a::after { content:""; display:block; height:1px; margin-top:5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.footer-links a:hover::after { transform:scaleX(1); }

/* Catalog: clearer scanning, category pictograms and tactile product cards. */
.apps-v2-hero,.privacy-v2-hero { padding:40px 0 44px; }
.apps-v2-brand,.privacy-v2-brand { justify-content:space-between; gap:32px; }
.apps-v2-brand > div:first-child,.privacy-v2-brand > div:first-child { min-width:0; }
.apps-v2-brand h1,.privacy-v2-brand h1 { font-size:clamp(44px,5.4vw,78px); line-height:1.03; letter-spacing:-.055em; }
.apps-v2-brand p,.privacy-v2-brand p { max-width:640px; font-size:16px; }
.page-emblem { position:relative; flex:0 0 136px; width:136px; height:136px; display:grid; place-items:center; color:var(--visual-accent); background:var(--visual-tint); border:1px solid var(--visual-border); border-radius:34px; transform:rotate(5deg); }
.page-emblem::before { position:absolute; content:""; inset:10px; border:1px solid var(--visual-border); border-radius:27px; transform:rotate(-12deg); }
.page-emblem > .ui-icon { width:64px; height:64px; transform:rotate(-5deg); stroke-width:1.2; }
.privacy-emblem { color:var(--visual-teal); }
.apps-v2-controls { padding:30px 0 24px; }
.apps-v2-search-wrap { max-width:560px; }
.apps-v2-search { height:54px; padding-inline:50px 16px; background:var(--ks-surface); border-radius:16px; }
.apps-v2-search-icon { left:auto; inset-inline-start:17px; display:grid; place-items:center; color:var(--visual-accent); }
.apps-v2-search-icon .ui-icon { width:20px; height:20px; }
.apps-v2-search::placeholder { color:var(--ks-muted); }
.apps-v2-search:focus { border-color:var(--visual-accent)!important; outline:2px solid var(--visual-tint); outline-offset:3px; }
.apps-v2-filters { padding:22px 2px 8px; gap:8px; }
.apps-v2-chip { display:inline-flex; align-items:center; gap:8px; border-radius:11px; border:1px solid var(--ks-line); padding:10px 13px; font-size:13px; color:var(--ks-muted); min-height:42px; }
.apps-v2-chip .ui-icon { width:17px; height:17px; }
.apps-v2-chip.active { background:var(--visual-tint); color:var(--visual-accent); border-color:var(--visual-border); }
[data-theme="light"] .apps-v2-chip.active { background:var(--visual-tint); color:var(--visual-accent); border-color:var(--visual-border); }
.apps-v2-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:12px 0 70px; }
.apps-v2-grid .app-card { position:relative; padding:24px; min-height:260px; border-radius:22px; border-color:var(--ks-line); background:var(--ks-surface); }
[data-theme="light"] .apps-v2-grid .app-card { background:#fff; }
.apps-v2-grid .app-card:hover { background:var(--ks-surface-2); border-color:var(--visual-border); transform:translateY(-5px); }
[data-theme="light"] .apps-v2-grid .app-card:hover { background:#fff; border-color:var(--visual-border); }
.apps-v2-grid .card-icon { width:66px; height:66px; border-radius:19px; }
.apps-v2-grid .app-card .card-title { margin:22px 0 10px; font-size:17px; line-height:1.35; letter-spacing:-.02em; font-weight:650; }
.apps-v2-grid .app-card p:not(.card-title) { font-size:13px; line-height:1.6; color:var(--ks-muted); }
.apps-v2-grid .card-category { align-self:flex-start; padding:6px 9px; font-size:10px; letter-spacing:.03em; color:var(--visual-accent); margin-top:20px; border:0; background:var(--visual-tint); }
.apps-v2-grid .card-arrow { color:var(--visual-accent); top:25px; inset-inline-end:22px; }
.apps-v2-feedback,.privacy-v2-contact { padding:36px; border:1px solid var(--visual-border); border-radius:26px; background:var(--visual-tint); margin-bottom:46px; }
.apps-v2-feedback h2,.privacy-v2-contact h2 { font-size:clamp(30px,3.6vw,50px); line-height:1.1; text-wrap:balance; }
.apps-v2-contact,.privacy-v2-email { width:58px; height:58px; border-radius:18px; color:var(--visual-accent); background:var(--ks-bg); border-color:var(--visual-border); }
.apps-v2-contact .ui-icon,.privacy-v2-email .ui-icon { width:26px; height:26px; }

/* Privacy is a deliberate reading space with a clearly separated policy library. */
.privacy-v2-general { padding:54px 0 64px; }
.privacy-v2-general-copy { padding:34px; border:1px solid var(--ks-line); border-radius:24px; background:var(--ks-surface); max-width:none; }
.privacy-v2-general h2,.privacy-v2-section-head h2 { font-size:clamp(34px,4vw,58px); line-height:1.08; text-wrap:balance; }
.privacy-v2-general p { font-size:16px; max-width:76ch; line-height:1.85; }
.privacy-v2-apps { padding:64px 0 76px; }
.privacy-v2-section-head { gap:30px; }
.privacy-v2-section-head > div { min-width:0; flex:1 1 55%; }
.privacy-v2-section-head > p { flex:0 1 360px; }
.privacy-v2-grid { padding:26px; border:1px solid var(--ks-line); border-radius:24px; background:var(--ks-surface); gap:16px; grid-template-columns:repeat(9,minmax(0,1fr)); }
.privacy-v2-grid .app-icon { outline:4px solid var(--ks-bg); border-radius:20px!important; }
.privacy-v2-grid .app-icon:focus-visible { outline:2px solid var(--visual-accent); outline-offset:5px; }
.privacy-v2-contact { align-items:center; }

@media(min-width:901px) {
  .sidebar.collapsed .nav a { padding-inline:9px!important; }
  .sidebar.collapsed .brand-mini { padding-inline:0!important; }
}
@media(max-width:1200px) {
  .hero.hero-v3 { gap:20px!important; }
  .hero.hero-v3 h1 { font-size:clamp(68px,7.8vw,94px)!important; }
  .hero.hero-v3 .actions .btn { min-height:44px!important; font-size:12px!important; }
  .principles { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  .principle:nth-child(4),.principle:nth-child(5) { min-height:200px!important; }
  .portfolio-section .app-mosaic { grid-template-columns:repeat(8,minmax(0,1fr))!important; }
  .apps-v2-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .privacy-v2-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .clarity { gap:30px; }
}
@media(max-width:900px) {
  .topbar { background:var(--ks-bg)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; }
  [data-theme="light"] .topbar { background:var(--ks-bg)!important; }
  .sidebar { z-index:120; }
  .mobile-backdrop { z-index:110; }
  .hero.hero-v3 { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important; min-height:540px!important; padding:46px 0 66px!important; }
  .hero.hero-v3 h1 { font-size:clamp(62px,9vw,82px)!important; }
  .hero.hero-v3 .hero-copy p { font-size:17px!important; }
  .studio-stage { max-width:330px; }
  .studio-stage-core::before { inset:-9px; }
  .section { padding:64px 0!important; }
  .section-head { align-items:flex-start!important; }
  .section h2 { font-size:42px!important; }
  .principles { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .principle:last-child { grid-column:span 2; }
  .principle:nth-child(4),.principle:nth-child(5) { min-height:0!important; }
  .portfolio-section .app-mosaic { grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:16px!important; padding:24px!important; }
  .clarity { grid-template-columns:1fr; gap:32px; }
  .clarity-path { max-width:none; }
  .contact-card { padding:32px!important; }
  .apps-v2-grid .app-card { padding:20px; }
  .privacy-v2-section-head > p { flex-basis:auto; }
  .privacy-v2-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .hero.hero-v3 { grid-template-columns:1fr!important; gap:32px!important; padding:34px 0 54px!important; }
  .hero.hero-v3 h1 { font-size:72px!important; }
  .hero-eyebrow { font-size:9px!important; }
  .hero.hero-v3 .hero-copy p { font-size:16px!important; margin:24px 0!important; }
  .hero.hero-v3 .actions .btn { padding:0 13px!important; }
  .studio-stage { max-width:290px; margin-bottom:26px; }
  .section-head { gap:18px; margin-bottom:26px!important; }
  .section-head .section-lead { flex-basis:auto; font-size:14px!important; margin:0; }
  .section-head > .btn { flex-basis:auto; }
  .section { padding:50px 0!important; }
  .section h2 { font-size:36px!important; }
  .section-eyebrow { font-size:9px!important; letter-spacing:.11em!important; gap:10px; }
  .section-symbol { width:34px; height:34px; flex-basis:34px; border-radius:11px; }
  .section-index { margin-inline-start:auto; }
  .principles { grid-template-columns:1fr!important; gap:10px!important; }
  .principle,.principle:not(:first-child) { padding:22px!important; }
  .principle:last-child { grid-column:auto; }
  .principle-top { margin-bottom:18px; }
  .principle strong { font-size:18px!important; }
  .principle p { font-size:14px!important; }
  .portfolio-section .app-mosaic { grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:13px!important; padding:18px!important; border-radius:22px!important; }
  .portfolio-section .app-icon { border-radius:15px!important; outline-width:3px; }
  .portfolio-section .app-icon.featured { border-radius:22px!important; }
  .clarity-path li { padding:18px!important; font-size:14px; }
  .contact-card { padding:24px!important; border-radius:22px!important; }
  .contact-card h2 { font-size:34px!important; }
  .contact-card p { font-size:15px!important; }
  .apps-v2-hero,.privacy-v2-hero { padding:32px 0; }
  .apps-v2-brand,.privacy-v2-brand { gap:16px; align-items:flex-start; }
  .apps-v2-brand h1,.privacy-v2-brand h1 { font-size:clamp(32px,8.5vw,48px); }
  .apps-v2-brand p,.privacy-v2-brand p { font-size:14px; }
  .page-emblem { display:none; }
  .apps-v2-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-bottom:46px; }
  .apps-v2-grid .app-card { min-height:245px; padding:16px; border-radius:18px; }
  .apps-v2-grid .card-icon { width:54px; height:54px; border-radius:16px; }
  .apps-v2-grid .app-card .card-title { font-size:15px; margin-top:18px; }
  .apps-v2-grid .app-card p:not(.card-title) { font-size:12px; }
  .apps-v2-grid .card-arrow { top:17px; inset-inline-end:14px; }
  .apps-v2-grid .card-arrow svg { width:16px; height:16px; }
  .apps-v2-grid .card-category { font-size:9px; margin-top:16px; }
  .apps-v2-feedback,.privacy-v2-contact { padding:24px; border-radius:22px; margin-bottom:24px; gap:24px; }
  .apps-v2-feedback h2,.privacy-v2-contact h2 { font-size:32px; }
  .privacy-v2-general { padding:36px 0 44px; }
  .privacy-v2-general-copy { padding:24px; }
  .privacy-v2-general h2,.privacy-v2-section-head h2 { font-size:34px; }
  .privacy-v2-general p { font-size:15px; line-height:1.75; }
  .privacy-v2-apps { padding:46px 0 56px; }
  .privacy-v2-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; padding:18px; }
  .privacy-v2-grid .app-icon { border-radius:15px!important; outline-width:3px; }
  .privacy-v2-contact { align-items:flex-start; flex-direction:column; }
  .footer { font-size:12px; }
}
@media(max-width:360px) {
  .hero.hero-v3 h1 { font-size:64px!important; }
  .hero.hero-v3 .actions { flex-direction:column; align-items:flex-start; }
  .apps-v2-grid { grid-template-columns:1fr; }
  .apps-v2-grid .app-card { min-height:0; }
}