/* ============================================================================
   subtitling.css, Screens service page (Subtitling)
   Reuses tokens, nav, buttons + footer from home.css / home-sections.css.
   Only page-specific sections live here.
   ========================================================================= */

/* reveal-on-scroll (self-contained) ------------------------------------- */
.s-rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.s-rv.in{opacity:1; transform:none;}
.s-rv.d1{transition-delay:.08s;} .s-rv.d2{transition-delay:.16s;} .s-rv.d3{transition-delay:.24s;} .s-rv.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){ .s-rv{opacity:1; transform:none; transition:none;} }

.mono{font-family:'DM Sans', ui-monospace, monospace; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;}
.svc-section{padding:110px 0;}
.svc-section .wrap{max-width:min(1360px,92vw);}
.svc-head{max-width:760px; margin:0 auto 64px; text-align:center;}
.svc-head .mono{color:var(--blue); display:block; margin-bottom:16px;}
.svc-head h2{font-size:clamp(32px,3.6vw,52px); font-weight:800; line-height:1.06;}
.svc-head p{margin-top:20px; font-size:18px; line-height:1.6; color:var(--muted);}
.soft-bg{background:var(--soft);}

/* ── HERO (dark) ────────────────────────────────────────────────────────── */
.svc-hero{position:relative; overflow:hidden; color:#fff;
  margin-top:calc(-1 * var(--nav-h)); padding:calc(var(--nav-h) + 72px) 0 96px;
  background:radial-gradient(120% 120% at 82% 30%, #12244a 0%, #0A152D 46%, #060d1c 100%);}
.svc-hero::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(127,178,255,.10) 1px, transparent 1px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent 78%);
  mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent 78%); opacity:.8; pointer-events:none;}

/* ── folded client-constellation rings (subtle hero background) ─────────── */
.svc-hero::after{content:""; position:absolute; z-index:1; pointer-events:none;
  width:min(880px,84%); aspect-ratio:1/1; inset-inline-end:-12%; top:50%; translate:0 -50%;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20600%20600'%3E%3Cg%20fill%3D'none'%20stroke%3D'rgb(127%2C178%2C255)'%20stroke-opacity%3D'0.22'%20stroke-width%3D'1'%20stroke-dasharray%3D'2%207'%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'150'%2F%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'212'%2F%3E%3Ccircle%20cx%3D'300'%20cy%3D'300'%20r%3D'276'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'rgb(91%2C163%2C255)'%3E%3Ccircle%20cx%3D'430'%20cy%3D'375'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'195'%20cy%3D'482'%20r%3D'2.4'%20opacity%3D'0.7'%2F%3E%3Ccircle%20cx%3D'42'%20cy%3D'206'%20r%3D'3.4'%2F%3E%3Ccircle%20cx%3D'249'%20cy%3D'159'%20r%3D'2'%20opacity%3D'0.6'%2F%3E%3Ccircle%20cx%3D'511'%20cy%3D'123'%20r%3D'2.6'%20opacity%3D'0.8'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'497'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'118'%20cy%3D'360'%20r%3D'2'%20opacity%3D'0.6'%2F%3E%3Ccircle%20cx%3D'486'%20cy%3D'404'%20r%3D'2.4'%20opacity%3D'0.75'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.55;
  -webkit-mask-image:radial-gradient(58% 58% at 56% 50%, #000 50%, transparent 80%);
  mask-image:radial-gradient(58% 58% at 56% 50%, #000 50%, transparent 80%);}
@media (prefers-reduced-motion: no-preference){
  .svc-hero::after{animation:svcRingsSpin 140s linear infinite;}
  @keyframes svcRingsSpin{to{transform:rotate(360deg);}}
}

.svc-hero .wrap{position:relative; z-index:2;}
.svc-hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:64px; align-items:center;}

.crumb{display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(224,231,242,.6); margin-bottom:26px;}
.crumb a{color:rgba(224,231,242,.72); text-decoration:none; transition:color .18s;}
.crumb a:hover{color:#fff;}
.crumb .sep{opacity:.4;}
.crumb .cur{color:#fff;}

.svc-eyebrow{display:inline-flex; align-items:center; gap:9px; color:var(--blue-light); margin-bottom:22px;}
.svc-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-light); box-shadow:0 0 0 4px rgba(91,163,255,.18);}
.svc-hero h1{font-size:clamp(48px,6vw,84px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#F4F7FC;}
.svc-hero .tag{margin-top:16px; font-size:clamp(19px,1.7vw,24px); font-weight:600; color:var(--blue-light); letter-spacing:-.01em;}
.svc-hero .lead{margin-top:24px; max-width:60ch; font-size:17px; line-height:1.68; color:rgba(224,231,242,.76);}
.svc-hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.btn-lg{display:inline-flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
  border-radius:999px; padding:16px 30px; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;}
.btn-lg svg{width:17px; height:17px; transition:transform .2s ease;}
.btn-lg:hover svg{transform:translateX(3px);}
.btn-fill{background:var(--blue); color:#fff;}
.btn-fill:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(47,107,255,.4);}
.btn-line{background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.24);}
.btn-line:hover{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12);}

/* hero image with subtitle-bar motif */
.svc-hero-media{position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); aspect-ratio:4/3.1;}
.svc-hero-media img{width:100%; height:100%; object-fit:cover;}
.svc-hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(6,13,28,.78) 100%);}
.sub-bar{position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:26px; z-index:2; display:flex; justify-content:center; padding:0 24px;}
.sub-bar span{font-family:'DM Sans',sans-serif; font-weight:600; font-size:clamp(15px,1.5vw,19px); color:#fff;
  background:rgba(4,8,18,.62); padding:9px 18px; border-radius:8px; backdrop-filter:blur(3px); text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4); text-shadow:0 1px 3px rgba(0,0,0,.6);}
