/* Remotie marketing site v2 — shared design system.
   Tokens match the real app (resources/css/app.css) exactly: Roboto,
   Material-style blue primary, rounded-full/rounded-2xl components.
   Everything else here (animation, icon system, richer components) is
   new for this pass. */

:root{
  --font-sans: 'Roboto', ui-sans-serif, system-ui, sans-serif;

  --color-primary-50:#e8f0fe;
  --color-primary-100:#d2e3fc;
  --color-primary-300:#8ab4f8;
  --color-primary-400:#669df6;
  --color-primary-500:#4285f4;
  --color-primary-600:#1a73e8;
  --color-primary-700:#1967d2;
  --color-primary-800:#185abc;
  --color-primary-900:#0842a0;

  --color-success-50:#e6f4ea;
  --color-success-500:#34a853;
  --color-danger-50:#fce8e6;
  --color-danger-500:#ea4335;
  --color-warning-50:#fef7e0;
  --color-warning-500:#fbbc04;
  --color-warning-800:#b06000;

  --color-surface:#ffffff;
  --color-surface-variant:#f8f9fa;
  --color-surface-sunk:#f1f3f5;
  --color-outline:#dadce0;
  --color-outline-strong:#c4c9ce;
  --color-on-surface:#202124;
  --color-on-surface-variant:#5f6368;

  --ink-900:#0d1117;
  --shadow-sm: 0 1px 2px rgba(32,33,36,.06);
  --shadow-md: 0 4px 16px rgba(32,33,36,.08);
  --shadow-lg: 0 12px 32px rgba(32,33,36,.12);
  --shadow-primary: 0 8px 24px rgba(26,115,232,.18);

  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-surface);
  color:var(--color-on-surface);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
p{margin:0}
ul{margin:0}
::selection{background:var(--color-primary-600);color:#fff}
:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:3px;border-radius:4px}

