html { scroll-behavior:smooth; }
body.about-page { background:#070b12; overflow-x:hidden; }

.about-header {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:78px;
  padding:14px clamp(20px,5vw,76px);
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(7,11,18,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.about-brand,.footer-brand { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.about-brand strong { display:block; font-size:16px; letter-spacing:-.015em; }
.about-brand small { display:block; margin-top:1px; color:#8f9db1; font-size:11px; }
.about-nav { display:flex; align-items:center; gap:24px; }
.about-nav a { color:#aeb9c9; font-size:13px; font-weight:720; text-decoration:none; transition:color .18s ease; }
.about-nav a:hover { color:#fff; }
.about-nav .about-nav-cta {
  min-height:40px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  color:#fff;
  background:#151f30;
}

.about-main { width:min(1240px,calc(100% - 36px)); margin:0 auto; }
.about-kicker,.section-kicker {
  color:#8db9ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.about-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(40px,6vw,86px);
  align-items:center;
  min-height:720px;
  padding:84px 0 94px;
}
.about-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:780px;
  height:780px;
  top:-210px;
  right:-280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(105,167,255,.18),rgba(109,79,255,.08) 38%,transparent 69%);
  filter:blur(2px);
}
.about-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:560px;
  height:560px;
  left:-300px;
  bottom:-220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,83,98,.12),transparent 67%);
}
.about-hero h1 {
  max-width:730px;
  margin:16px 0 24px;
  color:#fff;
  font-size:clamp(52px,6.6vw,91px);
  line-height:.95;
  letter-spacing:-.064em;
}
.about-hero h1 span {
  background:linear-gradient(92deg,#fff 5%,#8fbcff 52%,#ff8f9a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-hero-copy > p { max-width:670px; margin-bottom:28px; color:#aeb9c9; font-size:clamp(17px,1.55vw,20px); line-height:1.65; }
.about-actions { display:flex; flex-wrap:wrap; gap:11px; }
.about-primary,.about-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 21px;
  border-radius:14px;
  font-size:14px;
  font-weight:850;
  text-decoration:none;
  transition:transform .18s ease,filter .18s ease,border-color .18s ease;
}
.about-primary { color:#fff; background:linear-gradient(135deg,#ef5362,#9b5cff); box-shadow:0 18px 40px rgba(239,83,98,.19); }
.about-secondary { border:1px solid #2b3a50; color:#dce8f8; background:#101927; }
.about-primary:hover,.about-secondary:hover { transform:translateY(-2px); filter:brightness(1.06); }
.language-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.language-strip span { padding:7px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#9baabd; background:rgba(255,255,255,.035); font-size:11px; font-weight:720; }

.hero-product { position:relative; min-height:500px; display:flex; align-items:center; justify-content:center; }
.browser-shell {
  position:relative;
  width:min(100%,610px);
  overflow:hidden;
  border:1px solid rgba(156,183,226,.18);
  border-radius:25px;
  background:#0d1624;
  box-shadow:0 40px 110px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025) inset;
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.browser-top { display:flex; align-items:center; gap:7px; height:44px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.06); background:#101a29; }
.browser-top span { width:8px; height:8px; border-radius:50%; background:#3c4b60; }
.browser-top b { margin-left:8px; color:#77869a; font-size:10px; font-weight:700; }
.video-stage { position:relative; min-height:372px; padding:24px; background:linear-gradient(160deg,rgba(16,32,51,.35),rgba(3,8,14,.74)),radial-gradient(circle at 25% 30%,#2d4059 0,transparent 24%),radial-gradient(circle at 75% 42%,#301f37 0,transparent 20%),#050910; }
.video-stage::before { content:""; position:absolute; inset:20% 7% 18%; border-radius:22px; background:linear-gradient(130deg,rgba(255,255,255,.035),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.035); }
.stage-label { position:relative; z-index:2; color:#728196; font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.subtitle-stack { position:absolute; z-index:3; left:7%; right:7%; bottom:83px; display:grid; gap:8px; justify-items:center; }
.subtitle-line { width:max-content; max-width:95%; padding:9px 13px; border-radius:10px; text-align:center; color:#fff; font-size:15px; font-weight:780; box-shadow:0 7px 20px rgba(0,0,0,.25); }
.primary-sub { background:rgba(9,24,35,.82); }
.translated-sub { background:rgba(42,53,82,.86); color:#dfeaff; }
.stage-controls { position:absolute; z-index:3; left:20px; right:20px; bottom:20px; display:flex; gap:7px; justify-content:center; }
.stage-controls span { padding:7px 9px; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:#93a4b9; background:rgba(7,12,19,.72); font-size:10px; font-weight:750; }
.floating-card { position:absolute; z-index:5; width:210px; padding:15px 16px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(17,26,40,.92); box-shadow:0 24px 55px rgba(0,0,0,.38); backdrop-filter:blur(16px); }
.floating-card strong,.floating-card small { display:block; }
.floating-card strong { margin:5px 0 3px; color:#f8fbff; font-size:13px; }
.floating-card small { color:#8090a5; font-size:10px; line-height:1.45; }
.mini-label { color:#8db9ff; font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.request-preview { top:22px; right:-20px; }
.study-preview { left:-28px; bottom:22px; }

.about-intro { max-width:790px; margin:76px auto 45px; text-align:center; }
.about-intro h2,.process-heading h2,.study-showcase h2,.audience-section h2,.about-cta h2 { margin:10px 0 14px; font-size:clamp(36px,4.5vw,61px); line-height:1.03; letter-spacing:-.045em; }
.about-intro p { color:#9dabbe; font-size:17px; }
.use-case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:110px; }
.use-case-card { position:relative; overflow:hidden; min-height:640px; padding:clamp(28px,4vw,48px); border:1px solid #22324a; border-radius:30px; background:#0c1421; }
.use-case-card::before { content:""; position:absolute; width:430px; height:430px; right:-210px; top:-230px; border-radius:50%; pointer-events:none; }
.watch-card::before { background:radial-gradient(circle,rgba(105,167,255,.19),transparent 67%); }
.learn-card::before { background:radial-gradient(circle,rgba(239,83,98,.16),transparent 67%); }
.use-case-number { position:absolute; right:30px; top:24px; color:rgba(255,255,255,.09); font-size:76px; font-weight:900; letter-spacing:-.07em; }
.use-case-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:28px; border-radius:16px; color:#fff; background:linear-gradient(145deg,#304c70,#202d47); box-shadow:0 12px 30px rgba(0,0,0,.23); font-size:14px; font-weight:900; }
.learn-card .use-case-icon { background:linear-gradient(145deg,#7b4352,#493056); }
.use-case-card h2 { max-width:470px; margin-bottom:15px; font-size:clamp(33px,3.7vw,52px); line-height:1.02; letter-spacing:-.045em; }
.use-case-lead { max-width:520px; color:#aeb9c9; font-size:16px; }
.feature-list { display:grid; gap:0; margin-top:28px; border-top:1px solid rgba(255,255,255,.07); }
.feature-list > div { display:grid; gap:5px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.feature-list b { color:#f2f6fc; font-size:14px; }
.feature-list span { max-width:540px; color:#8391a5; font-size:12px; line-height:1.55; }
.inline-cta { display:inline-flex; gap:8px; margin-top:26px; color:#9ec5ff; font-size:13px; font-weight:850; text-decoration:none; }
.learn-card .inline-cta { color:#ff9ba4; }

.process-section { margin:0 0 120px; padding:clamp(34px,5vw,64px); border:1px solid #213047; border-radius:32px; background:linear-gradient(160deg,#101a29,#0a111d); }
.process-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:end; margin-bottom:42px; }
.process-heading p { margin:0; color:#92a1b5; font-size:15px; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.process-grid article { padding:24px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.025); }
.process-grid article > span { display:grid; place-items:center; width:34px; height:34px; margin-bottom:40px; border-radius:50%; color:#cfe1ff; background:#1c3150; font-size:12px; font-weight:900; }
.process-grid h3 { margin-bottom:8px; color:#f6f9fd; font-size:18px; }
.process-grid p { margin:0; color:#8594a8; font-size:13px; }

.study-showcase { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(46px,7vw,90px); align-items:center; margin:0 0 130px; padding:12px 3vw; }
.study-copy > p { max-width:590px; color:#9ba9ba; font-size:16px; }
.study-copy ul { display:grid; gap:12px; margin:27px 0 0; padding:0; list-style:none; }
.study-copy li { position:relative; padding-left:27px; color:#d3dce8; font-size:13px; }
.study-copy li::before { content:"✓"; position:absolute; left:0; top:-1px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#08131a; background:#69d6bc; font-size:10px; font-weight:950; }
.study-device { padding:20px; border:1px solid #26354d; border-radius:29px; background:linear-gradient(180deg,#111b2a,#0b1320); box-shadow:0 36px 100px rgba(0,0,0,.38); }
.study-device-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:4px 3px 18px; }
.study-device-head span { color:#8eb6f0; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.study-device-head strong { color:#fff; font-size:17px; }
.study-device-head em { color:#718299; font-size:10px; font-style:normal; }
.saved-line { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; margin-bottom:8px; padding:15px; border:1px solid rgba(255,255,255,.065); border-radius:15px; background:#0b1421; }
.saved-line.active { border-color:rgba(105,198,170,.29); background:linear-gradient(90deg,rgba(69,198,170,.10),#0b1421); }
.saved-line small { color:#667891; font-size:10px; }
.saved-line p { margin:0; color:#e8edf5; font-size:13px; font-weight:680; }
.saved-line > span { color:#75879e; font-size:9px; font-weight:820; text-transform:uppercase; }
.saved-line.active > span { color:#69d6bc; }
.study-controls { display:grid; grid-template-columns:90px 1fr 1.2fr; gap:8px; margin-top:16px; }
.study-controls button { min-height:40px; padding:8px; border:1px solid #2c3d57; border-radius:10px; color:#d9e6f8; background:#17243a; box-shadow:none; cursor:default; font-size:11px; }
.vocab-chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.vocab-chip-row span { padding:7px 9px; border-radius:8px; color:#f1d2d6; background:rgba(239,83,98,.10); font-size:10px; font-weight:760; }

.audience-section { margin-bottom:120px; text-align:center; }
.audience-section > h2 { max-width:850px; margin-left:auto; margin-right:auto; }
.audience-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:38px; text-align:left; }
.audience-grid article { min-height:185px; padding:22px; border:1px solid #1f2e44; border-radius:20px; background:#0c1420; }
.audience-grid strong { color:#f1f5fb; font-size:14px; }
.audience-grid p { margin:10px 0 0; color:#8190a4; font-size:12px; }

.about-cta { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:32px; padding:clamp(34px,5vw,60px); overflow:hidden; border:1px solid rgba(239,83,98,.19); border-radius:32px; background:radial-gradient(circle at 88% 20%,rgba(145,91,255,.18),transparent 26rem),radial-gradient(circle at 18% 100%,rgba(239,83,98,.14),transparent 25rem),#0d1522; }
.about-cta h2 { max-width:820px; font-size:clamp(34px,4vw,55px); }
.about-cta p { max-width:760px; margin:0; color:#9eacbd; }
.cta-actions { justify-content:flex-end; }
.independence-note { max-width:860px; margin:0 auto 80px; color:#66758a; text-align:center; font-size:10px; line-height:1.6; }

.about-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:25px 0 34px; border-top:1px solid rgba(255,255,255,.06); color:#617086; font-size:11px; }
.footer-brand .logo { width:32px; height:32px; border-radius:10px; font-size:10px; }
.footer-brand strong { color:#b8c4d3; font-size:12px; }
.about-footer > div { display:flex; gap:18px; }
.about-footer a { color:#77869b; text-decoration:none; }
.about-footer > span { text-align:right; }

@media (max-width:1000px) {
  .about-nav > a:not(.about-nav-cta) { display:none; }
  .about-hero { grid-template-columns:1fr; min-height:auto; padding-top:64px; }
  .about-hero-copy { max-width:780px; }
  .hero-product { width:min(760px,100%); margin:0 auto; }
  .use-case-grid { grid-template-columns:1fr; }
  .use-case-card { min-height:auto; }
  .study-showcase { grid-template-columns:1fr; }
  .study-copy { max-width:760px; }
  .audience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-cta { grid-template-columns:1fr; }
  .cta-actions { justify-content:flex-start; }
}

@media (max-width:760px) {
  .about-header { min-height:68px; padding:11px 14px; }
  .about-brand small { display:none; }
  .about-nav-cta { padding:9px 11px !important; font-size:11px !important; }
  .about-main { width:min(100% - 24px,1240px); }
  .about-hero { gap:36px; padding:50px 0 68px; }
  .about-hero h1 { font-size:clamp(46px,13.2vw,68px); }
  .about-hero-copy > p { font-size:16px; }
  .hero-product { min-height:390px; }
  .browser-shell { border-radius:19px; transform:none; }
  .video-stage { min-height:320px; }
  .request-preview { right:-6px; top:4px; }
  .study-preview { left:-5px; bottom:3px; }
  .floating-card { width:178px; padding:12px; }
  .about-intro { margin-top:50px; }
  .use-case-grid { margin-bottom:76px; }
  .use-case-card { padding:28px 22px; border-radius:23px; }
  .use-case-number { right:20px; font-size:60px; }
  .process-section { margin-bottom:82px; padding:27px 21px; border-radius:24px; }
  .process-heading { grid-template-columns:1fr; gap:12px; margin-bottom:28px; }
  .process-grid { grid-template-columns:1fr; }
  .process-grid article > span { margin-bottom:20px; }
  .study-showcase { margin-bottom:90px; padding:0; }
  .study-device { padding:14px; border-radius:22px; }
  .saved-line { grid-template-columns:44px 1fr; }
  .saved-line > span { display:none; }
  .study-controls { grid-template-columns:repeat(3,1fr); }
  .audience-section { margin-bottom:82px; }
  .audience-grid { grid-template-columns:1fr; }
  .audience-grid article { min-height:auto; }
  .about-cta { padding:28px 22px; border-radius:24px; }
  .about-footer { grid-template-columns:1fr; text-align:left; }
  .about-footer > div { flex-wrap:wrap; }
  .about-footer > span { text-align:left; }
}

@media (max-width:480px) {
  .about-brand strong { font-size:14px; }
  .about-header .logo { width:38px; height:38px; }
  .about-nav-cta { min-height:36px; }
  .about-hero h1 { letter-spacing:-.055em; }
  .about-actions { display:grid; grid-template-columns:1fr; }
  .about-primary,.about-secondary { width:100%; }
  .hero-product { min-height:330px; }
  .video-stage { min-height:270px; padding:18px; }
  .subtitle-line { font-size:12px; }
  .stage-controls { left:10px; right:10px; bottom:12px; }
  .stage-controls span:nth-child(4) { display:none; }
  .floating-card { width:155px; }
  .request-preview { right:-2px; top:0; }
  .study-preview { left:-2px; bottom:-5px; }
  .study-controls { grid-template-columns:1fr; }
}