.sub-bar span b{color:var(--blue-light); font-weight:700;}

/* stat row */
.svc-stats{position:relative; z-index:2; margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden;}
.svc-stat{background:rgba(9,17,37,.5); padding:30px 28px;}
.svc-stat .n{font-family:'DM Sans',sans-serif; font-size:clamp(30px,3.4vw,44px); font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1;}
.svc-stat .n b{color:var(--blue-light); font-weight:800;}
.svc-stat .l{margin-top:10px; font-size:13.5px; color:rgba(224,231,242,.62); line-height:1.4;}

/* ── PILLARS ────────────────────────────────────────────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.pillar{background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 30px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s;}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#CFE0FF;}
.pillar .ico{width:46px; height:46px; border-radius:12px; background:var(--soft-2); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.pillar .ico svg{width:23px; height:23px;}
.pillar h3{font-size:18px; font-family:'DM Sans',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); line-height:1.3;}
.pillar p{margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted);}

/* ── CAPABILITIES ───────────────────────────────────────────────────────── */
.caps{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;}
.cap{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; transition:transform .28s ease, box-shadow .28s ease;}
.cap:hover{transform:translateY(-5px); box-shadow:0 30px 64px -26px rgba(30,58,138,.55);}
.cap-media{position:relative; aspect-ratio:16/10; overflow:hidden; flex:1 0 auto;}
.cap-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s ease;}
.cap:hover .cap-media img{transform:scale(1.06);}
/* white caption strip: eyebrow + title + sub on the left, Learn more button on the right */
.cap-caption{background:#fff; padding:16px 24px; color:#0C1428; border-top:1px solid rgba(15,30,60,.08); display:flex; align-items:center; justify-content:space-between; gap:22px;}
.cap-caption .cap-caption-text{min-width:0;}
.cap-caption .cap-label{display:inline-block; font-family:'DM Sans',ui-monospace,monospace; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#2F6BFF;}
.cap-caption .cap-title{font-family:'DM Sans',system-ui,sans-serif; font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.22; color:#0C1428; margin-top:4px;}
.cap-caption .cap-sub{margin-top:4px; font-size:14px; line-height:1.5; color:#5A6678;}
.cap-caption .cap-more{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; background:#2F6BFF; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; flex-shrink:0; white-space:nowrap; text-decoration:none; transition:background .2s ease;}
.cap-more svg{width:14px; height:14px; transition:transform .2s ease;}
.cap:hover .cap-more{background:#1E3A8A;}
.cap:hover .cap-more svg{transform:translateX(3px);}
/* featured spans full width, image on top with a slim caption */
.cap.feat{grid-column:1 / -1;}
.cap.feat .cap-media{aspect-ratio:2.7/1;}
.cap.feat .cap-title{font-size:clamp(21px,1.9vw,26px);}
.cap.span3{grid-column:span 3;}
.cap.span2{grid-column:span 2;}

/* ── PROCESS ────────────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0;}
.step{position:relative; padding:0 22px;}
.step:not(:last-child)::after{content:""; position:absolute; top:23px; inset-inline-start:calc(50% + 26px); inset-inline-end:calc(-50% + 26px); height:2px;
  background:linear-gradient(to right,var(--blue-light),rgba(91,163,255,.25)); }
.step .num{position:relative; width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--blue); color:var(--blue);
  font-family:'DM Sans',sans-serif; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; z-index:2;}
.step h4{margin-top:22px; font-size:17px; font-weight:700; letter-spacing:-.01em;}
.step p{margin-top:9px; font-size:14px; line-height:1.55; color:var(--muted);}

/* ── LANGUAGES ──────────────────────────────────────────────────────────── */
.lang-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
.lang-copy .mono{color:var(--blue); display:block; margin-bottom:16px;}
.lang-copy h2{font-size:clamp(30px,3.2vw,46px); font-weight:800; line-height:1.08;}
.lang-copy p{margin-top:20px; font-size:16.5px; line-height:1.68; color:var(--muted);}
.lang-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.lang-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s;}
.lang-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#CFE0FF;}
.lang-card .en{font-size:16px; font-weight:700; color:var(--ink);}
.lang-card .nat{margin-top:5px; font-size:14px; color:var(--muted);}
.lang-more{grid-column:span 3; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px;
  border:1px solid var(--line-2); border-radius:14px; color:var(--muted); font-size:14px; font-weight:600;}

/* ── FINAL CTA headline tweak inherits home-sections.css ─────────────────── */

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .svc-hero-grid{grid-template-columns:1fr; gap:44px;}
  .svc-hero-media{max-width:560px;}
  .caps{grid-template-columns:repeat(4,1fr);}
  .cap.span3{grid-column:span 2;}
  .cap.span2{grid-column:span 2;}
  .lang-split{grid-template-columns:1fr; gap:40px;}
}
@media (max-width:820px){
  .svc-section{padding:78px 0;}
  .svc-stats{grid-template-columns:repeat(2,1fr);}
  .pillars{grid-template-columns:1fr 1fr;}
  .cap.feat .cap-media{aspect-ratio:16/10;}
  .steps{grid-template-columns:1fr 1fr; gap:36px 0;}
  .step::after{display:none !important;}
}
@media (max-width:560px){
  .svc-hero{padding:calc(var(--nav-h) + 44px) 0 68px;}
  .svc-stats{grid-template-columns:1fr 1fr;}
  .pillars{display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding:4px var(--pad) 10px;}
  .pillars::-webkit-scrollbar{display:none;}
  .pillar{flex:0 0 82%; min-width:0; scroll-snap-align:center;}
  .caps{display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding:4px var(--pad) 10px;}
  .caps::-webkit-scrollbar{display:none;}
  .cap, .cap.feat, .cap.span3, .cap.span2{flex:0 0 82%; min-width:0; scroll-snap-align:center; grid-column:auto;}
  .cap-caption{flex-direction:column; align-items:center; text-align:center; gap:14px; padding:18px 20px 22px;}
  .cap-caption .cap-more{align-self:center;}
  .lang-grid{grid-template-columns:1fr 1fr;}
  .lang-more{grid-column:span 2;}
  .steps{grid-template-columns:1fr;}
}