/* -------------------- Layout -------------------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:24px}
.wrap-wide{max-width:1360px;margin-inline:auto;padding-inline:24px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-primary-700);display:inline-flex;align-items:center;gap:8px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary-600)}
.section{padding:96px 0}
.section-tight{padding:64px 0}
@media (max-width:768px){ .section{padding:64px 0} .section-tight{padding:48px 0} }
.section-head{max-width:640px}
.section-head.centered{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(26px,3.4vw,38px);margin-top:14px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.section-head p{margin-top:16px;color:var(--color-on-surface-variant);font-size:16px;line-height:1.65;max-width:60ch}
.section-head.centered p{margin-inline:auto}

/* -------------------- Icon system -------------------- */
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-tile{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.card-hover:hover .icon-tile, .role-card:hover .icon-tile, .category-card:hover .icon-tile, .article-card:hover .icon-tile{transform:scale(1.08) rotate(-3deg)}
.icon-tile.primary{background:var(--color-primary-50);color:var(--color-primary-600)}
.icon-tile.dark{background:var(--ink-900);color:#fff}
.icon-tile.success{background:var(--color-success-50);color:var(--color-success-500)}
.icon-tile.outline{background:var(--color-surface);border:1px solid var(--color-outline);color:var(--color-primary-600)}
.icon-tile.sm{width:38px;height:38px;border-radius:11px}
.icon-tile.sm .icon{width:18px;height:18px}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;padding:12px 26px;font-size:14.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
  white-space:nowrap;font-family:inherit;
}
.btn-primary{background:var(--color-primary-600);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary:hover{background:var(--color-primary-700);transform:translateY(-1px);box-shadow:0 10px 28px rgba(26,115,232,.26)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-secondary{background:#fff;color:var(--color-primary-600);border-color:var(--color-outline)}
.btn-secondary:hover{background:var(--color-primary-50);border-color:var(--color-primary-100)}
.btn-secondary:active{transform:scale(.98)}
.btn-dark{background:var(--ink-900);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-sm{padding:9px 20px;font-size:13.5px}
.btn-lg{padding:15px 32px;font-size:15.5px}

/* -------------------- Cards & surfaces -------------------- */
.card{background:var(--color-surface);border:1px solid var(--color-outline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card-flat{background:var(--color-surface-variant);border-radius:var(--radius-lg)}
.divider{height:1px;background:var(--color-outline);border:none}

/* -------------------- Nav -------------------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-outline);transition:box-shadow .3s}
header.site.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo-mark{height:27px;width:auto}
.logo-mark .rt-remo{fill:#2563eb}
.logo-mark .rt-tie{fill:#1e293b}
.logo-mark .rt-dot{fill:#2563eb}
.navlinks{display:flex;align-items:center;gap:2px;font-size:14.5px;font-weight:500}
.navlinks > a, .navlinks > .nav-dropdown > button{position:relative;padding:10px 14px;border-radius:10px;color:var(--color-on-surface-variant);transition:color .15s var(--ease),background-color .15s var(--ease);display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;font:inherit;cursor:pointer}
.navlinks > a::after, .navlinks > .nav-dropdown > button::after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--color-primary-600);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.navlinks > a:hover, .navlinks > .nav-dropdown:hover > button{color:var(--color-on-surface);background:var(--color-surface-variant)}
.navlinks > a:hover::after, .navlinks > .nav-dropdown:hover > button::after{transform:scaleX(1)}
.navlinks a.active{color:var(--color-primary-600)}
.logo-mark{transition:transform .25s var(--ease)}
a:hover > .logo-mark{transform:scale(1.03)}
.nav-dropdown{position:relative}
.nav-dropdown .chev{width:14px;height:14px;transition:transform .2s}
.nav-dropdown:hover .chev{transform:rotate(180deg)}
.nav-mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);width:560px;max-width:80vw;background:#fff;border:1px solid var(--color-outline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nav-dropdown:hover .nav-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-mega a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--color-on-surface)}
.nav-mega a:hover{background:var(--color-surface-variant)}
.nav-mega a small{display:block;color:var(--color-on-surface-variant);font-weight:400;font-size:12.5px;margin-top:1px}
.navcta{display:flex;align-items:center;gap:10px}

/* -------------------- Mobile nav -------------------- */
#mobileNav{position:fixed;inset:0;z-index:60;background:#fff;transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto}
#mobileNav.open{transform:translateX(0)}
#mobileNavToggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--color-outline);display:flex;align-items:center;justify-content:center;background:#fff}

/* -------------------- Hero -------------------- */
.hero{position:relative;padding:88px 0 0;overflow:hidden}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none;animation:blob-breathe 12s ease-in-out infinite}
.hero-blob:nth-of-type(2){animation-duration:15s;animation-direction:reverse}
@keyframes blob-breathe{0%,100%{filter:blur(60px)}50%{filter:blur(78px)}}
.hero h1{font-size:clamp(32px,4.6vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.hero h1 .accent{color:var(--color-primary-600)}
.hero .lede{font-size:17px;line-height:1.7;color:var(--color-on-surface-variant)}

/* -------------------- Stat strip -------------------- */
.stat{}
.stat .num{font-size:clamp(28px,3vw,36px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .label{font-size:13px;color:var(--color-on-surface-variant);margin-top:4px}

/* -------------------- Steps timeline -------------------- */
.timeline{position:relative}
.timeline-line{position:absolute;top:15px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,var(--color-outline) 10%,var(--color-outline) 90%,transparent)}
.timeline-step .n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--color-primary-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 0 0 6px var(--color-surface)}

/* -------------------- Chips / badges -------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease)}
.chip-outline{border:1px solid var(--color-outline);color:var(--color-on-surface-variant);background:#fff}
.chip-outline:hover{border-color:var(--color-primary-300);color:var(--color-primary-700)}
.chip-primary{background:var(--color-primary-50);color:var(--color-primary-700)}
.chip-success{background:var(--color-success-50);color:var(--color-success-500)}
.badge-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--color-success-500);background:var(--color-success-50);padding:6px 13px;border-radius:999px}
.badge-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--color-success-500);position:relative}
.badge-live .pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--color-success-500);opacity:.4;animation:pulse-ring 2s var(--ease) infinite}
@keyframes pulse-ring{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.2);opacity:0}}

/* -------------------- Marquee (partner logos) -------------------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-size:20px;font-weight:700;color:var(--color-on-surface-variant);opacity:.55;white-space:nowrap;letter-spacing:-.01em}

/* -------------------- Scroll reveal -------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:translateY(0)}
[data-reveal="scale"]{transform:scale(.96) translateY(0)}
[data-reveal="scale"].in{transform:scale(1) translateY(0)}
[data-reveal-group] > *{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
[data-reveal-group].in > *{opacity:1;transform:translateY(0)}
[data-reveal-group].in > *:nth-child(1){transition-delay:.05s}
[data-reveal-group].in > *:nth-child(2){transition-delay:.12s}
[data-reveal-group].in > *:nth-child(3){transition-delay:.19s}
[data-reveal-group].in > *:nth-child(4){transition-delay:.26s}
[data-reveal-group].in > *:nth-child(5){transition-delay:.33s}
[data-reveal-group].in > *:nth-child(6){transition-delay:.40s}
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-group] > *{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track{animation:none}
  .badge-live .pulse::after{animation:none}
  .hero-blob{animation:none}
}

/* -------------------- Role / category cards -------------------- */
.role-card{display:flex;flex-direction:column;gap:14px;padding:22px;background:#fff;border:1px solid var(--color-outline);border-radius:var(--radius-lg);transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease)}
.role-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--color-outline-strong)}
.role-card:active{transform:translateY(-1px) scale(.995)}
.category-card{padding:26px;border-radius:var(--radius-lg);border:1px solid var(--color-outline);position:relative;overflow:hidden;transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.category-card .bg-icon{position:absolute;right:-14px;bottom:-14px;width:96px;height:96px;opacity:.06;stroke-width:1}

/* -------------------- Quote / trust -------------------- */
.quote-mark{font-size:56px;line-height:1;color:var(--color-primary-100);font-family:Georgia,serif;font-weight:700}

/* -------------------- Article cards -------------------- */
.article-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-outline);transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.article-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));display:flex;align-items:center;justify-content:center;color:var(--color-primary-600)}

/* -------------------- FAQ -------------------- */
details.faq-item{border-bottom:1px solid var(--color-outline)}
details.faq-item summary{list-style:none;cursor:pointer;padding:22px 4px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-weight:500;font-size:16px}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item .plus{flex:none;width:22px;height:22px;border-radius:50%;background:var(--color-surface-variant);display:flex;align-items:center;justify-content:center;transition:.25s}
details.faq-item[open] .plus{background:var(--color-primary-600);color:#fff;transform:rotate(45deg)}
details.faq-item .a{padding:0 4px 24px;color:var(--color-on-surface-variant);font-size:15px;line-height:1.7;max-width:70ch}

/* -------------------- CTA band -------------------- */
.cta-band{border-radius:var(--radius-2xl);position:relative;overflow:hidden}
.cta-band.dark{background:var(--ink-900);color:#fff}
.cta-band.dark p{color:rgba(255,255,255,.65)}
.cta-band.tint{background:var(--color-primary-50);border:1px solid var(--color-primary-100)}

/* -------------------- Footer -------------------- */
footer.site{border-top:1px solid var(--color-outline);background:var(--color-surface-variant)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;row-gap:32px} }
.foot-grid h5{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-on-surface-variant);margin-bottom:16px}
.foot-grid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-grid a{font-size:14px;color:var(--color-on-surface-variant)}
.foot-grid a:hover{color:var(--color-primary-600)}

/* -------------------- Utility -------------------- */
.tabular{font-variant-numeric:tabular-nums}
.text-balance{text-wrap:balance}
@media (max-width:900px){
  .hide-mobile{display:none}
}
@media (min-width:901px){
  .hide-desktop{display:none}
}