/* ===========================================
ATSILIEPSIU.LT โ 2026 REDESIGN
Editorial brutalism ยท electric-blue ยท voice-first
Inspired by SalesFrank structure + NetRanks polish,
kept on top of our original brutalist DNA.
=========================================== */
:root {
/* ---- Core palette ---- */
--c-ink: #0A0A0A;
--c-ink-soft: #1A1A1A;
--c-paper: #FAFAF7;
--c-paper-deep: #F2F1EC;
--c-line: #0A0A0A;
--c-brand: #2D5BFF;
--c-brand-deep: #0A1F66;
--c-brand-soft: #DCE5FF;
--c-brand-glow: #B7C9FF;
--c-good: #0F8A4D;
--c-good-soft: #D7F2E1;
--c-bad: #C2382B;
--c-bad-soft: #F8D9D5;
--c-warn: #C68A00;
--c-warn-soft: #FBEFCB;
--c-grey-50: #F5F5F2;
--c-grey-100: #ECECE8;
--c-grey-200: #D9D9D2;
--c-grey-400: #9A9A92;
--c-grey-600: #5C5C56;
--c-grey-800: #2A2A28;
/* Legacy aliases */
--color-black: var(--c-ink);
--color-white: var(--c-paper);
--color-red: var(--c-brand);
--color-red-dark: var(--c-brand-deep);
--color-gray-100: var(--c-grey-50);
--color-gray-200: var(--c-grey-100);
--color-gray-400: var(--c-grey-400);
--color-gray-600: var(--c-grey-600);
--color-gray-800: var(--c-grey-800);
--f-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--f-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
--font-display: var(--f-display);
--font-mono: var(--f-mono);
--font-system: var(--f-body);
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
--s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
--s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
--space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3);
--space-4: var(--s-4); --space-6: var(--s-6); --space-8: var(--s-8);
--space-12: var(--s-12); --space-16: var(--s-16);
--space-24: var(--s-20); --space-32: var(--s-24);
--container-max: 1240px;
--container-narrow: 920px;
--container-wide: 1400px;
--bw: 2px;
--bw-bold: 3px;
--border-width: var(--bw);
--r-sm: 4px;
--r-md: 10px;
--r-lg: 18px;
--r-xl: 28px;
--r-pill: 999px;
--t-fast: 140ms cubic-bezier(.2,.7,.2,1);
--t-base: 240ms cubic-bezier(.2,.7,.2,1);
--t-slow: 420ms cubic-bezier(.2,.7,.2,1);
--transition-fast: var(--t-fast);
--transition-base: var(--t-base);
--transition-slow: var(--t-slow);
--shadow-sm: 0 1px 0 var(--c-line);
--shadow-md: 0 6px 0 var(--c-line);
--shadow-lg: 0 14px 40px -16px rgba(10,10,10,.18), 0 2px 0 var(--c-line);
}
/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
font-family:var(--f-body);
font-size:1rem; line-height:1.6;
color:var(--c-ink); background:var(--c-paper);
overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6{
font-family:var(--f-display);
font-weight:800; line-height:1.02;
letter-spacing:-0.035em;
color:var(--c-ink);
}
h1{font-size:clamp(2.4rem, 6vw, 5.2rem); font-weight:900}
h2{font-size:clamp(1.9rem, 4vw, 3.2rem)}
h3{font-size:clamp(1.3rem, 2vw, 1.75rem)}
.eyebrow,
.mono{
font-family:var(--f-mono);
font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--c-grey-600);
font-weight:500;
}
/* ===== LAYOUT ===== */
.container{
max-width:var(--container-max);
margin:0 auto;
padding:0 var(--s-8);
}
.container-narrow{max-width:var(--container-narrow)}
.container-wide{max-width:var(--container-wide)}
@media (max-width:768px){.container{padding:0 var(--s-5)}}
@media (max-width:640px){.container{padding:0 var(--s-4)}}
section{padding:var(--s-20) 0; position:relative}
@media (max-width:768px){section{padding:var(--s-12) 0}}
/* ===== HEADER ===== */
.header{
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(250,250,247,.82);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:var(--bw) solid var(--c-line);
transition:background var(--t-base);
}
.header.scrolled{background:rgba(250,250,247,.96)}
.header.scrolled .logo-text,
.header.scrolled .nav-link:not(.nav-link-cta),
.header.scrolled .lang-option{color:var(--c-ink)}
.header.scrolled .logo-accent{color:var(--c-brand)}
/* nav-link-cta is a dark pill button on a light header โ its text must stay
* paper-white regardless of scrolled state. Hover flips to brand-blue bg. */
.nav-link-cta,
.header.scrolled .nav-link-cta{color:var(--c-paper) !important}
.nav-link-cta:hover,
.header.scrolled .nav-link-cta:hover{color:#fff !important}
.header-content{
display:flex; align-items:center; justify-content:space-between;
height:72px; gap:var(--s-6);
}
@media (max-width:640px){.header-content{height:64px}}
.logo{display:flex;align-items:baseline;gap:.06em;text-decoration:none;color:var(--c-ink)}
@media (max-width:640px){.logo-text{font-size:1rem}}
.logo-text{
font-family:var(--f-display); font-weight:800;
font-size:1.15rem; letter-spacing:-.02em;
}
.logo-accent{
font-family:var(--f-mono); font-weight:600;
font-size:.78rem; color:var(--c-brand);
letter-spacing:.04em;
}
.nav{display:flex;gap:var(--s-6);align-items:center}
.nav-link{
position:relative; color:var(--c-ink);
font-weight:500; font-size:.94rem;
padding:.4rem 0; transition:color var(--t-fast);
}
.nav-link::after{
content:""; position:absolute; left:0; right:0; bottom:-2px;
height:2px; background:var(--c-brand);
transform:scaleX(0); transform-origin:left;
transition:transform var(--t-base);
}
.nav-link:hover{color:var(--c-brand)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link-cta{
padding:.5rem .9rem; border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill); background:var(--c-ink); color:var(--c-paper);
font-weight:600; font-size:.9rem;
transition:all var(--t-base);
}
.nav-link-cta::after{display:none}
.nav-link-cta:hover{background:var(--c-brand); border-color:var(--c-brand); color:#fff}
.header-right{display:flex;align-items:center;gap:var(--s-4)}
@media (max-width:968px){.nav{display:none}}
.lang-toggle{
display:inline-flex; align-items:center; gap:.4rem;
padding:.35rem .6rem; border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill); font-family:var(--f-mono);
font-size:.78rem;
}
.lang-option{color:var(--c-grey-400);transition:color var(--t-fast)}
.lang-option.active{color:var(--c-ink)}
.lang-divider{color:var(--c-grey-200)}
.mobile-menu-toggle{display:none; flex-direction:column; gap:5px; padding:.5rem; cursor:pointer}
.mobile-menu-toggle span{display:block;width:22px;height:2px;background:var(--c-ink);transition:transform var(--t-base)}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:968px){.mobile-menu-toggle{display:flex}}
.mobile-menu{
position:fixed; top:72px; left:0; right:0; bottom:0; z-index:999;
background:var(--c-paper); padding:var(--s-8) var(--s-5);
transform:translateX(100%); transition:transform var(--t-slow);
overflow-y:auto;
}
.mobile-menu.active{transform:translateX(0)}
.mobile-nav{display:flex; flex-direction:column; gap:var(--s-1)}
.mobile-nav-link{
display:block; padding:var(--s-4) 0;
font-family:var(--f-display); font-size:1.6rem; font-weight:700;
border-bottom:var(--bw) solid var(--c-line);
}
.mobile-nav-link:hover{color:var(--c-brand)}
.mobile-nav-link-cta{
margin-top:var(--s-4); background:var(--c-brand); color:#fff;
padding:var(--s-4) var(--s-5); border-radius:var(--r-md);
text-align:center;
}
.hide-mobile{display:initial}
@media (max-width:640px){.hide-mobile{display:none}}
/* ===== BUTTONS ===== */
.btn{
display:inline-flex; align-items:center; gap:.6rem;
padding:.85rem 1.4rem; border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill); background:var(--c-paper); color:var(--c-ink);
font-weight:600; font-size:.95rem;
transition:transform var(--t-fast), box-shadow var(--t-base),
background var(--t-base), color var(--t-base), border-color var(--t-base);
text-decoration:none; cursor:pointer; white-space:nowrap;
box-shadow:0 0 0 var(--c-line);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 4px 0 var(--c-line)}
.btn:active{transform:translateY(0); box-shadow:0 0 0 var(--c-line)}
.btn-primary{background:var(--c-ink); color:var(--c-paper)}
.btn-primary:hover{background:var(--c-brand); border-color:var(--c-brand); color:#fff}
.btn-secondary{background:var(--c-paper); color:var(--c-ink)}
.btn-secondary:hover{background:var(--c-brand-soft); border-color:var(--c-ink); color:var(--c-ink)}
.btn-ghost{border-color:transparent; background:transparent}
.btn-ghost:hover{background:var(--c-grey-50); border-color:var(--c-line)}
.btn-large{padding:1.05rem 1.7rem; font-size:1.02rem}
.btn svg{transition:transform var(--t-base)}
.btn:hover svg{transform:translateX(3px)}
/* ===== HERO ===== */
.hero{
padding:calc(72px + var(--s-20)) 0 var(--s-20);
position:relative; overflow:hidden;
}
@media (max-width:640px){
.hero{padding:calc(64px + var(--s-6)) 0 var(--s-12)}
}
.hero-bg{
position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(800px 500px at 85% 10%, var(--c-brand-soft), transparent 60%),
radial-gradient(700px 400px at 0% 80%, var(--c-brand-glow), transparent 65%);
opacity:.55;
}
.hero::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:
linear-gradient(var(--c-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--c-ink) 1px, transparent 1px);
background-size:64px 64px;
opacity:.025;
}
.hero .container{position:relative; z-index:1}
.hero-content{
display:grid; grid-template-columns:1fr; gap:var(--s-8);
justify-items:center;
}
.hero-content > *:first-child{
width:100%; max-width:640px;
}
@media (min-width:1080px){
.hero-content{
grid-template-columns:minmax(0,1fr) 420px;
gap:var(--s-12); align-items:center; justify-items:stretch;
}
.hero-content > *:first-child{max-width:none}
}
.hero-label{
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--f-mono); font-size:.76rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--c-grey-600);
padding:.4rem .75rem; border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill); width:fit-content;
background:var(--c-paper);
}
.hero-label::before{
content:""; width:8px; height:8px; border-radius:50%;
background:var(--c-brand);
box-shadow:0 0 0 0 rgba(45,91,255,.55);
animation:pulse-brand 1.8s ease-out infinite;
}
@keyframes pulse-brand{
0% {box-shadow:0 0 0 0 rgba(45,91,255,.55)}
70% {box-shadow:0 0 0 12px rgba(45,91,255,0)}
100% {box-shadow:0 0 0 0 rgba(45,91,255,0)}
}
.hero-title{
margin:var(--s-6) 0 var(--s-5);
font-family:var(--f-display); font-weight:900;
font-size:clamp(2.5rem, 6.4vw, 5.4rem);
line-height:.98; letter-spacing:-.04em; color:var(--c-ink);
}
.hero-title-main,
.hero-title-highlight,
.hero-title-sub{display:block}
.hero-title-highlight{color:var(--c-ink)}
.hero-title-highlight .rot{
color:var(--c-brand);
position:relative; padding:0 .04em;
}
.hero-title-highlight .rot::after{
content:""; position:absolute; left:0; right:0; bottom:.05em;
height:.12em; background:var(--c-brand-glow);
z-index:-1; border-radius:2px;
}
.hero-title-highlight .rot-shell{
position:relative;
display:inline-block;
vertical-align:baseline;
white-space:nowrap;
}
.hero-title-highlight .rot-ghost{
visibility:hidden;
white-space:nowrap;
pointer-events:none;
}
.hero-title-highlight .rot-typewriter{
position:absolute;
left:0; top:0;
white-space:nowrap;
}
.rot-caret{
display:inline-block;
width:.06em; height:.85em;
margin-left:.04em;
background:var(--c-brand);
vertical-align:-.08em;
animation:rot-caret-blink 1s steps(2, start) infinite;
}
@keyframes rot-caret-blink{
to { background:transparent }
}
@media (prefers-reduced-motion: reduce){
.rot-caret{animation:none}
}
.hero-title-sub{
color:var(--c-grey-600); font-weight:700;
font-size:.5em; letter-spacing:-.02em; margin-top:.25em;
}
.page-meta-date{
font-family:var(--f-mono); font-size:.74rem;
color:var(--c-grey-400); letter-spacing:.08em; text-transform:uppercase;
margin-bottom:var(--s-3);
}
.author-card{
display:flex; gap:var(--s-3); align-items:flex-start;
padding:var(--s-3) var(--s-4);
background:var(--c-paper); border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md); margin-bottom:var(--s-5);
max-width:560px;
}
.author-avatar{
flex:0 0 auto; width:38px; height:38px; border-radius:50%;
background:var(--c-ink); color:var(--c-paper);
display:flex; align-items:center; justify-content:center;
font-family:var(--f-mono); font-weight:600; font-size:.85rem;
}
.author-bio{font-size:.86rem; line-height:1.45}
.author-name{margin-bottom:.15rem}
.author-name strong{font-weight:700}
.author-credential{color:var(--c-grey-600); font-size:.82rem}
.author-credential a{color:var(--c-brand); border-bottom:1px solid currentColor}
.hero-description{
font-size:clamp(1.05rem, 1.4vw, 1.22rem);
line-height:1.55; color:var(--c-grey-800);
margin-bottom:var(--s-8); max-width:60ch;
}
.hero-stats{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:0; margin:var(--s-8) 0;
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md); overflow:hidden;
background:var(--c-paper);
}
@media (max-width:640px){.hero-stats{grid-template-columns:repeat(2, 1fr)}}
.stat{
padding:var(--s-5) var(--s-4);
border-right:var(--bw) solid var(--c-ink);
background:var(--c-paper);
transition:background var(--t-base);
}
.stat:last-child{border-right:0}
@media (max-width:640px){
.stat{border-right:0}
.stat:nth-child(odd){border-right:var(--bw) solid var(--c-ink)}
.stat:nth-child(-n+2){border-bottom:var(--bw) solid var(--c-ink)}
}
.stat:hover{background:var(--c-brand-soft)}
.stat-value{
font-family:var(--f-display); font-weight:800;
font-size:clamp(1.6rem, 2.4vw, 2.2rem); line-height:1;
color:var(--c-ink); letter-spacing:-.02em;
margin-bottom:.25rem;
}
.stat-label{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-600);
}
.hero-cta{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4)}
.hero-demo-hint{
font-size:.86rem; color:var(--c-grey-600);
display:flex; align-items:center; gap:.4rem;
}
.hero-demo-hint::before{content:"๐"; font-size:.9rem}
.hero-demo-phone{
font-family:var(--f-mono);
color:var(--c-ink);
font-weight:700;
border-bottom:1.5px solid var(--c-brand);
padding:0 .1em;
transition:color var(--t-base);
}
.hero-demo-phone:hover{color:var(--c-brand)}
.btn-hero-xl{
padding:1.5rem 3.4rem;
font-size:1.32rem;
font-weight:800;
letter-spacing:-.01em;
border-radius:var(--r-md);
min-width:300px;
justify-content:center;
gap:.7rem;
box-shadow:0 6px 0 var(--c-line), 0 14px 30px -10px rgba(45,91,255,.45);
}
.btn-hero-xl:hover{
transform:translateY(-3px);
box-shadow:0 10px 0 var(--c-line), 0 22px 40px -10px rgba(45,91,255,.55);
}
.btn-hero-xl svg{width:24px; height:24px}
@media (max-width:640px){
.btn-hero-xl{padding:1.25rem 2rem; font-size:1.15rem; min-width:0; width:100%}
}
/* Hero right column: live demo card */
.hero-aside{
position:relative;
width:100%; max-width:440px; margin:0 auto;
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-lg);
background:var(--c-ink); color:var(--c-paper);
padding:var(--s-6);
overflow:hidden;
min-height:340px;
display:flex; flex-direction:column; gap:var(--s-4);
box-shadow:0 14px 0 var(--c-line);
}
@media (min-width:1080px){
.hero-aside{max-width:none; margin:0}
}
@media (max-width:640px){
.hero-aside{min-height:300px; padding:var(--s-5)}
}
.hero-aside::before{
content:""; position:absolute; inset:0;
background:radial-gradient(600px 300px at 50% 100%, rgba(45,91,255,.35), transparent 70%);
pointer-events:none;
}
.hero-aside-header{
display:flex; justify-content:space-between; align-items:center;
font-family:var(--f-mono); font-size:.75rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-400); position:relative; z-index:1;
}
.hero-aside-header .live-dot{
display:inline-flex; align-items:center; gap:.4rem; color:var(--c-paper);
}
.hero-aside-header .live-dot::before{
content:""; width:8px; height:8px; border-radius:50%;
background:rgba(255,255,255,.35);
}
.hero-aside-header .live-dot.is-live::before{
background:#FF4757;
box-shadow:0 0 0 0 rgba(255,71,87,.6);
animation:pulse-red 1.8s ease-out infinite;
}
@keyframes pulse-red{
0% {box-shadow:0 0 0 0 rgba(255,71,87,.6)}
70% {box-shadow:0 0 0 12px rgba(255,71,87,0)}
100% {box-shadow:0 0 0 0 rgba(255,71,87,0)}
}
.waveform{
flex:1; display:flex; align-items:center; justify-content:center;
gap:3px; position:relative; z-index:1; padding:var(--s-6) 0;
}
.waveform .bar{
width:4px; background:var(--c-brand-glow); border-radius:2px;
animation:wave 1.2s ease-in-out infinite;
}
.waveform .bar:nth-child(3n){animation-delay:.1s}
.waveform .bar:nth-child(3n+1){animation-delay:.25s}
.waveform .bar:nth-child(3n+2){animation-delay:.45s}
@keyframes wave{
0%,100%{height:8px}
50%{height:46px; background:var(--c-brand)}
}
.hero-aside-transcript{
position:relative; z-index:1;
font-family:var(--f-mono); font-size:.82rem; line-height:1.55;
color:var(--c-grey-200);
}
.hero-aside-transcript .line{margin-bottom:.45rem}
.hero-aside-transcript .who{color:var(--c-brand-glow); font-weight:600; margin-right:.4rem}
.hero-aside-transcript .who.ag{color:#fff}
.hero-aside-footer{
position:relative; z-index:1;
display:flex; justify-content:space-between; align-items:center;
padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.12);
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--c-grey-400);
}
/* ===== SECTION HEADERS ===== */
.section-header{margin-bottom:var(--s-12); max-width:780px}
.section-title{
display:flex; align-items:baseline; gap:var(--s-3);
flex-wrap:wrap; margin-bottom:var(--s-4);
font-family:var(--f-display); font-weight:800;
letter-spacing:-.02em; line-height:1.05;
}
.section-number{
font-family:var(--f-mono); font-size:.85rem;
font-weight:600; color:var(--c-brand);
letter-spacing:.05em;
padding:.3rem .6rem; border:var(--bw) solid var(--c-brand);
border-radius:var(--r-pill);
}
.section-description{
font-size:clamp(1rem, 1.4vw, 1.18rem);
color:var(--c-grey-600); line-height:1.55;
max-width:62ch;
}
/* ===== PROBLEM / SOLUTION ===== */
.problem-solution{
background:var(--c-paper-deep);
border-top:var(--bw) solid var(--c-ink);
border-bottom:var(--bw) solid var(--c-ink);
}
.problem-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:var(--s-5);
}
.problem-card{
padding:var(--s-6) var(--s-5);
background:var(--c-paper);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
transition:transform var(--t-base), box-shadow var(--t-base);
position:relative; overflow:hidden;
}
.problem-card:hover{
transform:translate(-2px, -4px);
box-shadow:6px 8px 0 var(--c-line);
}
.problem-number{
font-family:var(--f-mono); font-size:.85rem; font-weight:600;
color:var(--c-brand); letter-spacing:.08em;
margin-bottom:var(--s-3);
display:inline-block;
padding:.25rem .55rem; border:1.5px solid var(--c-brand);
border-radius:var(--r-pill);
}
.problem-title{
font-size:1.3rem; font-weight:700;
margin-bottom:var(--s-3); color:var(--c-ink);
line-height:1.2;
}
.problem-text{color:var(--c-grey-800); font-size:.96rem; line-height:1.6}
.problem-text mark{
background:var(--c-brand-glow); color:var(--c-ink);
padding:0 .2em; border-radius:3px; font-weight:600;
}
/* ===== COMPARISON ===== */
.comparison-section{background:var(--c-paper)}
.comparison-table-wrapper{
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md); overflow:hidden;
overflow-x:auto;
}
.comparison-table{
width:100%; border-collapse:collapse;
background:var(--c-paper);
font-size:.95rem;
}
.comparison-table th,
.comparison-table td{
padding:var(--s-4) var(--s-4);
text-align:center;
border-bottom:1px solid var(--c-grey-100);
vertical-align:middle;
}
.comparison-table thead th{
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.1em; text-transform:uppercase;
background:var(--c-ink); color:var(--c-paper);
border-bottom:var(--bw) solid var(--c-ink);
font-weight:600;
}
.comparison-table thead th:first-child{text-align:left}
.comparison-table tbody td:first-child{
text-align:left; font-weight:500;
color:var(--c-ink); background:var(--c-paper-deep);
}
.comparison-table thead .comparison-highlight{
background:var(--c-brand); color:#fff;
}
.comparison-table tbody .comparison-highlight{background:var(--c-brand-soft)}
.comparison-table tbody tr:hover td{background:var(--c-grey-50)}
.comparison-table tbody tr:hover td.comparison-highlight{background:#C5D3FF}
.comparison-table tbody tr:hover td:first-child{background:var(--c-grey-100)}
.check{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
background:var(--c-good-soft); color:var(--c-good);
font-weight:700; font-size:.95rem;
}
.cross{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
background:var(--c-bad-soft); color:var(--c-bad);
font-weight:700; font-size:.95rem;
}
.partial{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
background:var(--c-warn-soft); color:var(--c-warn);
font-weight:700; font-family:var(--f-mono);
}
.comparison-legend{
display:flex; gap:var(--s-5); justify-content:center;
flex-wrap:wrap; margin-top:var(--s-6);
font-size:.85rem; color:var(--c-grey-600);
}
.comparison-legend span{display:inline-flex; align-items:center; gap:.5rem}
.comparison-cta{display:flex; justify-content:center; margin-top:var(--s-8)}
/* ===== TRUST ===== */
.trust-section{
background:var(--c-ink); color:var(--c-paper);
padding:var(--s-12) 0;
border-top:var(--bw) solid var(--c-ink);
border-bottom:var(--bw) solid var(--c-ink);
}
.trust-badges{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:var(--s-4); align-items:stretch;
}
.trust-badge{
display:flex; align-items:center; gap:var(--s-4);
padding:var(--s-5);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-md);
background:rgba(255,255,255,.02);
transition:background var(--t-base), border-color var(--t-base);
}
.trust-badge:hover{background:rgba(45,91,255,.12); border-color:var(--c-brand)}
.trust-icon{
flex:0 0 auto; width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
color:var(--c-brand-glow);
}
.trust-text{display:flex; flex-direction:column; gap:.15rem}
.trust-text strong{
font-family:var(--f-display); font-weight:700;
color:var(--c-paper); font-size:1.05rem;
}
.trust-text span{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-400);
}
/* ===== VOICE SAMPLES (Kaip skamba Agnฤ) ===== */
.voice-samples{background:var(--c-paper)}
.voice-samples-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:var(--s-5);
}
.voice-sample{
border:var(--bw) solid var(--c-ink); border-radius:var(--r-md);
padding:var(--s-5); background:var(--c-paper);
transition:transform var(--t-base), box-shadow var(--t-base);
}
.voice-sample:hover{transform:translateY(-3px); box-shadow:0 8px 0 var(--c-line)}
.voice-sample-tag{
display:inline-block; font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
padding:.2rem .55rem; border-radius:var(--r-pill);
background:var(--c-brand-soft); color:var(--c-brand-deep);
margin-bottom:var(--s-3);
}
.voice-sample-title{font-size:1.1rem; font-weight:700; margin-bottom:var(--s-3); line-height:1.25}
.voice-sample-player{
display:flex; align-items:center; gap:var(--s-3);
padding:var(--s-3) var(--s-4);
background:var(--c-ink); color:var(--c-paper);
border-radius:var(--r-pill);
font-family:var(--f-mono); font-size:.82rem;
}
.voice-sample-player button{
width:32px; height:32px; border-radius:50%;
background:var(--c-brand); display:flex; align-items:center; justify-content:center;
color:#fff;
}
.voice-sample-bars{
flex:1; display:flex; gap:2px; align-items:center; height:24px;
}
.voice-sample-bars span{flex:1; background:var(--c-brand-glow); border-radius:1px; height:50%}
.voice-sample-bars span:nth-child(odd){opacity:.5; height:80%}
.voice-sample-bars span:nth-child(3n){height:30%}
/* ===== SOLUTIONS GRID ===== */
.solutions{
background:var(--c-paper-deep);
border-top:var(--bw) solid var(--c-ink);
}
.solutions-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:var(--s-5);
}
.solution-card{
display:flex; flex-direction:column; gap:var(--s-3);
padding:var(--s-6);
background:var(--c-paper);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
text-decoration:none; color:inherit;
position:relative; overflow:hidden;
}
.solution-card:hover{
transform:translate(-2px, -4px);
box-shadow:6px 8px 0 var(--c-line);
border-color:var(--c-brand);
}
.solution-card:hover .solution-cta-arrow{transform:translateX(4px)}
.solution-header{
display:flex; justify-content:space-between; align-items:flex-start;
gap:var(--s-3);
}
.solution-category{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.1em; text-transform:uppercase;
color:var(--c-brand);
}
.solution-meta{
font-family:var(--f-mono); font-size:.72rem;
color:var(--c-grey-400);
}
.solution-name{
font-family:var(--f-display); font-weight:700;
font-size:1.45rem; line-height:1.15;
margin:var(--s-2) 0;
}
.solution-features{
display:flex; flex-wrap:wrap; gap:.4rem;
margin-top:var(--s-3);
}
.solution-features span{
font-family:var(--f-mono); font-size:.72rem;
padding:.2rem .55rem; border:1px solid var(--c-grey-200);
border-radius:var(--r-pill); color:var(--c-grey-800);
background:var(--c-paper);
}
.solution-cta-arrow{
display:inline-flex; align-items:center; gap:.4rem;
margin-top:auto; padding-top:var(--s-3);
font-weight:600; color:var(--c-brand);
transition:transform var(--t-base);
}
/* ===== INDUSTRY FILTER CHIPS ===== */
.industry-filter{
display:flex; flex-wrap:wrap; gap:.5rem;
margin-bottom:var(--s-8);
}
.industry-filter button{
padding:.45rem .9rem;
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill);
background:var(--c-paper); color:var(--c-ink);
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.05em; text-transform:uppercase;
transition:all var(--t-fast);
}
.industry-filter button:hover{background:var(--c-grey-50)}
.industry-filter button.active{background:var(--c-ink); color:var(--c-paper)}
/* ===== TECHNOLOGY ===== */
.technology{background:var(--c-paper)}
.tech-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:var(--s-5);
}
.tech-card{
padding:var(--s-6); border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md); background:var(--c-paper);
transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.tech-card:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--c-line); border-color:var(--c-brand)}
.tech-number{
font-family:var(--f-mono); font-size:.85rem; font-weight:600;
color:var(--c-brand); letter-spacing:.08em;
margin-bottom:var(--s-3);
}
.tech-title{
font-size:1.2rem; font-weight:700; margin-bottom:var(--s-3);
line-height:1.2;
}
.tech-description{color:var(--c-grey-600); font-size:.95rem; line-height:1.6}
/* ===== INDUSTRIES ===== */
.industries{
background:var(--c-ink); color:var(--c-paper);
border-top:var(--bw) solid var(--c-ink);
position:relative; overflow:hidden;
}
.industries::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(800px 500px at 100% 0%, rgba(45,91,255,.25), transparent 60%);
}
.industries .container{position:relative}
.industries-content{display:grid; grid-template-columns:1fr; gap:var(--s-8)}
@media (min-width:880px){.industries-content{grid-template-columns:1fr 1.4fr; gap:var(--s-12); align-items:start}}
.industries-title{
font-size:clamp(2rem, 3.6vw, 2.8rem); line-height:1.05;
color:var(--c-paper); letter-spacing:-.02em;
}
.industries-description{
color:var(--c-grey-200); font-size:1.05rem; line-height:1.6;
margin-top:var(--s-4);
}
.industries-list{
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
gap:1px; background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-md); overflow:hidden;
}
.industries-list a{
padding:var(--s-4) var(--s-4);
background:var(--c-ink); color:var(--c-paper);
font-weight:500; font-size:.95rem;
transition:background var(--t-fast), color var(--t-fast);
display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
}
.industries-list a::after{
content:"โ"; color:var(--c-brand-glow);
transform:translateX(0); transition:transform var(--t-base);
}
.industries-list a:hover{background:var(--c-brand); color:#fff}
.industries-list a:hover::after{transform:translateX(3px); color:#fff}
/* ===== PRICING ===== */
.pricing{
background:var(--c-paper-deep);
border-top:var(--bw) solid var(--c-ink);
}
.pricing-toggle-wrap{display:flex; justify-content:center}
.pricing-toggle{
display:inline-flex; align-items:center;
margin:0 auto var(--s-8); gap:0;
padding:.3rem; border:var(--bw) solid var(--c-ink);
border-radius:var(--r-pill); background:var(--c-paper);
}
.pricing-toggle button{
padding:.5rem 1.1rem; border-radius:var(--r-pill);
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--c-grey-600); transition:all var(--t-fast);
}
.pricing-toggle button.active{background:var(--c-ink); color:var(--c-paper)}
.pricing-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:var(--s-5);
}
.pricing-card{
display:flex; flex-direction:column;
padding:var(--s-6); background:var(--c-paper);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
transition:transform var(--t-base), box-shadow var(--t-base);
position:relative;
}
.pricing-card:hover{transform:translateY(-4px); box-shadow:0 10px 0 var(--c-line)}
.pricing-card.popular{
background:var(--c-ink); color:var(--c-paper);
border-color:var(--c-ink);
}
.pricing-card.popular .pricing-name,
.pricing-card.popular .pricing-price,
.pricing-card.popular .pricing-feature{color:var(--c-paper)}
.pricing-card.popular .pricing-period,
.pricing-card.popular .pricing-tag{color:var(--c-grey-200)}
.pricing-badge{
position:absolute; top:-12px; left:50%; transform:translateX(-50%);
padding:.2rem .7rem; border-radius:var(--r-pill);
background:var(--c-brand); color:#fff;
font-family:var(--f-mono); font-size:.7rem;
letter-spacing:.1em; text-transform:uppercase; font-weight:600;
white-space:nowrap;
}
.pricing-tag{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-600); margin-bottom:var(--s-2);
}
.pricing-name{
font-family:var(--f-display); font-weight:700;
font-size:1.5rem; margin-bottom:var(--s-3);
}
.pricing-price{
font-family:var(--f-display); font-weight:800;
font-size:2.6rem; line-height:1; color:var(--c-ink);
letter-spacing:-.03em;
}
.pricing-period{
font-family:var(--f-mono); font-size:.78rem; color:var(--c-grey-600);
margin-bottom:var(--s-5);
}
.pricing-features{
list-style:none; display:flex; flex-direction:column; gap:var(--s-2);
margin:var(--s-4) 0 var(--s-6);
}
.pricing-feature{
display:flex; align-items:flex-start; gap:.5rem;
font-size:.92rem; line-height:1.45;
}
.pricing-feature::before{
content:""; flex:0 0 auto; width:18px; height:18px; margin-top:3px;
border-radius:50%; background:var(--c-brand-soft);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
}
.pricing-card.popular .pricing-feature::before{
background-color:rgba(255,255,255,.1);
background-image:url("data:image/svg+xml;utf8,");
}
.pricing-cta{margin-top:auto}
.pricing-card.popular .pricing-cta{
background:var(--c-brand);
color:#fff;
border:2px solid #fff;
box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 0 0 var(--c-brand-glow);
font-weight:700;
transition:transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.pricing-card.popular .pricing-cta:hover{
background:#fff;
color:var(--c-brand-deep);
border-color:#fff;
transform:translateY(-2px);
box-shadow:0 8px 24px -4px rgba(45,91,255,.6), 0 0 0 0 var(--c-brand-glow);
}
.pricing-card.popular .pricing-cta:active{
transform:translateY(0);
}
.pricing-note{
text-align:center; margin-top:var(--s-6);
font-size:.84rem; color:var(--c-grey-600);
}
/* ===== SINGLE-PLAN PRICING (one main plan + minute packs) ===== */
.pricing-single{
display:flex; justify-content:center; margin-bottom:var(--s-12);
}
.pricing-card-single{
max-width:560px; width:100%;
padding:var(--s-10) var(--s-8);
text-align:left;
display:flex; flex-direction:column; gap:var(--s-3);
}
.pricing-card-single .pricing-badge{
top:-14px;
}
.pricing-card-single .pricing-name{
font-size:1.8rem; margin-bottom:var(--s-1);
}
.pricing-card-single .pricing-price{
font-size:clamp(3rem, 6vw, 4rem);
display:flex; align-items:baseline; gap:.4rem;
}
.pricing-card-single .pricing-price-mo{
font-family:var(--f-body); font-weight:600;
font-size:1.05rem; color:var(--c-grey-200);
letter-spacing:0; margin-left:.1em;
}
.pricing-card-single .pricing-period{
color:var(--c-grey-200); margin-bottom:var(--s-5);
font-family:var(--f-mono); letter-spacing:.04em;
}
.pricing-card-single .pricing-features{
margin:var(--s-2) 0 var(--s-6);
}
.pricing-card-single .pricing-cta{
width:100%; justify-content:center;
}
.pricing-fine-print{
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.04em; color:var(--c-grey-400);
text-align:center; margin-top:var(--s-4);
line-height:1.5;
}
/* The single plan card is dark (.popular) โ features need white tick bg too */
.pricing-card-single .pricing-feature::before{
background-color:rgba(255,255,255,.12);
}
/* ===== MINUTE PACKS (add-ons) ===== */
.minute-packs{
margin-bottom:var(--s-10);
padding:var(--s-8);
background:var(--c-paper);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
}
.minute-packs-header{margin-bottom:var(--s-6); max-width:60ch}
.minute-packs-title{
font-family:var(--f-display); font-weight:800;
font-size:clamp(1.3rem, 2.2vw, 1.7rem);
margin-bottom:var(--s-2); letter-spacing:-.02em;
}
.minute-packs-sub{
color:var(--c-grey-600); font-size:.96rem; line-height:1.55;
}
.minute-packs-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:var(--s-4);
}
.minute-pack{
position:relative;
padding:var(--s-5);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
background:var(--c-paper-deep);
display:flex; flex-direction:column; gap:.3rem;
transition:transform var(--t-base), box-shadow var(--t-base);
}
.minute-pack:hover{
transform:translateY(-3px);
box-shadow:0 6px 0 var(--c-line);
}
.minute-pack.featured{
background:var(--c-brand-soft);
border-color:var(--c-brand);
}
.minute-pack-amount{
font-family:var(--f-display); font-weight:800;
font-size:1.6rem; letter-spacing:-.02em;
color:var(--c-ink);
}
.minute-pack-price{
font-family:var(--f-display); font-weight:700;
font-size:1.2rem; color:var(--c-brand);
}
.minute-pack-rate{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600); letter-spacing:.04em;
}
.minute-pack-badge{
position:absolute; top:-10px; right:var(--s-4);
padding:.2rem .55rem; border-radius:var(--r-pill);
background:var(--c-ink); color:var(--c-paper);
font-family:var(--f-mono); font-size:.68rem;
letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.minute-packs-note{
margin-top:var(--s-5);
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600); letter-spacing:.04em;
}
/* "Need more?" overflow band โ below the 3 tiers, links to ainora.lt */
.pricing-overflow{
margin-top:var(--s-8);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
background:var(--c-ink); color:var(--c-paper);
overflow:hidden; position:relative;
}
.pricing-overflow::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(500px 250px at 100% 50%, rgba(45,91,255,.3), transparent 65%);
}
.pricing-overflow-inner{
position:relative; z-index:1;
display:flex; align-items:center; justify-content:space-between;
gap:var(--s-6); padding:var(--s-6) var(--s-8); flex-wrap:wrap;
}
.pricing-overflow-eyebrow{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.12em; text-transform:uppercase;
color:var(--c-brand-glow); margin-bottom:.4rem;
}
.pricing-overflow-title{
font-family:var(--f-display); font-weight:700;
font-size:clamp(1.1rem, 2vw, 1.4rem); line-height:1.25;
color:var(--c-paper); margin-bottom:.4rem; max-width:50ch;
}
.pricing-overflow-desc{
color:var(--c-grey-200); font-size:.95rem; line-height:1.55;
max-width:60ch;
}
.pricing-overflow .btn-secondary{
background:transparent; color:var(--c-paper);
border-color:rgba(255,255,255,.6);
}
.pricing-overflow .btn-secondary:hover{
background:var(--c-paper); color:var(--c-ink); border-color:var(--c-paper);
}
/* ===== FAQ ===== */
.faq-section{background:var(--c-paper)}
.faq-grid{
max-width:var(--container-narrow); margin:0 auto;
display:flex; flex-direction:column; gap:0;
border-top:var(--bw) solid var(--c-ink);
}
.faq-item{
border-bottom:var(--bw) solid var(--c-ink);
transition:background var(--t-fast);
}
.faq-item:hover{background:var(--c-grey-50)}
.faq-item summary,
.faq-question{
padding:var(--s-5) var(--s-4);
font-family:var(--f-display); font-weight:700;
font-size:clamp(1.05rem, 1.4vw, 1.25rem);
line-height:1.3;
cursor:pointer; list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-question::after,
.faq-item summary::after{
content:"+"; font-family:var(--f-mono); font-weight:400;
font-size:1.6rem; color:var(--c-brand);
transition:transform var(--t-base);
flex:0 0 auto;
}
.faq-item[open] summary::after,
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{
padding:0 var(--s-4) var(--s-5);
color:var(--c-grey-800); line-height:1.65;
font-size:.98rem; max-width:65ch;
}
/* ===== CROSS-SELL PRODUCTS ===== */
.products-tier{background:var(--c-paper-deep); border-top:var(--bw) solid var(--c-ink)}
.products-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
gap:var(--s-5);
}
.product-tier-card{
padding:var(--s-6); background:var(--c-paper);
border:var(--bw) solid var(--c-ink); border-radius:var(--r-md);
transition:transform var(--t-base), box-shadow var(--t-base);
}
.product-tier-card:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--c-line)}
.product-tier-num{
font-family:var(--f-mono); color:var(--c-brand);
font-size:.85rem; font-weight:600; letter-spacing:.08em;
margin-bottom:var(--s-2);
}
.product-tier-name{font-size:1.35rem; font-weight:700; margin-bottom:var(--s-3); line-height:1.2}
.product-tier-desc{color:var(--c-grey-600); font-size:.95rem; line-height:1.55}
/* ===== CTA SECTION ===== */
.cta-section{
background:var(--c-ink); color:var(--c-paper);
text-align:center;
border-top:var(--bw) solid var(--c-ink);
position:relative; overflow:hidden;
}
.cta-section::before{
content:""; position:absolute; inset:0;
background:radial-gradient(700px 400px at 50% 100%, rgba(45,91,255,.3), transparent 60%);
pointer-events:none;
}
.cta-content{position:relative; z-index:1}
.cta-title{
font-size:clamp(2rem, 4.5vw, 3.6rem);
color:var(--c-paper); margin-bottom:var(--s-5);
max-width:18ch; margin-inline:auto;
letter-spacing:-.02em;
}
.cta-description{
font-size:1.1rem; color:var(--c-grey-200);
max-width:55ch; margin:0 auto var(--s-8);
line-height:1.55;
}
.cta-actions{display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap}
/* On dark CTA bands the primary button is WHITE so it pops out
* against the brand-blue glow background. Secondary stays outline-white. */
.cta-section .btn,
.industries .btn,
.trust-section .btn{
border-width:var(--bw); border-style:solid;
}
.cta-section .btn-primary,
.industries .btn-primary{
background:var(--c-paper);
border-color:var(--c-paper);
color:var(--c-ink);
}
.cta-section .btn-primary:hover,
.industries .btn-primary:hover{
background:var(--c-brand);
border-color:var(--c-brand);
color:#fff;
}
.cta-section .btn-secondary,
.industries .btn-secondary{
background:transparent;
border-color:rgba(255,255,255,.6);
color:var(--c-paper);
}
.cta-section .btn-secondary:hover,
.industries .btn-secondary:hover{
background:var(--c-paper);
color:var(--c-ink);
border-color:var(--c-paper);
}
/* ===== FOOTER ===== */
.footer{
background:var(--c-paper);
border-top:var(--bw) solid var(--c-ink);
padding:var(--s-16) 0 var(--s-6);
}
.footer-content{
display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:var(--s-8);
margin-bottom:var(--s-10);
}
@media (max-width:880px){.footer-content{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-content{grid-template-columns:1fr}}
.footer-brand{display:flex; flex-direction:column; gap:var(--s-3)}
.footer-logo{display:flex; align-items:baseline; gap:.1em}
.footer-logo .logo-text{font-size:1.4rem}
.footer-tagline{color:var(--c-grey-600); font-size:.95rem; max-width:32ch}
.footer-keywords{
display:flex; flex-wrap:wrap; gap:.4rem;
margin-top:var(--s-3);
}
.footer-keywords span{
font-family:var(--f-mono); font-size:.7rem;
padding:.2rem .5rem; border-radius:var(--r-pill);
background:var(--c-grey-50); color:var(--c-grey-600);
letter-spacing:.04em;
}
.footer-heading{
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.12em; text-transform:uppercase;
color:var(--c-grey-600); font-weight:600;
margin-bottom:var(--s-4);
}
.footer-column{display:flex; flex-direction:column; gap:0}
.footer-links{display:flex; flex-direction:column; gap:var(--s-2); list-style:none}
.footer-links a{
color:var(--c-ink); font-size:.92rem;
transition:color var(--t-fast); display:inline-block;
}
.footer-links a:hover{color:var(--c-brand)}
.footer-address{color:var(--c-grey-600); font-size:.92rem; line-height:1.6; font-style:normal}
.footer-address a{color:var(--c-ink); border-bottom:1px solid var(--c-grey-200)}
.footer-address a:hover{color:var(--c-brand); border-color:var(--c-brand)}
.footer-rekvizitai{
margin:var(--s-8) 0 var(--s-6);
padding:var(--s-5) var(--s-6);
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
background:var(--c-paper-deep, var(--c-grey-50));
}
.footer-rekvizitai .footer-heading{
margin-bottom:var(--s-4);
}
.footer-rekvizitai dl{
display:grid;
grid-template-columns:auto 1fr;
column-gap:var(--s-5); row-gap:.4rem;
font-size:.88rem; line-height:1.5;
margin:0;
}
.footer-rekvizitai dl > div{display:contents}
.footer-rekvizitai dt{
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.04em; text-transform:uppercase;
color:var(--c-grey-600); white-space:nowrap;
}
.footer-rekvizitai dd{
margin:0; color:var(--c-ink); font-weight:500;
}
.footer-rekvizitai dd a{
color:var(--c-ink); border-bottom:1px solid var(--c-grey-200);
}
.footer-rekvizitai dd a:hover{color:var(--c-brand); border-color:var(--c-brand)}
@media (max-width:600px){
.footer-rekvizitai dl{
grid-template-columns:1fr;
row-gap:.2rem;
}
.footer-rekvizitai dl > div{
display:block; padding-bottom:.4rem;
}
.footer-rekvizitai dt{margin-bottom:.1rem}
}
.footer-bottom{
padding-top:var(--s-6);
border-top:1px solid var(--c-grey-100);
display:flex; justify-content:space-between; align-items:center;
gap:var(--s-4); flex-wrap:wrap;
font-size:.85rem; color:var(--c-grey-600);
}
.footer-meta{display:flex; gap:var(--s-4); flex-wrap:wrap}
/* "Paklauskite DI" footer block */
.footer-ai-ask{
grid-column:1/-1;
padding:var(--s-5); margin-top:var(--s-2);
border:var(--bw) solid var(--c-ink); border-radius:var(--r-md);
background:var(--c-paper-deep);
}
.footer-ai-ask-heading{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.12em; text-transform:uppercase;
margin-bottom:var(--s-3); color:var(--c-grey-800);
}
.footer-ai-ask-links{display:flex; flex-wrap:wrap; gap:.5rem}
.footer-ai-ask-links a{
padding:.4rem .8rem; border-radius:var(--r-pill);
border:1.5px solid var(--c-ink); background:var(--c-paper);
font-size:.82rem; transition:all var(--t-fast);
}
.footer-ai-ask-links a:hover{background:var(--c-brand); color:#fff; border-color:var(--c-brand)}
.footer-ai-ask-links a strong{font-weight:600; color:var(--c-brand)}
.footer-ai-ask-links a:hover strong{color:#fff}
/* ===== BLOG ===== */
.blog-header{padding:calc(72px + var(--s-12)) 0 var(--s-8); text-align:center}
.blog-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:var(--s-5);
}
.blog-card{
border:var(--bw) solid var(--c-ink); border-radius:var(--r-md);
background:var(--c-paper); padding:var(--s-5);
transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
text-decoration:none; color:inherit;
display:flex; flex-direction:column; gap:var(--s-2);
}
.blog-card:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--c-line); border-color:var(--c-brand)}
.blog-card-tag{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--c-brand);
}
.blog-card-title{font-size:1.2rem; font-weight:700; line-height:1.25}
.blog-card-excerpt{color:var(--c-grey-600); font-size:.92rem; line-height:1.55}
.blog-card-meta{font-family:var(--f-mono); font-size:.74rem; color:var(--c-grey-400); margin-top:auto}
.blog-card-body{display:flex; flex-direction:column; gap:var(--s-2)}
.article-breadcrumb{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600); padding:var(--s-4) 0;
}
.article-breadcrumb a{color:var(--c-brand); border-bottom:1px solid currentColor}
.article-header{
padding:calc(72px + var(--s-12)) 0 var(--s-12);
background:var(--c-paper-deep, var(--c-grey-50));
border-bottom:1px solid var(--c-grey-100);
}
.article-tag{
display:inline-block; font-family:var(--f-mono);
font-size:.7rem; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; color:var(--c-brand);
background:var(--c-brand-soft); padding:.35rem .6rem;
border-radius:var(--r-md); margin-bottom:var(--s-4);
}
.article-title{
font-family:var(--f-display);
font-size:clamp(1.9rem, 4.2vw, 3rem);
font-weight:800; line-height:1.1;
letter-spacing:-0.02em; color:var(--c-ink);
margin:0 0 var(--s-6);
}
.article-meta{
font-family:var(--f-mono); font-size:.82rem;
color:var(--c-grey-600); display:flex;
gap:var(--s-6); flex-wrap:wrap;
}
.article-content{
max-width:760px; margin:0 auto;
padding:var(--s-12) var(--s-8);
font-size:1.05rem; line-height:1.75; color:var(--c-grey-800);
}
.article-content h2{
font-family:var(--f-display);
font-size:1.7rem; font-weight:800; line-height:1.2;
letter-spacing:-0.015em; color:var(--c-ink);
margin-top:var(--s-12); margin-bottom:var(--s-5);
padding-bottom:var(--s-3);
border-bottom:2px solid var(--c-brand);
}
.article-content h3{
font-family:var(--f-display);
font-size:1.25rem; font-weight:700; color:var(--c-ink);
margin-top:var(--s-8); margin-bottom:var(--s-3);
}
.article-content p{margin:0 0 var(--s-5)}
.article-content a{
color:var(--c-brand);
border-bottom:1px solid var(--c-brand-glow);
}
.article-content a:hover{border-bottom-color:var(--c-brand)}
.article-content ul, .article-content ol{
margin:0 0 var(--s-5); padding-left:var(--s-6);
}
.article-content li{margin-bottom:var(--s-2)}
.article-content strong{color:var(--c-ink); font-weight:700}
.article-content blockquote{
margin:var(--s-8) 0; padding:var(--s-5) var(--s-6);
background:var(--c-brand-soft);
border-left:4px solid var(--c-brand);
border-radius:var(--r-md);
}
.article-content blockquote p{
font-size:1.05rem; font-style:italic;
color:var(--c-grey-800); margin:0;
}
.article-content code{
font-family:var(--f-mono); font-size:.92em;
background:var(--c-grey-50); padding:.1em .35em;
border-radius:4px; color:var(--c-ink);
}
.article-content img{
max-width:100%; height:auto;
border-radius:var(--r-md); margin:var(--s-6) 0;
}
.article-cta{
margin:var(--s-12) 0 0;
padding:var(--s-10) var(--s-8);
background:var(--c-ink); color:var(--c-paper);
border-radius:var(--r-md); text-align:center;
}
.article-cta h3{
font-family:var(--f-display); color:var(--c-paper);
font-size:1.5rem; font-weight:800;
margin:0 0 var(--s-3);
}
.article-cta p{
color:var(--c-grey-200, #D9D9D2);
margin:0 0 var(--s-6);
}
.article-cta .btn, .article-cta a.btn-primary{
background:var(--c-brand); color:var(--c-paper);
}
.article-related{
background:var(--c-grey-50); padding:var(--s-16) 0;
border-top:1px solid var(--c-grey-100);
}
.article-related h2{
font-family:var(--f-display);
font-size:1.5rem; font-weight:800;
color:var(--c-ink); margin:0 0 var(--s-8);
}
@media (max-width: 720px){
.article-content{padding:var(--s-8) var(--s-5)}
.article-content h2{font-size:1.4rem}
.article-cta{padding:var(--s-8) var(--s-5)}
}
.tldr-box{
padding:var(--s-5); margin:var(--s-6) 0;
background:var(--c-brand-soft); border-left:4px solid var(--c-brand);
border-radius:var(--r-md);
}
.tldr-heading{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.12em; text-transform:uppercase;
color:var(--c-brand-deep); margin-bottom:var(--s-2);
font-weight:600;
}
.tldr-text{color:var(--c-ink); font-size:1.02rem; line-height:1.55}
.related-posts{margin:2.5rem 0;padding:1.5rem 0;border-top:1px solid var(--c-grey-100)}
.related-posts h2{font-size:1.4rem;margin-bottom:1rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.related-card{
background:var(--c-paper-deep); padding:1rem;
border-radius:var(--r-md); border-left:3px solid var(--c-brand);
}
.related-card h3{font-size:1rem;margin:0 0 .5rem}
.related-card h3 a{color:var(--c-brand-deep);text-decoration:none}
.related-card h3 a:hover{text-decoration:underline}
.related-card p{font-size:.9rem;color:var(--c-grey-800);margin:0}
/* ===== ANIMATION HELPERS ===== */
.fade-in{opacity:0; transform:translateY(20px); transition:opacity var(--t-slow), transform var(--t-slow)}
.fade-in.in{opacity:1; transform:none}
.animate-in{animation:fadeUp var(--t-slow) ease-out both}
@keyframes fadeUp{
from{opacity:0; transform:translateY(20px)}
to{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
/* ===== SIGNUP FLOW ===== */
.signup-shell{min-height:100vh; background:var(--c-paper); display:flex; flex-direction:column}
/* Top 4-step journey bar */
.signup-journey-wrap{padding-top:var(--s-8)}
.journey-bar{
display:flex; align-items:center; gap:var(--s-2);
margin:0 0 var(--s-8); flex-wrap:wrap;
}
.journey-step{
display:flex; align-items:center; gap:var(--s-2);
flex:1; min-width:fit-content; position:relative;
}
.journey-step:last-child{flex:0}
.journey-dot{
flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
border:var(--bw) solid var(--c-grey-200);
background:var(--c-paper); color:var(--c-grey-400);
font-family:var(--f-display); font-weight:800; font-size:.92rem;
transition:all var(--t-base);
}
.journey-label{
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-400); white-space:nowrap;
}
.journey-bar-fill{
flex:1; height:2px;
background:var(--c-grey-200);
min-width:18px; max-width:80px;
transition:background var(--t-base);
}
.journey-step-done .journey-dot{background:var(--c-ink); border-color:var(--c-ink); color:var(--c-paper)}
.journey-step-done .journey-label{color:var(--c-ink)}
.journey-step-done .journey-bar-fill{background:var(--c-ink)}
.journey-step-current .journey-dot{
background:var(--c-brand); border-color:var(--c-brand); color:#fff;
box-shadow:0 0 0 4px var(--c-brand-soft);
}
.journey-step-current .journey-label{color:var(--c-ink)}
@media (max-width:640px){
.signup-journey-wrap{padding-top:var(--s-6)}
.journey-bar{gap:var(--s-1); margin-bottom:var(--s-2)}
.journey-label{display:none}
.journey-bar-fill{min-width:8px}
}
/* 2-col grid */
.signup-grid{
display:grid; grid-template-columns:1fr; gap:var(--s-10);
padding:var(--s-8) 0 var(--s-16);
align-items:start;
}
@media (max-width:640px){
.signup-grid{padding-top:var(--s-1); gap:var(--s-6)}
}
@media (min-width:920px){
.signup-grid{grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:var(--s-12)}
}
.signup-form{max-width:520px}
.signup-h1{
font-family:var(--f-display); font-weight:900;
font-size:clamp(2rem, 5vw, 3.2rem);
line-height:1.02; letter-spacing:-.04em;
margin:var(--s-3) 0 var(--s-4);
}
.signup-lead{
color:var(--c-grey-600); font-size:1.05rem; line-height:1.55;
margin-bottom:var(--s-8); max-width:46ch;
}
.signup-fields{display:flex; flex-direction:column; gap:var(--s-5); margin-bottom:var(--s-6)}
.signup-fields label{display:block}
.signup-label{
display:block; margin-bottom:.5rem;
font-family:var(--f-mono); font-size:.74rem;
letter-spacing:.1em; text-transform:uppercase;
color:var(--c-grey-600); font-weight:500;
}
.signup-otp{
font-family:var(--f-mono); font-size:2.2rem;
letter-spacing:.4em; text-align:center;
padding:1.2rem 1rem; height:auto;
}
.signup-error{
margin-top:var(--s-3);
padding:var(--s-3) var(--s-4);
border:var(--bw) solid var(--c-bad);
border-radius:var(--r-md);
background:var(--c-bad-soft); color:var(--c-bad);
font-family:var(--f-mono); font-size:.86rem;
}
.signup-cta{
width:100%; justify-content:center;
margin-top:var(--s-4);
}
.signup-fine{
margin-top:var(--s-5);
font-family:var(--f-mono); font-size:.74rem;
color:var(--c-grey-400); line-height:1.6;
letter-spacing:.02em;
}
/* ===== DASHBOARD ===== */
.dash-loader{
min-height:100vh; display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:var(--s-4); padding:var(--s-6); text-align:center;
}
.dash-header .header-content{height:64px}
.dash-logo-tag{
margin-left:.6rem;
padding:.2rem .55rem;
border-radius:var(--r-pill);
background:var(--c-brand-soft);
color:var(--c-brand-deep);
font-family:var(--f-mono); font-size:.66rem;
letter-spacing:.1em; text-transform:uppercase;
font-weight:600;
}
@media (max-width:540px){.dash-logo-tag{display:none}}
.dash-header-right{
display:flex; align-items:center; gap:var(--s-3);
}
.dash-home-link{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--c-grey-600); text-decoration:none;
padding:.4rem .7rem; border-radius:var(--r-md);
transition:background var(--t-base), color var(--t-base);
white-space:nowrap;
}
.dash-home-link:hover{background:var(--c-grey-50); color:var(--c-ink)}
@media (max-width:720px){
.dash-home-link{padding:.3rem .5rem; font-size:.72rem}
}
.dash-email{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.06em; color:var(--c-grey-600);
}
@media (max-width:640px){.dash-email{display:none}}
.dash-logout{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--c-grey-600);
background:transparent; border:none; cursor:pointer;
padding:.25rem .5rem; border-radius:var(--r-md);
transition:background var(--t-base), color var(--t-base);
}
.dash-logout:hover{background:var(--c-grey-50); color:var(--c-brand-deep)}
.dash-tabs-wrap{
background:var(--c-paper);
border-bottom:1px solid var(--c-grey-100);
position:sticky; top:0; z-index:90;
}
.dash-tabs{
display:flex; gap:0; overflow-x:auto;
scrollbar-width:none;
}
.dash-tabs::-webkit-scrollbar{display:none}
.dash-tab{
padding:var(--s-4) var(--s-4);
font-family:var(--f-mono); font-size:.8rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--c-grey-600); white-space:nowrap;
background:transparent; border:none; cursor:pointer;
border-bottom:2px solid transparent;
transition:color var(--t-base), border-color var(--t-base);
}
.dash-tab:hover{color:var(--c-ink)}
.dash-tab-active{color:var(--c-ink); border-bottom-color:var(--c-brand); font-weight:600}
.dash-main{
padding:var(--s-8) var(--s-5) var(--s-16);
max-width:1100px;
}
@media (min-width:920px){.dash-main{padding:var(--s-10) var(--s-5) var(--s-20)}}
/* โโ Overview cards โโ */
.dash-overview-grid{
display:grid; grid-template-columns:1fr; gap:var(--s-4);
}
@media (min-width:760px){
.dash-overview-grid{grid-template-columns:repeat(3, 1fr)}
}
.dash-card{
background:var(--c-paper);
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
padding:var(--s-5) var(--s-5);
box-shadow:0 1px 0 var(--c-grey-100);
display:flex; flex-direction:column;
}
.dash-card-eyebrow{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-600); margin:0;
}
.dash-card-value{
font-family:var(--f-display); font-weight:800;
font-size:clamp(1.6rem, 3.2vw, 2rem);
letter-spacing:-.02em; color:var(--c-ink);
margin:var(--s-2) 0 0; line-height:1.1;
}
.dash-card-value-sub{
font-family:var(--f-mono); font-size:.85rem;
font-weight:500; color:var(--c-grey-400);
letter-spacing:.04em;
}
.dash-card-sub{
font-family:var(--f-body); font-size:.85rem;
color:var(--c-grey-600); margin:var(--s-2) 0 0;
line-height:1.5;
}
.dash-card-text{
font-family:var(--f-body); font-size:.92rem;
color:var(--c-grey-800); line-height:1.55;
margin:var(--s-2) 0 0;
}
.dash-card-actions{
display:flex; gap:var(--s-2); margin-top:var(--s-4);
flex-wrap:wrap;
}
.dash-card-actions .btn{padding:.55rem 1rem; font-size:.88rem}
.dash-card-number{
background:var(--c-ink); color:var(--c-paper);
border-color:var(--c-ink);
}
.dash-card-number .dash-card-eyebrow{color:var(--c-grey-400)}
.dash-number{
font-family:var(--f-display); font-weight:800;
font-size:clamp(1.8rem, 3.6vw, 2.2rem);
letter-spacing:-.02em; color:var(--c-paper);
margin:var(--s-2) 0 0; line-height:1.1; word-break:break-all;
}
.dash-card-number .btn-primary{background:var(--c-brand); color:#fff; border-color:var(--c-brand)}
.dash-card-number .btn-primary:hover{background:#fff; color:var(--c-brand-deep); border-color:#fff}
.dash-card-number .btn-secondary{background:transparent; color:var(--c-paper); border-color:rgba(255,255,255,.3)}
.dash-card-number .btn-secondary:hover{background:rgba(255,255,255,.08); border-color:var(--c-paper); color:var(--c-paper)}
.dash-progress{
margin-top:var(--s-3);
height:6px; border-radius:999px;
background:var(--c-grey-100); overflow:hidden;
}
.dash-progress-fill{
height:100%; background:var(--c-brand);
transition:width var(--t-base);
}
/* โโ Alert (inactive plan) โโ */
.dash-alert{
margin-bottom:var(--s-6);
padding:var(--s-5) var(--s-5);
background:var(--c-brand-soft);
border:1px solid var(--c-brand-glow);
border-radius:var(--r-md);
display:flex; justify-content:space-between; align-items:center;
gap:var(--s-4); flex-wrap:wrap;
}
.dash-alert-eyebrow{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.1em; text-transform:uppercase;
color:var(--c-brand-deep); margin:0;
}
.dash-alert-title{
font-family:var(--f-display); font-weight:800;
font-size:1.15rem; color:var(--c-ink);
margin:.3rem 0 0; line-height:1.3;
}
.dash-alert-sub{
font-family:var(--f-body); font-size:.92rem;
color:var(--c-grey-600); margin:.4rem 0 0;
}
.dash-alert-column{
flex-direction:column; align-items:stretch; gap:var(--s-4);
}
.dash-alert-actions{
display:flex; gap:var(--s-2); flex-wrap:wrap;
}
.dash-alert-actions .btn{flex:1 1 auto; min-width:0}
@media (max-width:480px){.dash-alert-actions .btn{flex-basis:100%}}
/* โโ Sections โโ */
.dash-section{margin-top:var(--s-12)}
.dash-section-head{
display:flex; justify-content:space-between; align-items:baseline;
gap:var(--s-4); flex-wrap:wrap;
margin-bottom:var(--s-5);
}
.dash-section-title{
font-family:var(--f-display); font-weight:800;
font-size:clamp(1.4rem, 2.5vw, 1.7rem);
color:var(--c-ink); letter-spacing:-.02em;
margin:0;
}
.dash-link{
font-family:var(--f-mono); font-size:.82rem;
color:var(--c-brand); background:transparent; border:none;
cursor:pointer; padding:0; text-decoration:none;
}
.dash-link:hover{color:var(--c-brand-deep)}
.dash-link-inline{
color:var(--c-brand);
border-bottom:1px solid currentColor;
background:transparent; border-top:none; border-left:none; border-right:none;
padding:0; cursor:pointer;
font-family:inherit; font-size:inherit;
}
.dash-link-inline:hover{color:var(--c-brand-deep)}
.dash-empty{
background:var(--c-grey-50);
border:1px dashed var(--c-grey-200);
border-radius:var(--r-md);
padding:var(--s-10) var(--s-6);
text-align:center;
color:var(--c-grey-600);
}
.dash-empty p{margin:0 0 var(--s-2)}
.dash-empty-hint{font-size:.88rem}
/* โโ Calls list โโ */
.dash-calls-list{
display:flex; flex-direction:column;
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
overflow:hidden;
background:var(--c-paper);
}
.dash-call{
border-bottom:1px solid var(--c-grey-100);
transition:background var(--t-base);
}
.dash-call:last-child{border-bottom:none}
.dash-call-open{background:var(--c-grey-50)}
.dash-call-summary{
width:100%; padding:var(--s-4) var(--s-5);
display:grid;
grid-template-columns:minmax(160px, 1.2fr) minmax(0, 2fr) auto;
gap:var(--s-4); align-items:center;
background:transparent; border:none; cursor:pointer; text-align:left;
transition:background var(--t-base);
}
.dash-call-summary:hover{background:var(--c-grey-50)}
@media (max-width:720px){
.dash-call-summary{
grid-template-columns:1fr;
gap:var(--s-3); padding:var(--s-4);
}
.dash-call-meta{
justify-content:flex-start;
padding-top:var(--s-2);
border-top:1px dashed var(--c-grey-100);
}
.dash-call-reason-text{white-space:normal; line-height:1.45}
}
.dash-call-name{
font-family:var(--f-display); font-weight:700;
font-size:.98rem; color:var(--c-ink); margin:0;
}
.dash-call-phone{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600); margin:.15rem 0 0;
}
.dash-call-reason-text{
font-family:var(--f-body); font-size:.92rem;
color:var(--c-ink); margin:0; line-height:1.4;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-call-date{
font-family:var(--f-mono); font-size:.74rem;
color:var(--c-grey-400); margin:.15rem 0 0;
}
.dash-call-meta{
display:flex; align-items:center; gap:var(--s-3);
}
.dash-call-chevron{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
background:var(--c-grey-50); color:var(--c-grey-600);
transition:transform var(--t-base), background var(--t-base), color var(--t-base);
}
.dash-call-summary:hover .dash-call-chevron{
background:var(--c-brand-soft); color:var(--c-brand);
}
.dash-call-open .dash-call-chevron{
transform:rotate(180deg);
background:var(--c-brand-soft); color:var(--c-brand);
}
.dash-call-summary[disabled]{cursor:default; opacity:.85}
.dash-call-summary[disabled]:hover{background:transparent}
.dash-call-section{display:flex; flex-direction:column; gap:var(--s-2)}
.dash-call-duration{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600);
}
.dash-tag{
font-family:var(--f-mono); font-size:.68rem;
letter-spacing:.08em; text-transform:uppercase;
padding:.3rem .55rem; border-radius:var(--r-md);
background:var(--c-grey-100); color:var(--c-grey-800);
}
.dash-tag-urgent{
background:#FFE4E8; color:#B82338;
}
.dash-call-body{
padding:var(--s-5) var(--s-5);
background:var(--c-grey-50);
border-top:1px solid var(--c-grey-100);
display:flex; flex-direction:column; gap:var(--s-5);
animation:dash-call-open .22s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes dash-call-open{
from{opacity:0; transform:translateY(-4px)}
to{opacity:1; transform:translateY(0)}
}
@media (max-width:720px){
.dash-call-body{padding:var(--s-4)}
}
@media (prefers-reduced-motion: reduce){
.dash-call-body{animation:none}
}
.dash-see-all{
padding:.55rem 1rem; font-size:.85rem;
font-family:var(--f-mono); letter-spacing:.04em;
}
.dash-audio{width:100%}
.dash-call-summary-text{
font-family:var(--f-body); font-size:.95rem;
color:var(--c-grey-800); line-height:1.6;
white-space:pre-wrap; margin:var(--s-2) 0 0;
}
.dash-call-transcript{
font-family:var(--f-mono); font-size:.82rem;
color:var(--c-grey-800); line-height:1.55;
white-space:pre-wrap; margin:var(--s-2) 0 0;
background:var(--c-paper); padding:var(--s-3);
border-radius:var(--r-md); max-height:300px; overflow-y:auto;
}
/* โโ Forwarding tab โโ */
.dash-forward-list{
margin-top:var(--s-8); display:flex; flex-direction:column;
gap:var(--s-3);
}
.dash-dial-row{
display:flex; justify-content:space-between; align-items:center;
gap:var(--s-4); flex-wrap:wrap;
padding:var(--s-5);
background:var(--c-paper);
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
}
.dash-dial-info{flex:1; min-width:240px}
.dash-dial-code{
font-family:var(--f-mono); font-size:1.2rem; font-weight:700;
color:var(--c-ink); margin:.3rem 0 0; word-break:break-all;
}
.dash-dial-actions{display:flex; gap:var(--s-2); flex-wrap:wrap}
.dash-dial-actions .btn{padding:.6rem 1.1rem; font-size:.88rem}
.dash-forward-disable{
margin-top:var(--s-6); font-family:var(--f-mono); font-size:.82rem;
color:var(--c-grey-600);
}
.dash-forward-disable code{
font-family:var(--f-mono); background:var(--c-grey-50);
padding:.2em .5em; border:1px solid var(--c-grey-200);
border-radius:4px; color:var(--c-ink);
}
/* โโ Billing tab โโ */
.dash-plans{
display:flex; flex-wrap:wrap; gap:var(--s-4);
margin-top:var(--s-8);
}
.dash-plan-card{
flex:1 1 320px; max-width:520px;
background:var(--c-paper);
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
padding:var(--s-6);
position:relative;
display:flex; flex-direction:column;
}
.dash-plan-card-current{
border-color:var(--c-brand);
box-shadow:0 0 0 3px var(--c-brand-soft);
}
.dash-plan-badge{
position:absolute; top:-12px; left:var(--s-5);
padding:.25rem .7rem; border-radius:var(--r-pill);
background:var(--c-brand); color:#fff;
font-family:var(--f-mono); font-size:.7rem;
letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.dash-plan-price{
font-family:var(--f-display); font-weight:800;
font-size:clamp(2rem, 4vw, 2.6rem);
color:var(--c-ink); margin:var(--s-2) 0; letter-spacing:-.02em;
}
.dash-plan-price span{
font-family:var(--f-mono); font-size:.95rem;
font-weight:500; color:var(--c-grey-400);
}
.dash-plan-minutes{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-600); margin:0;
}
.dash-plan-blurb{
margin:var(--s-4) 0 var(--s-6); color:var(--c-grey-800);
font-size:.94rem; line-height:1.55;
}
.dash-plan-cta{margin-top:auto; width:100%; justify-content:center}
.dash-overflow-card{
margin-top:var(--s-6); max-width:540px;
background:var(--c-grey-50);
}
.dash-list{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:var(--s-2);
font-size:.94rem; color:var(--c-grey-800); line-height:1.55;
}
.dash-list li{
padding-left:var(--s-4); position:relative;
}
.dash-list li::before{
content:"ยท"; position:absolute; left:var(--s-2);
color:var(--c-brand); font-weight:700;
}
/* โโ Settings form โโ */
.dash-form{
margin-top:var(--s-8); display:flex; flex-direction:column;
gap:var(--s-5);
}
.dash-field{display:flex; flex-direction:column}
.dash-field-hint{
margin:var(--s-2) 0 0;
font-family:var(--f-body); font-size:.82rem;
color:var(--c-grey-600); line-height:1.5;
}
.dash-prompt-area{
min-height:380px;
font-family:var(--f-mono); font-size:.85rem;
line-height:1.55;
}
.dash-form-footer{
margin-top:var(--s-6);
display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
}
.dash-form-msg{
font-family:var(--f-mono); font-size:.82rem;
color:var(--c-grey-600);
}
.dash-choices{
display:flex; gap:var(--s-2); margin-top:var(--s-2);
}
.dash-choices-wrap{flex-wrap:wrap}
/* ===== ONBOARD PAGE ===== */
.onboard-main{
padding:var(--s-8) var(--s-5) var(--s-16);
max-width:760px;
}
@media (max-width:640px){
.onboard-main{padding:var(--s-1) var(--s-4) var(--s-12)}
}
@media (min-width:920px){
.onboard-main{padding:var(--s-12) var(--s-5) var(--s-20)}
}
.onboard-stage{display:flex; flex-direction:column}
.onboard-loading{align-items:center; text-align:center; padding-top:var(--s-16)}
.onboard-spinner{
position:relative;
width:80px; height:80px;
margin:0 0 var(--s-6);
}
.onboard-spinner::before,
.onboard-spinner::after{
content:""; position:absolute; inset:0;
border-radius:50%;
border:3px solid transparent;
}
.onboard-spinner::before{
border-top-color:var(--c-brand);
border-right-color:var(--c-brand-glow);
animation:onboard-spin 1.1s cubic-bezier(.55,.15,.45,.85) infinite;
}
.onboard-spinner::after{
inset:14px;
border-top-color:var(--c-brand-glow);
border-left-color:var(--c-brand);
animation:onboard-spin-rev 1.6s linear infinite;
}
@keyframes onboard-spin{to{transform:rotate(360deg)}}
@keyframes onboard-spin-rev{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion: reduce){
.onboard-spinner::before,.onboard-spinner::after{animation:none}
.onboard-spinner::before{border-top-color:var(--c-brand); border-right-color:transparent}
}
.onboard-questions{
display:flex; flex-direction:column;
gap:var(--s-5); margin:var(--s-8) 0;
}
.onboard-question{
padding:var(--s-5);
background:var(--c-paper);
border:var(--bw) solid var(--c-line);
border-radius:var(--r-md);
}
.onboard-question-prompt{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.08em; text-transform:uppercase;
color:var(--c-grey-600); margin:0 0 var(--s-3);
}
.onboard-input-hint{
margin:var(--s-2) 0 0;
font-family:var(--f-body); font-size:.82rem;
color:var(--c-grey-600); line-height:1.5;
}
.onboard-source-options{
display:grid; grid-template-columns:1fr; gap:var(--s-3);
margin:var(--s-6) 0;
}
@media (min-width:640px){
.onboard-source-options{grid-template-columns:1fr 1fr}
}
.onboard-source-option{
display:flex; gap:var(--s-3); align-items:flex-start;
padding:var(--s-4);
background:var(--c-paper);
border:1px solid var(--c-grey-100);
border-radius:var(--r-md);
}
.onboard-source-icon{
flex:0 0 auto;
width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
background:var(--c-brand-soft);
color:var(--c-brand);
border-radius:var(--r-md);
}
.onboard-source-icon svg{display:block}
.onboard-source-title{
font-family:var(--f-display); font-weight:700;
font-size:.96rem; color:var(--c-ink); margin:0;
}
.onboard-source-desc{
margin:.3rem 0 0;
font-family:var(--f-body); font-size:.82rem;
color:var(--c-grey-600); line-height:1.5;
}
.onboard-source-desc code{
font-family:var(--f-mono); font-size:.78em;
background:var(--c-grey-50); padding:.1em .3em;
border-radius:4px; color:var(--c-ink);
}
.onboard-input-hint code{
font-family:var(--f-mono); font-size:.82em;
background:var(--c-grey-50);
padding:.1em .3em; border-radius:4px;
color:var(--c-ink);
}
.input[data-missing="true"]{
font-style:italic;
color:var(--c-grey-400);
}
.input[data-missing="true"]:focus{
font-style:normal;
color:var(--c-ink);
}
.onboard-question-source{
font-family:var(--f-body); font-size:.88rem;
color:var(--c-grey-600); margin:0 0 var(--s-3);
padding:var(--s-2) var(--s-3);
background:var(--c-grey-50);
border-left:3px solid var(--c-brand-glow);
border-radius:var(--r-md);
}
.onboard-question-source span{
color:var(--c-ink); font-weight:600;
}
.onboard-choices{
display:flex; gap:var(--s-2);
}
.onboard-choices-wrap{flex-wrap:wrap}
.onboard-stub-banner{
background:var(--c-ink); color:var(--c-paper);
padding:var(--s-3) var(--s-4); margin-bottom:var(--s-6);
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
border-radius:var(--r-md);
}
.onboard-number-card{
margin:var(--s-8) 0;
padding:var(--s-8) var(--s-6);
background:var(--c-paper-deep, var(--c-grey-50));
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
text-align:center;
}
.onboard-number-eyebrow{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.1em; text-transform:uppercase;
color:var(--c-grey-600); margin:0 0 var(--s-3);
}
.onboard-number{
font-family:var(--f-display);
font-size:clamp(2rem, 5.5vw, 3rem);
font-weight:800; letter-spacing:-.02em;
color:var(--c-ink); margin:0 0 var(--s-5);
word-break:break-all;
}
.onboard-number-hint{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600); margin:var(--s-4) 0 0;
}
.onboard-forwarding{
margin:var(--s-8) 0 0;
border:var(--bw) solid var(--c-line);
border-radius:var(--r-md);
background:var(--c-paper);
}
.onboard-forwarding > summary{
list-style:none; cursor:pointer;
padding:var(--s-5) var(--s-6);
font-family:var(--f-display); font-weight:700;
font-size:1rem; color:var(--c-ink);
display:flex; justify-content:space-between; align-items:center;
gap:var(--s-4);
}
.onboard-forwarding > summary::-webkit-details-marker{display:none}
.onboard-forwarding-arrow{
color:var(--c-brand);
transition:transform var(--t-base);
font-size:1.2rem;
}
.onboard-forwarding[open] .onboard-forwarding-arrow{transform:rotate(180deg)}
.onboard-forwarding-body{
padding:0 var(--s-6) var(--s-6);
border-top:1px solid var(--c-grey-100);
}
.onboard-carrier{
padding:var(--s-5);
margin-top:var(--s-4);
border:1.5px solid var(--c-grey-200);
border-radius:var(--r-md);
background:var(--c-paper);
}
.onboard-carrier-header{
display:flex; justify-content:space-between; align-items:baseline;
gap:var(--s-3); flex-wrap:wrap;
padding-bottom:var(--s-3);
border-bottom:1px solid var(--c-grey-100);
}
.onboard-carrier-header strong{
font-family:var(--f-display); font-weight:800;
font-size:1.1rem; color:var(--c-ink);
letter-spacing:-.01em;
}
.onboard-carrier-link{
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-brand); text-decoration:none;
border-bottom:1px solid currentColor;
}
.onboard-carrier-link:hover{color:var(--c-brand-deep)}
.onboard-carrier-steps{
margin:var(--s-4) 0 0;
padding-left:var(--s-5);
display:flex; flex-direction:column; gap:var(--s-2);
}
.onboard-carrier-steps li{
font-size:.94rem; line-height:1.55; color:var(--c-grey-800);
}
.onboard-advanced{
margin-top:var(--s-5);
border:1px dashed var(--c-grey-200);
border-radius:var(--r-md);
background:var(--c-grey-50);
}
.onboard-advanced > summary{
list-style:none; cursor:pointer;
padding:var(--s-3) var(--s-5);
font-family:var(--f-mono); font-size:.8rem;
color:var(--c-grey-600); letter-spacing:.04em;
}
.onboard-advanced > summary::-webkit-details-marker{display:none}
.onboard-advanced-body{
padding:0 var(--s-5) var(--s-5);
display:flex; flex-direction:column; gap:var(--s-3);
}
.onboard-code-row{
display:flex; justify-content:space-between; align-items:center;
gap:var(--s-4); flex-wrap:wrap;
padding:var(--s-3) var(--s-4);
background:var(--c-paper);
border:1px solid var(--c-grey-200);
border-radius:var(--r-md);
}
.onboard-code-label{
font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.06em; text-transform:uppercase;
color:var(--c-grey-600); margin:0;
}
.onboard-code-value{
font-family:var(--f-mono); font-size:1.05rem;
font-weight:700; color:var(--c-ink);
margin:.2rem 0; word-break:break-all;
}
.onboard-code-hint{
font-family:var(--f-body); font-size:.82rem;
color:var(--c-grey-600); margin:0;
}
.onboard-disable-hint{
margin:var(--s-3) 0 0;
font-family:var(--f-mono); font-size:.78rem;
color:var(--c-grey-600);
}
.onboard-disable-hint code{
background:var(--c-paper); padding:.2em .5em;
border:1px solid var(--c-grey-200); border-radius:4px;
color:var(--c-ink);
}
.onboard-cta-row{
display:flex; gap:var(--s-3); flex-wrap:wrap;
margin-top:var(--s-10);
}
.onboard-alt-link{
display:block;
margin:var(--s-5) 0 0;
padding:0;
background:transparent; border:none;
font-family:var(--f-mono); font-size:.82rem;
letter-spacing:.04em;
color:var(--c-brand);
cursor:pointer; text-align:left;
border-bottom:1px dashed transparent;
width:fit-content;
}
.onboard-alt-link:hover{
color:var(--c-brand-deep);
border-bottom-color:currentColor;
}
textarea.input{
font-family:var(--f-body);
line-height:1.5;
min-height:80px;
resize:vertical;
}
/* Field-level validation: red border + helper text under the input. */
.input.input-error{
border-color:#E03A4B !important;
box-shadow:0 0 0 3px rgba(224,58,75,.12);
}
.input.input-error:focus{
border-color:#E03A4B !important;
box-shadow:0 0 0 3px rgba(224,58,75,.22);
}
.input-error-msg{
margin:.4rem 0 0;
font-family:var(--f-body); font-size:.82rem;
color:#C32337; line-height:1.4;
}
.onboard-loader-msg{
transition:opacity 220ms ease, transform 220ms ease;
min-height:1.6em;
opacity:1;
transform:translateY(0);
}
.onboard-loader-msg-fade{
opacity:0;
transform:translateY(-4px);
}
.onboard-plan-card{
position:relative;
margin:var(--s-8) 0 0;
padding:var(--s-10) var(--s-8);
background:var(--c-ink); color:var(--c-paper);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
box-shadow:0 14px 0 var(--c-line);
}
.onboard-plan-name{
font-family:var(--f-mono); font-size:.78rem;
letter-spacing:.1em; text-transform:uppercase;
color:var(--c-grey-400); margin:var(--s-2) 0 var(--s-3);
}
.onboard-plan-price{
font-family:var(--f-display); font-weight:800;
font-size:clamp(2.4rem, 5vw, 3.2rem);
line-height:1; letter-spacing:-.03em;
color:var(--c-paper); margin:0;
}
.onboard-plan-mo{
font-family:var(--f-mono); font-size:.95rem;
color:var(--c-grey-400); font-weight:400;
margin-left:.2em;
}
.onboard-plan-period{
font-family:var(--f-mono); font-size:.82rem;
color:var(--c-grey-400); margin:var(--s-2) 0 var(--s-6);
}
.onboard-plan-features{
list-style:none; padding:0; margin:0 0 var(--s-8);
display:flex; flex-direction:column; gap:var(--s-2);
}
.onboard-plan-features li{
display:flex; align-items:flex-start; gap:.6rem;
font-size:.96rem; line-height:1.5; color:var(--c-paper);
}
.onboard-plan-features li::before{
content:""; flex:0 0 auto; width:18px; height:18px; margin-top:3px;
border-radius:50%; background:rgba(255,255,255,.1);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
}
.onboard-plan-card .signup-cta{
background:var(--c-brand);
color:#fff;
border:2px solid #fff;
box-shadow:0 4px 0 rgba(0,0,0,.35);
font-weight:700;
width:100%;
justify-content:center;
}
.onboard-plan-card .signup-cta:hover{
background:#fff;
color:var(--c-brand-deep);
border-color:#fff;
transform:translateY(-2px);
box-shadow:0 8px 24px -4px rgba(45,91,255,.6);
}
.onboard-plan-card .signup-cta:disabled{
opacity:.6; cursor:not-allowed; transform:none;
}
.onboard-plan-fine{
margin:var(--s-4) 0 0;
text-align:center;
font-family:var(--f-mono); font-size:.74rem;
color:var(--c-grey-400);
}
.onboard-plan-card .pricing-badge{
background:var(--c-brand); color:#fff;
}
/* Right column: social proof */
.signup-proof{
padding:var(--s-6);
background:var(--c-paper-deep);
border:var(--bw) solid var(--c-ink);
border-radius:var(--r-md);
display:flex; flex-direction:column; gap:var(--s-5);
position:sticky; top:calc(72px + var(--s-4));
}
@media (max-width:919px){.signup-proof{position:static}}
.signup-proof-header{display:flex; flex-direction:column; gap:.4rem}
.signup-proof-sub{
font-family:var(--f-mono); font-size:.72rem;
color:var(--c-grey-600); letter-spacing:.08em;
text-transform:uppercase; margin:0;
}
.signup-proof-title{
font-family:var(--f-display); font-weight:800;
font-size:1.15rem; color:var(--c-ink); margin:0;
letter-spacing:-.01em; line-height:1.2;
}
.signup-proof-includes{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:var(--s-4);
padding:var(--s-4) 0;
border-top:1px solid var(--c-grey-200);
border-bottom:1px solid var(--c-grey-200);
}
.signup-proof-includes li{
display:flex; align-items:flex-start; gap:.7rem;
}
.signup-proof-includes strong{
display:block; font-family:var(--f-display); font-weight:700;
font-size:.94rem; color:var(--c-ink); line-height:1.3;
}
.signup-proof-includes span{
display:block; font-size:.85rem; color:var(--c-grey-600);
margin-top:.15rem; line-height:1.45;
}
.signup-proof-check{
flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%;
background:var(--c-brand-soft); color:var(--c-brand);
font-size:.78rem; font-weight:800; margin-top:.1rem;
}
.signup-proof-list h3{
font-family:var(--f-display); font-weight:700;
font-size:1rem; margin-bottom:var(--s-3);
color:var(--c-ink);
}
.signup-proof-list ol{
list-style:none; counter-reset:slist;
display:flex; flex-direction:column; gap:.6rem;
}
.signup-proof-list li{
counter-increment:slist; position:relative;
padding-left:1.8rem; font-size:.88rem;
line-height:1.5; color:var(--c-grey-800);
}
.signup-proof-list li::before{
content:counter(slist);
position:absolute; left:0; top:.05rem;
width:1.3rem; height:1.3rem; border-radius:50%;
background:var(--c-brand); color:#fff;
display:flex; align-items:center; justify-content:center;
font-family:var(--f-mono); font-size:.72rem; font-weight:600;
}
.signup-proof-guarantees{
display:flex; flex-wrap:wrap; gap:.4rem;
padding-top:var(--s-3);
border-top:1px solid var(--c-grey-200);
}
.signup-proof-guarantees .tag{
font-family:var(--f-mono); font-size:.7rem;
padding:.25rem .55rem; border-radius:var(--r-pill);
background:var(--c-paper); border:1.5px solid var(--c-grey-200);
color:var(--c-grey-800); letter-spacing:.05em;
text-transform:none;
}
/* ===== EXTRA (USSD code, highlighted step) ===== */
.ussd{
font-family:var(--f-mono); font-size:.92em;
background:var(--c-ink); color:var(--c-paper);
padding:2px 7px; border-radius:var(--r-sm);
white-space:nowrap;
}
.problem-card-highlight{
background:var(--c-brand); color:#fff; border-color:var(--c-brand);
}
.problem-card-highlight .problem-number{
background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.3);
}
.problem-card-highlight .problem-title,
.problem-card-highlight .problem-text{color:#fff}
/* ===== UTILITIES ===== */
.text-mono{font-family:var(--f-mono)}
.text-center{text-align:center}
.muted{color:var(--c-grey-600)}
.divider{height:var(--bw); background:var(--c-line); margin:var(--s-12) 0}
.tag-pill{
display:inline-block; padding:.2rem .6rem;
border-radius:var(--r-pill); font-family:var(--f-mono);
font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
background:var(--c-brand-soft); color:var(--c-brand-deep);
}