:root {
  /* PierSight palette: assets/styles/base/_variables.scss in piersight-web. */
  --bg: #0D2324;
  --bg-rgb: 13, 35, 36;
  --surface: #133234;
  --accent: #69AFB7;
  --accent-rgb: 105, 175, 183;
  --accent-light: #AEDADE;
  --white: #F7F8F9;
  --text: #D2EBEC;
  --muted: #BCC5CB;
  --border: rgba(188, 197, 203, .24);
}
* { box-sizing: border-box; }
::selection { background: var(--accent); color: var(--bg); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
html, body { min-height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  overflow-x: hidden;
}
.landing {
  position: relative; min-height: 100svh; isolation: isolate;
  overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(24px, 4.7vw, 78px) clamp(24px, 5vw, 84px) 28px;
}
.hero-art {
  position: absolute; z-index: -4; inset: 0;
  background-image: url("assets/sar-india-hero.png");
  background-size: cover; background-position: center center;
  filter: saturate(.65);
  transform: scale(1.025); animation: reveal 1.2s ease-out both;
}
.vignette {
  position: absolute; z-index: -3; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb),.98) 0%, rgba(var(--bg-rgb),.88) 25%, rgba(var(--bg-rgb),.35) 49%, rgba(var(--bg-rgb),.04) 100%),
    linear-gradient(0deg, rgba(var(--bg-rgb),.4), transparent 28%, rgba(var(--bg-rgb),.18));
}
.scan-grid {
  pointer-events: none; position: absolute; z-index: -2; inset: 0; opacity: .09;
  background-image: linear-gradient(rgba(var(--accent-rgb),.15) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),.15) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
}
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.wordmark { color:inherit; text-decoration:none; display:flex; align-items:center; gap:17px; font-family:"Space Grotesk",sans-serif; }
.wordmark-sar { font-size:clamp(29px,3vw,42px); letter-spacing:.12em; font-weight:600; }
.accent-a { color:var(--accent); }
.wordmark-divider { height:31px; width:1px; background:rgba(255,255,255,.55); }
.wordmark-india { font-size:clamp(17px,1.8vw,25px); letter-spacing:.28em; font-weight:400; }
.top-meta { color:var(--text); font-size:10px; letter-spacing:.25em; display:flex; align-items:center; gap:16px; white-space:nowrap; }
.top-meta i { width:3px; height:3px; border-radius:50%; background:var(--accent); display:inline-block; }
.content { width:min(610px, 53vw); margin-top:clamp(105px, 15vh, 180px); animation: rise .8s .15s ease-out both; }
.eyebrow { color:var(--text); font-size:clamp(10px, .9vw, 13px); letter-spacing:.36em; margin:0 0 25px; display:flex; align-items:center; gap:12px; }
.status-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 12px var(--accent); }
h1 { margin:0; font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:clamp(33px,4.15vw,55px); letter-spacing:.085em; line-height:1.05; white-space:nowrap; }
h1 span { color:var(--accent-light); }
.intro { color:var(--text); font-size:clamp(15px,1.25vw,19px); line-height:1.7; margin:22px 0 0; max-width:490px; }
.accent-rule { width:42px; height:2px; background:var(--accent); margin:31px 0 36px; box-shadow:0 0 16px rgba(var(--accent-rgb),.3); }
.capabilities { display:grid; grid-template-columns:repeat(4, minmax(85px, 1fr)); max-width:510px; }
.capability { min-height:65px; padding:0 16px; border-left:1px solid var(--border); display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.capability:first-child { padding-left:0; border-left:0; }
.capability svg { width:24px; height:24px; fill:none; stroke:var(--accent-light); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.capability span { font-size:9px; line-height:1.45; letter-spacing:.06em; color:var(--text); }
.orbital-coordinate { position:absolute; right:5vw; color:var(--muted); font:9px "Space Grotesk",sans-serif; letter-spacing:.18em; }
.orbital-coordinate span { color:var(--accent); }
.coordinate-one { bottom:20%; }
.coordinate-two { bottom:16%; }
.footer { margin-top:auto; padding-top:42px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:9px; letter-spacing:.2em; }
.footer-brand { display:flex; align-items:center; gap:16px; }
.footer-brand span { width:34px; height:1px; background:var(--muted); }
.footer p { margin:0; color:var(--text); }
.footer b { color:var(--accent); font-weight:500; }
.corner { position:absolute; width:18px; height:18px; opacity:.6; pointer-events:none; }
.corner-tl { top:14px; left:14px; border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
.corner-br { right:14px; bottom:14px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal { from { opacity:.45; transform:scale(1.06); } to { opacity:1; transform:scale(1.025); } }
@media (prefers-reduced-motion: no-preference) {
  .topbar { animation: rise .8s ease-out both; }
  .footer { animation: rise .8s .6s ease-out both; }
  .accent-rule { transform-origin: left; animation: rule-in .8s .5s ease-out both; }
  .capability { animation: rise .65s .55s ease-out both; }
  .capability:nth-child(2) { animation-delay: .68s; }
  .capability:nth-child(3) { animation-delay: .81s; }
  .capability:nth-child(4) { animation-delay: .94s; }
  .status-dot { position: relative; }
  .status-dot::after {
    content: ""; position: absolute; inset: -4px;
    border: 1px solid var(--accent); border-radius: 50%;
    animation: signal-pulse 3.6s ease-out infinite;
  }
  .landing::before, .landing::after {
    content: ""; position: absolute; pointer-events: none; z-index: -1;
  }
  .landing::before {
    width: min(68vw, 900px); aspect-ratio: 1; right: -6%; top: 16%;
    border-radius: 50%; opacity: .2;
    background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(var(--accent-rgb), .32) 350deg, transparent 360deg);
    mask-image: radial-gradient(circle, transparent 20%, #000 50%, transparent 71%);
    animation: radar-sweep 24s linear infinite;
  }
  .landing::after {
    width: 48vw; height: 48vw; right: 5%; top: 24%; opacity: .12;
    background: radial-gradient(ellipse, rgba(var(--accent-rgb), .5), transparent 65%);
    animation: orbital-glow 12s ease-in-out infinite alternate;
  }
  .capability svg { transition: transform .25s ease, stroke .25s ease; }
  .capability:hover svg { transform: translateY(-3px); stroke: var(--white); }
  .motion-paused *, .motion-paused::before, .motion-paused::after,
  .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes signal-pulse { 0% { transform: scale(.5); opacity: .65; } 75%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes orbital-glow { from { transform: translate3d(-2%, 2%, 0) scale(.94); opacity: .08; } to { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: .18; } }
@media (min-width: 1500px) { .content { margin-top:17vh; } }
@media (max-width: 900px) {
  .landing { padding:28px 28px 22px; min-height:100svh; }
  .hero-art { background-position:58% center; }
  .vignette { background:linear-gradient(90deg,rgba(var(--bg-rgb),.96),rgba(var(--bg-rgb),.75) 47%,rgba(var(--bg-rgb),.2)),linear-gradient(0deg,rgba(var(--bg-rgb),.55),transparent 55%); }
  .content { width:min(600px, 85vw); margin-top:clamp(100px,17vh,160px); }
  .top-meta { font-size:8px; gap:9px; letter-spacing:.14em; }
  .orbital-coordinate { display:none; }
}
@media (max-width: 560px) {
  .landing { padding:25px 22px 20px; }
  .hero-art { background-position:61% center; opacity:.75; }
  .vignette { background:linear-gradient(90deg,rgba(var(--bg-rgb),.94),rgba(var(--bg-rgb),.7)),linear-gradient(0deg,rgba(var(--bg-rgb),.8),transparent 75%); }
  .topbar { align-items:flex-start; }
  .wordmark { gap:10px; }
  .wordmark-sar { font-size:26px; }
  .wordmark-divider { height:23px; }
  .wordmark-india { font-size:15px; letter-spacing:.2em; }
  .top-meta { display:none; }
  .content { width:100%; margin-top:clamp(110px,18vh,170px); }
  .eyebrow { font-size:9px; letter-spacing:.2em; margin-bottom:20px; }
  h1 { font-size:clamp(37px, 10.2vw, 54px); letter-spacing:.045em; }
  .intro { font-size:15px; line-height:1.65; max-width:330px; }
  .desktop-break { display:none; }
  .accent-rule { margin:26px 0 28px; }
  .capabilities { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:22px; max-width:340px; }
  .capability { padding-left:15px; min-height:55px; }
  .capability:nth-child(3) { border-left:0; padding-left:0; }
  .capability span { font-size:9px; }
  .footer { padding-top:35px; font-size:8px; letter-spacing:.12em; }
  .footer p { max-width:130px; text-align:right; line-height:1.7; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}