@font-face {
  font-family: Rajdhani;
  src: url('/assets/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #20262C;
  --raised: #292F35;
  --ink: #F3F5F7;
  --muted: #B0BAC6;
  --accent: #17C964;
  --accent-hover: #46E48B;
  --accent-ink: #000000;
  --green-dark: #203D30;
  --gutter: clamp(24px, 3.3vw, 64px);
  --small: 14px;
  --body: 17px;
  --heading: 28px;
  --title: clamp(44px, 4.6vw, 72px);
  --hero: clamp(78px, 7.8vw, 128px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --duration: 800ms;
  --cut: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 35px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
main { overflow: clip; }
body:has(dialog[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 6px; }
a, button { transition: transform 240ms var(--ease-out), color 180ms ease, background-color 180ms ease; }
a:hover { color: var(--accent-hover); }
img { display: block; width: 100%; height: auto; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Rajdhani, Arial, sans-serif; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--hero); letter-spacing: -.045em; line-height: .94; }
h2 { font-size: var(--title); letter-spacing: -.035em; line-height: 1.02; }
h3 { font-size: var(--heading); letter-spacing: -.02em; line-height: 1.14; }
p { font-size: var(--body); line-height: 1.65; text-wrap: pretty; }
.frame { width: calc(100% - var(--gutter) * 2); max-width: 1600px; margin-inline: auto; }
.section { padding-block: clamp(100px, 10vw, 160px); }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 24px; padding: 16px 22px; background: var(--accent); color: var(--accent-ink); }
.skip-link:focus { top: 16px; }
.site-header { position: absolute; top: 0; inset-inline: 0; height: 98px; display: flex; align-items: center; gap: 30px; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: Rajdhani, Arial, sans-serif; font-size: var(--heading); font-weight: 600; white-space: nowrap; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.site-header nav { display: flex; gap: clamp(20px, 2.4vw, 40px); margin-left: auto; }
.site-header nav a { font-size: 16px; min-height: 44px; display: flex; align-items: center; }
.action { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 58px; padding: 16px 25px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; clip-path: var(--cut); }
.action svg { width: 24px; height: 24px; transition: transform 250ms var(--ease-out); }
.action:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-3px); }
.action:hover svg { transform: translateX(4px); }
.action:active { transform: translateY(0) scale(.98); }
.quiet-link { display: inline-block; font-size: 16px; padding-block: 12px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hero { position: relative; isolation: isolate; }
.hero-layout { position: relative; min-height: 100svh; padding-block: 100px 34px; display: grid; grid-template-columns: .88fr 1.12fr; grid-template-rows: 1fr auto; align-items: center; }
.hero-copy { position: relative; z-index: 3; padding-block: 45px; }
.headline-line { display: block; overflow: clip; padding-bottom: .13em; margin-bottom: -.13em; }
.headline-line > span { display: block; }
.hero-description { max-width: 380px; margin-top: 36px; }
.hero .action { margin-top: 32px; }
.hero-availability { font-size: var(--small); color: var(--muted); margin-top: 22px; }
.hero-art { position: relative; width: calc(100% + 250px); height: min(80svh, 850px); margin-left: -135px; z-index: 2; transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0); transition: transform 1.4s var(--ease-out); }
.hero-screens { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }
.hero-screens:focus-visible { outline-offset: -25px; }
.hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 1600ms ease, transform 1600ms var(--ease-out); pointer-events: none; }
.hero-shot.is-active { opacity: 1; transform: translateY(0) scale(1.17); }
.hero-platforms { grid-column: 1; position: relative; z-index: 3; font-size: var(--small); color: var(--muted); }
.hero-next { grid-column: 2; justify-self: end; width: 54px; height: 54px; display: grid; place-items: center; background: var(--surface); clip-path: var(--cut); }
.hero-next svg { width: 24px; height: 24px; }
.hero-next:hover { transform: translateY(4px); }
.image-open { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 65px; }
.section-intro > p { max-width: 470px; margin-bottom: 5px; justify-self: end; }
.drill-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.drill-explorer { min-width: 0; }
.drill-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-tab { border: 0; background: var(--surface); padding: 17px 20px; min-height: 54px; font-size: 16px; }
.drill-tab[aria-selected='true'] { background: var(--accent); color: var(--accent-ink); }
.drill-tab:hover { transform: translateY(-3px); background: var(--raised); color: var(--ink); }
.drill-tab[aria-selected='true']:hover { background: var(--accent-hover); color: var(--accent-ink); }
.drill-tab:active { transform: translateY(0); }
.drill-detail { margin-top: 12px; background: var(--surface); padding: clamp(24px, 3vw, 42px); clip-path: var(--cut); }
.drill-detail h3 { margin-bottom: 18px; }
.drill-description { color: var(--muted); margin-bottom: 24px; }
.drill-detail-copy { min-height: 300px; }
.drill-settings { display: flex; gap: 45px; margin: 35px 0 0; }
.drill-settings dt { font-size: var(--small); color: var(--muted); }
.drill-settings dd { margin: 8px 0 0; font-family: Rajdhani, Arial, sans-serif; font-weight: 600; font-size: 38px; line-height: 1.15; }
.setup-note { font-size: var(--small); color: var(--muted); margin-top: 30px; }
.drill-art { position: relative; isolation: isolate; height: 660px; transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0); transition: transform 1.4s var(--ease-out); }
.drill-image { display: block; position: absolute; inset: -25px -190px; }
.drill-image img { width: 100%; height: 100%; object-fit: contain; }
.showcase { position: relative; isolation: isolate; }
.showcase-intro { display: flex; justify-content: space-between; gap: 65px; align-items: end; }
.showcase-intro > p { max-width: 420px; margin-bottom: 5px; }
.overview-image { position: relative; z-index: 1; display: block; width: min(1400px, 110%); margin: -30px auto -5px; }
.overview-image img { width: 100%; }
.feature-explanations { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 130px); position: relative; z-index: 2; }
.feature-explanations article { max-width: 520px; }
.feature-explanations h3 { margin-bottom: 23px; }
.local-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(65px, 12vw, 180px); }
.local-copy > p { margin-top: 32px; max-width: 520px; }
.local-details { display: flex; flex-direction: column; justify-content: space-between; gap: 42px; padding-top: 6px; }
.local-details h3 { margin-bottom: 16px; }
.faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px, 7vw, 110px); }
.faq-intro { align-self: start; position: sticky; top: 50px; }
.faq-intro p { max-width: 290px; margin: 28px 0 18px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--surface); clip-path: var(--cut); transition: background-color 200ms ease; }
.faq-list details[open] { background: var(--raised); }
.faq-list summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 26px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.45; min-height: 82px; }
summary::-webkit-details-marker { display: none; }
.expand-mark { display: block; position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.expand-mark::before, .expand-mark::after { content: ''; position: absolute; inset: 8px 0 auto; background: currentColor; height: 2px; transition: transform 240ms var(--ease-out); }
.expand-mark::after { transform: rotate(90deg); }
details[open] .expand-mark::after { transform: rotate(0); }
.answer { padding: 0 26px 28px; max-width: 650px; }
.answer p { font-size: 16px; }
.site-footer { position: relative; isolation: isolate; padding-top: 110px; padding-bottom: 34px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.footer-bottom .brand { font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: var(--small); }
.footer-bottom .brand img { width: 36px; height: 36px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 25px; }
.footer-bottom nav a { font-size: var(--small); padding-block: 14px; }
#image-dialog { width: min(1400px, 96vw); max-width: none; max-height: 94dvh; padding: 20px; border: 0; background: var(--bg); color: var(--ink); }
#image-dialog::backdrop { background: rgba(0, 0, 0, .94); }
#image-dialog-image { max-height: 78dvh; width: 100%; height: auto; object-fit: contain; }
#image-dialog-caption { text-align: center; color: var(--muted); font-size: var(--small); margin-top: 14px; }
.dialog-close { display: flex; align-items: center; gap: 30px; margin-left: auto; background: var(--surface); border: 0; padding: 12px 18px; font-size: 16px; min-height: 46px; }
.dialog-close span { font-size: 26px; }
.dialog-close:hover { background: var(--raised); }
/* Content is painted by default; motion enhances rather than gates the page. */
@media (prefers-reduced-motion: no-preference) {
  .headline-line > span { animation: headline-arrive 950ms var(--ease-expo) both; }
  .headline-line:nth-child(2) > span { animation-delay: 90ms; }
  .hero-description { animation: copy-arrive 800ms var(--ease-expo) 120ms both; }
  .hero-copy .store-badges { animation: copy-arrive 800ms var(--ease-expo) 190ms both; }
  .hero-screens { animation: product-drift 9s ease-in-out infinite alternate; animation-play-state: var(--loop-state, running); }
  [data-enter].is-arrived { animation: section-arrive var(--duration) var(--ease-expo) both; animation-delay: var(--arrival-delay, 0ms); }
  [data-enter='picture'].is-arrived { animation-name: picture-arrive; animation-duration: 1100ms; }
  .drill-detail.is-changing .drill-detail-copy { animation: selection-arrive 320ms var(--ease-out) both; }
  details[open] .answer { animation: selection-arrive 320ms var(--ease-out) both; }
}
@keyframes headline-arrive { from { transform: translateY(35%); } to { transform: translateY(0); } }
@keyframes copy-arrive { from { opacity: .65; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes product-drift { from { transform: translateY(0) rotate(-.65deg); } to { transform: translateY(-15px) rotate(.65deg); } }
@keyframes section-arrive { from { opacity: .55; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes picture-arrive { from { opacity: .7; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes selection-arrive { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
[data-motion='paused'] { scroll-behavior: auto; }
[data-motion='paused'] *, [data-motion='paused'] *::before, [data-motion='paused'] *::after { animation-play-state: paused !important; animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
[data-motion='paused'] [data-parallax] { transform: none; }
[data-motion='paused'] [data-enter], [data-motion='paused'] .headline-line > span, [data-motion='paused'] .hero-description, [data-motion='paused'] .hero-copy .store-badges { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  :root { --gutter: 32px; --hero: clamp(62px, 7vw, 85px); }
  .site-header { gap: 25px; }
  .site-header nav { gap: 23px; }
  .site-header nav a { font-size: 15px; }
  .hero-art { width: calc(100% + 200px); margin-left: -120px; }
  .hero-description { max-width: 340px; }
  .section-intro { gap: 50px; }
  .drill-layout { gap: 20px; }
  .drill-art { height: 620px; }
  .drill-image { inset-inline: -160px; }
  .drill-tab { padding: 16px; }
  .local-story { gap: 70px; }
}
@media (max-width: 800px) {
  :root { --title: 48px; --hero: 60px; }
  .site-header { height: 86px; }
  .site-header nav { gap: 20px; }
  .site-header nav a[href='#questions'] { display: none; }
  .brand { font-size: 24px; }
  .brand img { width: 36px; height: 36px; }
  .hero-layout { grid-template-columns: .95fr 1.05fr; }
  .hero-copy { padding-block: 30px; }
  .hero-description { max-width: 300px; font-size: 16px; }
  .hero-art { width: calc(100% + 180px); margin-left: -110px; }
  .section-intro { gap: 40px; }
  .section-intro > p { font-size: 16px; }
  .drill-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drill-tab { font-size: 14px; padding: 14px; }
  .drill-detail { padding: 24px; }
  .drill-settings { gap: 25px; flex-wrap: wrap; }
  .drill-settings dd { font-size: 30px; }
  .drill-art { height: 640px; }
  .drill-image { inset-inline: -190px; }
  .showcase-intro { gap: 45px; }
  .showcase-intro > p { max-width: 320px; font-size: 16px; }
  .feature-explanations { gap: 45px; }
  .local-story { gap: 55px; }
  .faq { gap: 40px; grid-template-columns: .7fr 1.3fr; }
  .faq-list summary { font-size: 16px; padding: 22px; }
  .answer { padding: 0 22px 24px; }
  .footer-bottom { align-items: start; gap: 25px; }
  .footer-bottom .brand { white-space: normal; max-width: 230px; }
}
@media (max-width: 650px) {
  :root { --gutter: 24px; --body: 16px; --title: 42px; --hero: clamp(55px, 15vw, 76px); --heading: 26px; }
  html { scroll-padding-top: 24px; }
  .section { padding-block: 85px; }
  .site-header { height: 80px; gap: 10px; }
  .site-header .brand { font-size: 22px; gap: 7px; }
  .site-header .brand img { width: 32px; height: 32px; }
  .site-header nav { gap: 20px; }
  .site-header nav a { font-size: 14px; }
  .language-picker select { min-height: 40px; padding: 8px 27px 8px 9px; font-size: 13px; background-position: right 8px center; }
  .site-header nav a[href='#drills'], .site-header nav a[href='#screens'] { display: none; }
  .hero-layout { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding-block: 115px 24px; }
  .hero-copy { padding: 0; }
  .hero h1 { max-width: 100%; }
  .hero-description { margin-top: 27px; max-width: 350px; font-size: 16px; }
  .hero .action { margin-top: 24px; }
  .hero-availability { margin-top: 18px; font-size: 14px; }
  .hero-shot.is-active { transform: translateY(0) scale(1.04); }
  .hero-art { width: calc(100% + 160px); height: 43svh; min-height: 310px; max-height: 440px; margin: -12px -80px -12px; flex: 1 0 auto; }
  .hero-platforms { font-size: 13px; margin-top: auto; padding-top: 10px; }
  .hero-next { position: absolute; right: 0; bottom: 18px; width: 44px; height: 44px; }
  .hero-next svg { width: 20px; }
  .section-intro { display: block; margin-bottom: 40px; }
  .section-intro > p { margin-top: 26px; max-width: 420px; }
  .drill-layout { display: flex; flex-direction: column; gap: 0; }
  .drill-explorer { width: 100%; }
  .drill-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drill-tab { font-size: 15px; min-height: 52px; padding: 16px 10px; }
  .drill-detail { padding: 27px; }
  .drill-detail-copy { min-height: 320px; }
  .drill-detail h3 { font-size: 32px; }
  .drill-settings { margin-top: 28px; gap: 30px; }
  .drill-settings dd { font-size: 34px; }
  .setup-note { font-size: 14px; }
  .drill-art { width: calc(100% + 48px); height: 540px; margin: 20px -24px -25px; }
  .drill-image { inset: -15px -150px; }
  .showcase { padding-top: 55px; }
  .showcase-intro { display: block; }
  .showcase-intro > p { max-width: 400px; margin-top: 26px; }
  .overview-image { width: calc(100% + 100px); max-width: none; margin: 15px -50px 40px; }
  .feature-explanations { display: block; }
  .feature-explanations article + article { margin-top: 42px; }
  .feature-explanations h3 { margin-bottom: 18px; }
  .local-story { display: block; }
  .local-copy > p { margin-top: 26px; }
  .local-details { margin-top: 48px; gap: 36px; }
  .local-details h3 { font-size: 24px; }
  .faq { display: block; }
  .faq-intro { position: static; margin-bottom: 35px; }
  .faq-intro p { max-width: 350px; margin-block: 25px 8px; }
  .faq-list { gap: 9px; }
  .faq-list summary { min-height: 80px; padding: 24px; font-size: 17px; }
  .answer { padding: 0 24px 27px; }
  .answer p { font-size: 16px; }
  .site-footer { position: relative; isolation: isolate; padding-top: 70px; padding-bottom: 30px; }
  .footer-bottom { display: block; }
  .footer-bottom .brand { max-width: none; font-size: 14px; }
  .footer-bottom nav { gap: 10px 25px; margin-top: 22px; }
  .footer-bottom nav a { font-size: 14px; }
  #image-dialog { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  .hero-shot { transform: none; }
}

.no-script-drills details { background: var(--surface); margin-top: 12px; padding: 24px; }
.no-script-drills summary { cursor: pointer; font-size: 18px; }
.no-script-drills p { margin-top: 18px; }

/* Official, unmodified store artwork. Images only until listing URLs are supplied. */
.store-badges { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; width: max-content; max-width: 100%; }
.hero-copy > .store-badges { margin-top: 32px; }
.store-badge { flex: 0 1 auto; object-fit: contain; }
.store-badge--apple { width: 144px; height: 48px; }
.store-badge--google { width: 185px; height: 72px; margin: -12px -11px -12px -11px; }
.more-drills { margin-top: 20px; color: var(--muted); font-size: var(--small); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.language-picker { flex: 0 0 auto; }
.language-picker select { appearance: none; border: 0; border-radius: 0; min-height: 44px; padding: 10px 34px 10px 13px; color: var(--ink); background: var(--surface); font: inherit; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27m2 4 4 4 4-4%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.5%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.footer-product { display: flex; flex-direction: column; align-items: center; margin-bottom: 85px; }
.footer-product h2 { align-self: flex-start; }
.footer-product-image { width: min(760px, 100%); margin: -45px auto -20px; }
.footer-product-image img { width: 100%; }
.store-credits { font-size: 12px; color: var(--muted); margin-top: 28px; max-width: 900px; }
@media (max-width: 650px) {
  .hero-copy > .store-badges { margin-top: 26px; }
  .store-badges { gap: 12px; }
  .store-badge--apple { width: min(38vw, 144px); height: auto; }
  .store-badge--google { width: min(49vw, 185px); height: auto; }
  .drill-tab { font-size: 14px; padding-inline: 8px; }
  .footer-product { margin-bottom: 55px; }
  .footer-product-image { width: calc(100% + 48px); max-width: none; margin: 0 -24px 15px; }
}

.feature-tour { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 48px; }
.feature-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-tabs [role=tab] { border: 0; min-height: 48px; padding: 12px 18px; color: var(--ink); background: var(--surface); font-size: 15px; }
.feature-tabs [aria-selected=true] { color: var(--accent-ink); background: var(--accent); }
.feature-tour-description { max-width: 450px; font-size: 15px; color: var(--muted); }
@media(max-width:650px) { .feature-tour { display:block; margin-top:32px; } .feature-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .feature-tabs [role=tab] { padding:10px 6px; font-size:12px; } .feature-tour-description { margin-top:16px; } }

/* Owner-requested depth: shadows follow transparent product artwork and lift controls from the dark surface. */
:root { --interactive-shadow: 0 8px 20px rgba(0, 0, 0, .52); --art-shadow: drop-shadow(0 20px 22px rgba(0, 0, 0, .72)); }
.hero-shot, .drill-image img, .overview-image img, .footer-product-image img { filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .72)); }
.action, .store-badge, .drill-tab, .feature-tabs [role=tab], .hero-next, .language-picker select, .faq-list details, .dialog-close { box-shadow: var(--interactive-shadow); }
.store-badge { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.drill-tab:hover, .feature-tabs [role=tab]:hover, .hero-next:hover, .dialog-close:hover, .language-picker select:focus-visible { box-shadow: 0 12px 24px rgba(0, 0, 0, .66); }
@media (prefers-reduced-motion: reduce) { .hero-shot, .drill-image img, .overview-image img, .footer-product-image img, .store-badge { filter: none; } }

/* Static texture islands sit behind key product imagery and dissolve into the black page. */
.hero-art, .drill-section, .showcase, .site-footer { isolation: isolate; }
.hero::before, .drill-section::before, .showcase::before, .site-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: url('/assets/rough-surface-bg.png');
  background-size: cover;
  background-position: center;
  opacity: .72;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at center, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 68% 62% at center, #000 22%, transparent 78%);
}
.hero::before { top: 3%; right: -7%; width: 70%; height: 88%; }
.drill-section::before { top: 31%; right: -10%; width: 65%; height: 64%; }
.showcase::before { top: 21%; left: 7%; width: 86%; height: 62%; }
.site-footer::before { top: 4%; left: 12%; width: 76%; height: 72%; }
@media (max-width: 650px) {
  .hero::before { top: 19%; right: -44%; width: 128%; height: 66%; }
  .drill-section::before { top: 42%; right: -35%; width: 115%; height: 48%; }
  .showcase::before { top: 24%; left: -22%; width: 144%; height: 48%; }
  .site-footer::before { top: 8%; left: -14%; width: 128%; height: 60%; }
}

.drill-section { position: relative; }