
:root{
  --bg:#06101f;--bg2:#0a1323;--panel:#111927;--panel2:#171f2d;--line:#263247;
  --blue:#1677ff;--blue2:#653dff;--text:#f7f9fc;--muted:#aab4c5;--light:#f7f9fc;
  --ink:#101927;--soft:#eaf2ff;--radius:18px;--shadow:0 22px 55px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{position:sticky;top:0;z-index:50;background:rgba(5,13,25,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.topbar-inner{max-width:1540px;margin:auto;min-height:78px;padding:0 34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px}
.brand strong{display:block;font-size:28px;line-height:.95;letter-spacing:.5px}
.brand small{display:block;font-size:8px;letter-spacing:.4px;margin-top:5px}
.brand-mark{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;border:1px solid #2388ff;background:radial-gradient(circle at 35% 30%,#184f9e,#041125)}
.brand-mark span{display:block;width:2px;background:#57c2ff;border-radius:2px}
.brand-mark span:nth-child(1),.brand-mark span:nth-child(5){height:10px}.brand-mark span:nth-child(2),.brand-mark span:nth-child(4){height:19px}.brand-mark span:nth-child(3){height:27px}
.nav{display:flex;justify-content:center;align-items:center;gap:38px}
.nav a{font-weight:650;font-size:15px;padding:29px 0 25px;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus{color:#3b9aff;border-color:#3b9aff}
.language{position:relative}
.language-button{height:42px;border:1px solid #214a7c;border-radius:10px;background:#08111e;color:#fff;padding:0 13px;display:flex;align-items:center;gap:8px;font-weight:700}
.language-menu{position:absolute;right:0;top:50px;width:176px;background:#162131;border:1px solid #2b3b52;border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60}
.language-menu button{width:100%;border:0;background:transparent;color:#fff;padding:10px;border-radius:8px;display:flex;align-items:center;gap:10px;text-align:left}
.language-menu button:hover,.language-menu button[aria-selected="true"]{background:#233149}
.language-menu .check{margin-left:auto;color:#3b9aff}
.nav-toggle{display:none;border:0;background:transparent;color:white;padding:8px}
.nav-toggle span:not(.sr-only){display:block;width:26px;height:2px;margin:5px;background:#fff}
.hero{position:relative;overflow:hidden;background:
radial-gradient(circle at 92% 80%,rgba(0,102,103,.22),transparent 32%),
radial-gradient(circle at 72% 72%,rgba(79,26,190,.24),transparent 37%),
linear-gradient(130deg,#071223,#050a13 65%)}
.hero-inner{max-width:1540px;margin:auto;padding:54px 34px 48px;display:grid;grid-template-columns:minmax(320px,.78fr) minmax(620px,1.4fr);gap:42px;align-items:center}
.hero-copy h1{font-size:clamp(58px,6.5vw,106px);line-height:.85;margin:0 0 28px;letter-spacing:-4px}
.hero-copy h2{font-size:clamp(24px,2vw,34px);line-height:1.22;margin:0 0 28px;max-width:560px}
.hero-copy>p{max-width:610px;color:#e0e6f0;font-size:17px}
.hero-actions{display:flex;gap:16px;margin:34px 0 22px;flex-wrap:wrap}
.primary-button,.secondary-button{min-height:54px;padding:0 25px;border-radius:11px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.primary-button{border:0;color:white;background:linear-gradient(120deg,#1677ff,#2d9cff);box-shadow:0 12px 25px rgba(22,119,255,.3)}
.secondary-button{border:2px solid white}
.development{display:flex;gap:9px;align-items:center;font-size:14px!important}
.app-demo{min-height:575px;border:1px solid #2b374d;border-radius:17px;background:linear-gradient(145deg,#09101d,#0d1522);box-shadow:var(--shadow);display:grid;grid-template-columns:220px 1fr;overflow:hidden}
.demo-sidebar{padding:22px 14px;background:rgba(4,10,19,.52);border-right:1px solid #273145;display:flex;flex-direction:column}
.demo-sidebar>strong{font-size:19px;margin:0 10px 18px}
.demo-sidebar>button,.calendar-label{border:1px solid #344055;border-radius:10px;background:linear-gradient(#222c3d,#121a28);color:white;padding:12px 11px;text-align:left;margin-bottom:11px}
.demo-sidebar small{color:#8d98aa;margin:10px}
.recent-list{list-style:none;padding:0;margin:0}
.recent-list li{display:flex;gap:9px;align-items:center;padding:8px 10px;color:#edf1f7;font-size:13px}
.settings{display:flex;gap:9px;align-items:center;margin-top:auto;padding:10px}
.demo-main{display:grid;grid-template-rows:58px 1fr 78px}
.demo-top{border-bottom:1px solid #2a3445;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.demo-top time{font-style:italic}
.status-lights{display:flex;align-items:center;gap:7px}
.status-dot{display:block;width:13px;height:13px;border-radius:50%;transition:background-color .35s ease,box-shadow .35s ease,transform .35s ease}
.status-red{background:#e62739;box-shadow:0 0 8px rgba(230,39,57,.7)}
.status-green{background:#28dfb1;box-shadow:0 0 12px #28dfb1;transform:scale(1.08)}
.status-lights b{width:28px;height:28px;border-radius:50%;background:#2c6de5;display:grid;place-items:center}
.demo-content{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px}
.demo-content h3{font-size:clamp(27px,2.5vw,44px);margin:0}
.demo-content>p{color:var(--muted);margin:8px 0 40px}
.shortcuts{width:min(100%,690px);display:grid;grid-template-columns:1fr 1fr;gap:15px}
.shortcuts button{min-height:94px;border:1px solid #334055;border-radius:13px;background:linear-gradient(145deg,#18212f,#101722);color:white;text-align:left;padding:18px;display:flex;align-items:center;gap:18px;font-weight:750;font-size:17px}
.shortcut-icon{font-size:38px;color:#1b82ff;min-width:44px;text-align:center}
.composer{margin:0 18px 18px;border:1px solid #303b4c;border-radius:17px;background:#202733;display:flex;align-items:center;gap:12px;padding:9px}
.round-button,.send-button{border:0;color:white;width:48px;height:48px;border-radius:50%;background:#111927;font-size:28px}
.voice-button{border:1px solid #5d6472;color:white;border-radius:12px;background:#3b414d;padding:13px 20px;font-weight:800}
.composer-placeholder{color:#9aa4b3;flex:1}
.send-button{background:linear-gradient(145deg,#7e4bff,#4931eb);font-size:25px}
.wave{height:60px;opacity:.55;background:
radial-gradient(ellipse at 15% 130%,transparent 52%,#064bd6 53%,transparent 54%),
radial-gradient(ellipse at 65% 130%,transparent 54%,#632cff 55%,transparent 56%);background-size:7px 60px}
.benefits{max-width:1540px;margin:auto;padding:0 34px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.benefits article{min-height:110px;padding:22px;border-radius:18px;background:rgba(7,15,27,.87);display:flex;align-items:center;gap:18px}
.benefit-icon{font-size:48px;color:#1784ff}
.benefits strong{font-size:16px}.benefits p{margin:4px 0 0;color:#e2e7ef;font-size:14px}
.light-section{background:#fff;color:var(--ink);padding-left:34px;padding-right:34px}
.story{padding-top:56px}
.story-grid{max-width:1540px;margin:auto;display:grid;grid-template-columns:.85fr 1.45fr .62fr;gap:25px;align-items:stretch}
.story h2,.features h2,.info-panel h2{font-size:30px;margin:0 0 16px}
.story p{font-size:17px;margin:0;white-space:pre-line}
.photo-card{margin:0;border-radius:13px;overflow:hidden;min-height:350px}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:center}
blockquote{margin:0;background:#f5f7fb;border-radius:13px;padding:28px;display:flex;flex-direction:column;justify-content:center}
blockquote p{font-size:24px!important;line-height:1.5}
blockquote cite{font-style:normal;font-size:18px;margin-top:16px}.quote-mark{font-size:62px;color:#247dff;line-height:.6}
.features{padding-top:52px;padding-bottom:26px}
.feature-grid{max-width:1540px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.features>h2{max-width:1540px;margin:0 auto 18px}
.feature-grid article{border:1px solid #dfe5ee;border-radius:13px;padding:18px;min-height:150px;display:flex;gap:13px;background:#fff}
.feature-icon{width:43px;height:43px;border-radius:8px;background:#1e77ed;color:white;display:grid;place-items:center;font-weight:800;font-size:18px;flex:0 0 auto}
.feature-grid h3{margin:3px 0 9px;font-size:17px}.feature-grid p{margin:0;font-size:14px}
.lower-panels{padding-top:20px;padding-bottom:22px;display:grid;grid-template-columns:1.25fr .85fr;gap:20px}
.lower-panels>*{max-width:none}.info-panel{border-radius:13px;background:linear-gradient(125deg,#eef5ff,#dfeeff);padding:28px;min-height:250px}
.voice-panel{display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:center}
.info-panel p{margin:8px 0}.strong{font-weight:800}
.voice-disc{width:190px;height:190px;border-radius:50%;margin:auto;background:linear-gradient(145deg,#1057bb,#057dc5);display:flex;align-items:center;justify-content:center;gap:7px}
.voice-disc span{width:5px;border-radius:5px;background:white}.voice-disc span:nth-child(1),.voice-disc span:nth-child(7){height:24px}.voice-disc span:nth-child(2),.voice-disc span:nth-child(6){height:48px}.voice-disc span:nth-child(3),.voice-disc span:nth-child(5){height:75px}.voice-disc span:nth-child(4){height:105px}
.status-panel a{color:#006dea;font-weight:800}
.audio-player{margin-top:18px;background:#fff;border:1px solid #d7e0ed;border-radius:30px;padding:9px 14px;display:flex;align-items:center;gap:12px}
.mini-play{border:0;background:transparent;font-size:19px}.audio-copy{min-width:0;flex:1}.audio-copy strong{display:block;font-size:13px}
.progress-track{height:4px;background:#dfe5ee;border-radius:3px;overflow:hidden;margin-top:6px}.progress-track span{display:block;width:0;height:100%;background:#1677ff}.audio-copy small{font-size:11px}
.audio-message{font-size:13px;color:#b23b46;min-height:20px}
footer{background:#07111f}
.footer-inner{max-width:1540px;margin:auto;padding:23px 34px;display:grid;grid-template-columns:1fr .7fr 1.2fr;gap:30px;align-items:center}
.footer-person,.footer-email{display:flex;gap:14px;align-items:center}.footer-icon{font-size:36px}
.footer-inner small{display:block;color:#b7c0ce}.footer-legal{display:grid;gap:8px}
@media(max-width:1180px){
  .nav{gap:18px}.hero-inner{grid-template-columns:1fr}.app-demo{min-height:550px}.benefits{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr 1.3fr}.story-grid blockquote{grid-column:1/-1}.feature-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .topbar-inner{grid-template-columns:auto 1fr auto;padding:0 18px}.brand strong{font-size:24px}
  .nav-toggle{display:block;justify-self:end}.nav{position:absolute;left:0;right:0;top:77px;background:#07111f;display:none;flex-direction:column;gap:0;padding:14px 22px;border-bottom:1px solid #233047}.nav.open{display:flex}.nav a{width:100%;padding:13px}
  .language{grid-column:3}.hero-inner{padding:38px 18px}.app-demo{grid-template-columns:1fr}.demo-sidebar{display:none}.benefits{padding:0 18px 22px;grid-template-columns:1fr}.story,.features,.lower-panels{padding-left:18px;padding-right:18px}
  .story-grid{grid-template-columns:1fr}.photo-card{min-height:300px}.feature-grid{grid-template-columns:repeat(2,1fr)}.lower-panels{grid-template-columns:1fr}.voice-panel{grid-template-columns:1fr}.voice-disc{width:145px;height:145px}
  .footer-inner{padding:25px 18px;grid-template-columns:1fr}
}
@media(max-width:560px){
  .topbar-inner{gap:8px}.brand small{display:none}.brand-mark{width:38px;height:38px}.language-button{padding:0 9px}.language-button>span:first-child{display:none}
  .hero-copy h1{font-size:58px}.hero-copy h2{font-size:23px}.hero-copy>p{font-size:15px}.hero-actions>*{width:100%}
  .app-demo{min-height:500px}.demo-main{grid-template-rows:55px 1fr 73px}.demo-content{padding:20px 14px}.demo-content h3{font-size:27px}.demo-content>p{margin-bottom:24px}.shortcuts{grid-template-columns:1fr}.shortcuts button{min-height:66px;font-size:14px;padding:12px}.shortcut-icon{font-size:26px}
  .composer{margin:0 8px 8px;padding:6px;gap:6px}.round-button,.send-button{width:39px;height:39px;font-size:22px}.voice-button{padding:10px;font-size:13px}.composer-placeholder{font-size:13px}
  .feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:auto}.story h2,.features h2,.info-panel h2{font-size:26px}blockquote p{font-size:20px!important}
}
