/* ============================================================================
   GoogleViews — Design System
   Built on Google Gemini's production design tokens (gem-sys) + Material 3
   Expressive. Colour, shape, motion and elevation values below are the real
   ones, not approximations.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- Google core brand ------------------------------------------------ */
  --g-blue:#4285F4;
  --g-red:#EA4335;
  --g-yellow:#FBBC04;
  --g-green:#34A853;

  /* --- Gemini brand (2025 spark refresh) -------------------------------- */
  --gem-blue:#3186FF;
  --gem-red:#FF4641;
  --gem-yellow:#FFCC00;
  --gem-green:#0EBC5F;
  --gem-violet:#9B72CB;
  --gem-rose:#D96570;

  /* --- Signature gradients (verbatim from Gemini's CSS) ----------------- */
  --gradient-gemini:linear-gradient(72.83deg,#4285F4 11.63%,#9B72CB 40.43%,#D96570 68.07%);
  /* horizontal variant, for text and wide fills */
  --gradient-gemini-h:linear-gradient(90deg,#4285F4 0%,#9B72CB 46%,#D96570 100%);
  /* softened aurora wash */
  --gradient-aurora:linear-gradient(90deg,#4F87ED 0%,#9476C5 33.53%,#BC688E 67.74%,#D6645D 100%);
  /* the current marketing blue ramp */
  --gradient-blue:linear-gradient(89.58deg,#3186FF .28%,#346BF0 44.45%,#4EA0FF 99.55%);
  /* violet reach, for accents */
  --gradient-violet:linear-gradient(90deg,#217BFE 0%,#2E96FF 52%,#AC87EB 98%);
  /* Google's four brand colours */
  --gradient-google:linear-gradient(101deg,#4285F4 0%,#34A853 34%,#FBBC04 67%,#EA4335 100%);
  --gradient-sheen:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.85) 50%,transparent 80%);

  /* --- Surfaces: Gemini's tonal ramp, light ----------------------------- */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-1:#F8FAFD;        /* container-low   */
  --surface-2:#F0F4F9;        /* container       */
  --surface-3:#E9EEF6;        /* container-high  */
  --surface-4:#DDE3EA;        /* container-highest */

  /* The page is white end to end. Alternating sections keep their rhythm with
     a whisper of brand colour instead of a grey band, and depth now comes from
     card lift rather than from a darker backdrop. */
  --bg-sunken:#FFFFFF;
  /* Centred so it reaches zero at both edges — a band with hard seams would
     just be the grey stripe again in a different colour. */
  --section-alt:
    radial-gradient(125% 92% at 50% 50%,
      rgba(66,133,244,.062) 0%,
      rgba(155,114,203,.038) 40%,
      rgba(255,255,255,0) 76%),
    #FFFFFF;
  --shadow-card:0 1px 2px rgba(31,31,31,.05),0 4px 14px -4px rgba(31,31,31,.10);
  --shadow-card-hover:0 2px 4px rgba(31,31,31,.05),0 14px 34px -10px rgba(31,31,31,.18);
  --border:#E1E3E1;           /* outline-low     */
  --border-strong:#C4C7C5;    /* outline-variant */
  --outline:#747775;
  --text:#1F1F1F;             /* on-surface      */
  --text-2:#444746;           /* on-surface-variant */
  --text-3:#727676;           /* on-surface-low  */
  --text-inv:#FFFFFF;
  --primary:#0B57D0;
  --primary-container:#D3E3FD;
  --on-primary-container:#0842A0;
  --tertiary:#146C2E;
  --tertiary-container:#C4EED0;
  --surface-accent:#9DD2FF;   /* the bottom glow tint */

  /* --- Glass ------------------------------------------------------------ */
  --glass-bg:rgba(255,255,255,.60);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.9);
  --glass-blur:saturate(180%) blur(26px);
  --glass-blur-light:saturate(160%) blur(8px);

  /* --- Elevation --------------------------------------------------------
     Gemini leans on the tonal ramp, not shadow. These stay deliberately
     restrained; anything heavier stops reading as Google.                  */
  --e1:0 1px 2px rgba(31,31,31,.05),0 1px 3px rgba(31,31,31,.04);
  --e2:0 1px 2px rgba(31,31,31,.05),0 2px 6px rgba(31,31,31,.05);
  --e3:0 2px 4px rgba(31,31,31,.05),0 6px 14px -4px rgba(31,31,31,.08);
  --e4:0 2px 6px rgba(31,31,31,.05),0 14px 32px -10px rgba(31,31,31,.14);
  --e5:0 4px 10px rgba(31,31,31,.06),0 28px 64px -20px rgba(31,31,31,.22);

  /* --- Shape: M3 corner scale ------------------------------------------- */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-lg-inc:20px;
  --r-xl:28px;
  --r-xl-inc:32px;
  --r-2xl:48px;
  --r-full:9999px;

  /* --- Spacing: gem-sys scale, extended for page layout ----------------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:28px; --s-8:40px; --s-9:56px; --s-10:72px;
  --s-11:96px; --s-12:128px;

  /* --- Motion: M3 easing + Expressive spring conversions ---------------- */
  --ease-emph:cubic-bezier(.2,0,0,1);
  --ease-emph-dec:cubic-bezier(.05,.7,.1,1);
  --ease-emph-acc:cubic-bezier(.3,0,.8,.15);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-standard-dec:cubic-bezier(0,0,0,1);
  /* Expressive springs — spatial overshoots, effects never do */
  --spring-spatial:cubic-bezier(.38,1.21,.22,1);        /* 500ms */
  --spring-spatial-fast:cubic-bezier(.42,1.67,.21,.90); /* 350ms */
  --spring-effects:cubic-bezier(.34,.80,.34,1);         /* 200ms */

  --d-short:150ms; --d-fast:200ms; --d-base:350ms;
  --d-med:500ms;   --d-slow:650ms; --d-long:900ms;

  /* --- Type ------------------------------------------------------------- */
  --font:"Google Sans Text","Google Sans",Inter,"Roboto Flex",Roboto,system-ui,sans-serif;
  --font-display:"Google Sans","Google Sans Display",Inter,"Roboto Flex",Roboto,system-ui,sans-serif;

  --nav-h:72px;
  --container:1200px;
}

/* ------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--d-base) var(--ease-standard),color var(--d-base) var(--ease-standard);
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--g-blue);outline-offset:3px;border-radius:6px}
::selection{background:rgba(66,133,244,.22)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------- 3. TYPOGRAPHY
   Gemini's display type is set surprisingly light (wght 280–360) and tight.
   Mapped onto Inter: 500 at display sizes, 600 for section headings.       */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--text);
  text-wrap:balance;
}
.h-display{
  font-size:clamp(2.4rem,5.4vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.036em;
  font-weight:500;
}
.h1{font-size:clamp(2.05rem,4.4vw,3.3rem);letter-spacing:-.03em;font-weight:500;line-height:1.1}
.h2{font-size:clamp(1.75rem,3.2vw,2.6rem);letter-spacing:-.028em;font-weight:500;line-height:1.14}
.h3{font-size:clamp(1.28rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.28;font-weight:600}
.h4{font-size:1.12rem;letter-spacing:-.012em;line-height:1.4;font-weight:600}

.lead{
  font-size:clamp(1.05rem,1.5vw,1.24rem);
  line-height:1.66;
  color:var(--text-2);
  letter-spacing:-.005em;
  text-wrap:pretty;
}
.body-lg{font-size:1.05rem;line-height:1.72;color:var(--text-2);text-wrap:pretty}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.small{font-size:.9rem;line-height:1.6}
.xsmall{font-size:.795rem;line-height:1.55}
.center{text-align:center}
.nowrap{white-space:nowrap}
strong,b{font-weight:600;color:var(--text)}

/* Gradient text. The negative margin-block / positive padding-block pair is
   Gemini's own fix for background-clip:text cropping ascenders+descenders. */
.grad,.grad-g,.grad-b{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  margin-block:-.15em;
  padding-block:.15em;
  padding-inline-end:2px;
  /* Kept inline (not inline-block) so trailing punctuation can't be orphaned
     onto the next line; clone keeps the full gradient on each wrapped fragment. */
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.grad{background-image:var(--gradient-gemini-h)}
.grad-g{background-image:var(--gradient-google)}
.grad-b{background-image:var(--gradient-blue)}

/* Slowly travelling gradient — Gemini's animated brand text, 4.3s linear */
.grad--anim{
  background-size:200% auto;
  animation:animateGradient 4.3s linear infinite;
}
@keyframes animateGradient{
  from{background-position:200% center}
  to{background-position:0 center}
}

/* ------------------------------------------------------------ 4. LAYOUT */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.container--narrow{max-width:880px}
.container--wide{max-width:1380px}

.section{padding-block:clamp(64px,9vw,124px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--sunken{background:var(--section-alt)}

.stack>*+*{margin-top:var(--s-4)}
.stack-sm>*+*{margin-top:var(--s-2)}
.stack-lg>*+*{margin-top:var(--s-6)}

.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

.row{display:flex;align-items:center;gap:var(--s-4)}
.row-wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.jcenter{justify-content:center}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}
.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mt-10{margin-top:var(--s-10)}
.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}

.section-head{max-width:770px;margin-inline:auto;text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.section-head--left{margin-inline:0;text-align:left}
.section-head .lead{margin-top:var(--s-5)}
.section-head .eyebrow{margin-bottom:var(--s-6)}

/* ------------------------------------------------------- 5. THE AURORA
   Gemini's hero glow: one enormous rainbow strip, rotated and scrolling
   forever, seen only through blurred organic blobs that morph, rotate and
   scale on co-prime durations so the loop never visibly repeats.          */
.aurora{
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(420px,68vh,760px);
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
/* The blob is the window; the strip inside it is the colour. Only transforms
   are animated — morphing the border-radius would force the browser to
   re-rasterise and re-blur a very large layer on every frame.              */
.aurora__blob{
  position:absolute;
  overflow:hidden;
  filter:blur(72px) saturate(112%);
  opacity:.30;
  transform:translateZ(0);
  will-change:transform;
}.aurora__strip{
  position:absolute;
  inset:-46% -46%;
  transform:rotate(-36deg);
  transform-origin:center;
  background-image:repeating-linear-gradient(
    180deg,
    #3C90FF 0%,#AD72FF 10%,#F96BD6 20%,#FF5A59 30%,#FF9238 40%,
    #FFCF03 50%,#88DE42 60%,#60D673 70%,#00BDD2 80%,#4FA0FF 90%,#3C90FF 100%);
  background-size:100% 1200px;
  animation:gradientScroll 38s linear infinite;
  will-change:background-position;
}
@keyframes gradientScroll{
  from{background-position:0 0}
  to{background-position:0 1200px}
}

/* Foreground blob — the bright core */
.aurora__blob--fg{
  width:min(1000px,112vw);
  height:min(520px,58vw);
  left:50%;
  top:-30%;
  margin-left:min(-500px,-56vw);
  border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
  animation:spinA 11.7s ease-in-out infinite;
}
/* Background blob — the wider, dimmer halo */
.aurora__blob--bg{
  width:min(1280px,136vw);
  height:min(600px,66vw);
  left:38%;
  top:-38%;
  margin-left:min(-640px,-68vw);
  opacity:.20;
  border-radius:44% 56% 38% 62%/58% 42% 56% 44%;
  animation:spinB 17.3s ease-in-out infinite;
}@keyframes spinA{
  0%,100%{transform:translateZ(0) rotate(-4deg) scale(.94)}
  50%{transform:translateZ(0) rotate(9deg) scale(1.02)}
}
@keyframes spinB{
  0%,100%{transform:translateZ(0) rotate(6deg)}
  50%{transform:translateZ(0) rotate(-7deg)}
}
/* Phones: keep the colour, drop the continuous repaint. */
@media (max-width:720px){
  .aurora__strip{animation:none}
  .aurora__blob{animation:none;filter:blur(56px)}
}

/* Fade the aurora into the page below it */
.aurora::after{
  content:"";
  position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to bottom,transparent,var(--bg) 78%);
}
.aurora--on-sunken::after{background:linear-gradient(to bottom,transparent,var(--bg-sunken))}

/* Lower-intensity aurora for interior pages */
.aurora--soft{height:clamp(320px,46vh,520px)}
.aurora--soft .aurora__blob{opacity:.22}

/* -------------------------------------------- 6. SOFT BLOB AURA (cheaper)
   Used further down the page, where a full aurora would be overkill.      */
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aura__blob{
  position:absolute;border-radius:50%;
  filter:blur(84px);opacity:.42;will-change:transform;
}.aura__blob--1{width:42vw;height:42vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle at 30% 30%,#4285F4 0%,rgba(66,133,244,0) 68%);
  top:-14%;left:-8%;animation:drift1 26s var(--ease-standard) infinite alternate}
.aura__blob--2{width:38vw;height:38vw;min-width:320px;min-height:320px;
  background:radial-gradient(circle at 60% 40%,#9B72CB 0%,rgba(155,114,203,0) 68%);
  top:4%;right:-10%;animation:drift2 31s var(--ease-standard) infinite alternate}
.aura__blob--3{width:36vw;height:36vw;min-width:300px;min-height:300px;
  background:radial-gradient(circle at 50% 60%,#D96570 0%,rgba(217,101,112,0) 66%);
  bottom:-16%;left:24%;opacity:.3;animation:drift3 24s var(--ease-standard) infinite alternate}
.aura__blob--green{background:radial-gradient(circle at 50% 50%,#34A853 0%,rgba(52,168,83,0) 66%)}

@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9%,7%,0) scale(1.16)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8%,10%,0) scale(.94)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(7%,-9%,0) scale(1.14)}}

.aura--fade::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
.aura--fade-sunken::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(to bottom,transparent,var(--bg-sunken));
}

/* --------------------------------------------------- 7. THE BOTTOM GLOW
   Gemini's 12-stop radial wash, alpha stepping on a t² curve every 5.5%.  */
.glow-wash{
  position:absolute;inset:auto 0 0 0;
  height:clamp(280px,42vh,550px);
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at center top,
    rgba(157,210,255,0)    0%,
    rgba(157,210,255,0)    45%,
    rgba(157,210,255,.02)  50.5%,
    rgba(157,210,255,.06)  56%,
    rgba(157,210,255,.13)  61.5%,
    rgba(157,210,255,.21)  67%,
    rgba(157,210,255,.31)  72.5%,
    rgba(157,210,255,.42)  78%,
    rgba(157,210,255,.54)  83.5%,
    rgba(157,210,255,.68)  89%,
    rgba(157,210,255,.84)  94.5%,
    rgba(157,210,255,1)    100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);
  mask-image:linear-gradient(to bottom,transparent,#000 40%);
  opacity:.5;
}

/* Fine dot grid — a little technical texture under the hero */
.dotgrid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,var(--border-strong) 1px,transparent 0);
  background-size:34px 34px;
  opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 32%,#000 18%,transparent 76%);
  mask-image:radial-gradient(ellipse 76% 60% at 50% 32%,#000 18%,transparent 76%);
}.on-top{position:relative;z-index:1}