/* Homepage only. The other pages keep shared/site.css.
   Indigo bands and light bands alternate; every text colour here meets 7:1
   (WCAG AAA) on the band it sits on. Motion is gated by html.motion, which
   the head script sets only when the visitor has not asked for reduced
   motion, so without JS or with reduced motion everything is visible and
   still. */

:root {
    --night: #0E1030;
    --indigo-deep: #171A45;
    --indigo-band: #1F2357;
    --indigo-rule: #2A2D5C;
    --indigo-edge: #5A5E9A;
    --on-dark: #F2F2FA;
    --on-dark-soft: #B9B7D6;
    --link-dark: #B5AFFF;
    --gold: #E9A825;
    --gold-text: #F0B53F;

    --paper: #FAFAFD;
    --raised: #FFFFFF;
    --lavender: #ECEBF7;
    --rule: #DCDCE8;
    --rule-strong: #8A88AA;
    --ink: #0E1030;
    --ink-soft: #46445F;
    --indigo: #3629B8;
    --indigo-hover: #251B8F;

    --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --wrap: 1200px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--indigo); }
a:hover { color: var(--indigo-hover); }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--raised); padding: 8px 12px; }

/* ---------- bands ---------- */
.band-dark { background: var(--indigo-band); color: var(--on-dark); position: relative; }
.band-dark a:not(.btn) { color: var(--link-dark); }
.band-dark .soft { color: var(--on-dark-soft); }
.band-light { background: var(--paper); }
.band-white { background: var(--raised); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-lav { background: var(--lavender); }
.soft { color: var(--ink-soft); }
.section { padding: 96px 0; }
section[id] { scroll-margin-top: 64px; }

/* The adire dot grid in gold, faded away from the text side. Two layers
   glint out of step, so the grid sparkles. */
.dots {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 75%);
}
.dots::before, .dots::after { content: ""; position: absolute; inset: 0; }
.dots::before {
    background-image: radial-gradient(rgba(233, 168, 37, .5) 1.4px, transparent 1.7px);
    background-size: 32px 32px;
}
.dots::after {
    background-image: radial-gradient(#F0B53F 1.6px, transparent 1.9px);
    background-size: 96px 96px;
    background-position: 16px 16px;
}
/* On narrow screens the text sits above the pictures, so the dots
   gather at the bottom instead of the right. */
@media (max-width: 900px) {
    .dots {
        -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 55%, #000 85%);
        mask-image: linear-gradient(180deg, transparent 0, transparent 55%, #000 85%);
    }
}
.motion .dots::before { animation: glint 5s ease-in-out infinite; }
.motion .dots::after { animation: glint 2.8s ease-in-out .7s infinite; }
@keyframes glint { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- type ---------- */
.label {
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--indigo);
}
.band-dark .label { color: var(--gold-text); }
.label-dot { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.label-dot::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--dot, var(--indigo)); }
.h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-weight: 700; font-size: clamp(27px, 3vw, 38px); line-height: 1.13; }
.lede { font-size: 19px; max-width: 34em; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 10px; font-weight: 600; text-decoration: none;
    transition: transform .2s var(--ease), background-color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-indigo { background: var(--indigo); color: #FFFFFF; }
.btn-indigo:hover { background: var(--indigo-hover); color: #FFFFFF; }
.btn-line { border: 1px solid var(--rule-strong); color: var(--ink); background: var(--raised); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.band-dark .btn-line, header .btn-line { background: transparent; border-color: var(--indigo-edge); color: var(--on-dark); }
.band-dark .btn-line:hover { border-color: var(--on-dark); color: var(--on-dark); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Gold: one per view, and it sparkles. */
.btn-gold { position: relative; overflow: hidden; background: var(--gold); color: var(--night); }
.btn-gold:hover { color: var(--night); }
.btn-gold::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
}
.motion .btn-gold::after { animation: shimmer 4.5s ease-in-out 1.5s infinite; }
@keyframes shimmer { 0% { left: -60%; } 30%, 100% { left: 130%; } }

/* ---------- header ---------- */
.masthead { background: var(--indigo-deep); border-bottom: 1px solid var(--indigo-rule); position: sticky; top: 0; z-index: 20; }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.masthead .logo img { display: block; height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 16px; }
.nav a { color: var(--on-dark); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--link-dark); }
.nav .btn { padding: 9px 16px; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }

/* ---------- hero ---------- */
.hero .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 80px; padding-bottom: 96px; }
.hero-copy { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero-art { flex: 1 1 500px; min-width: 0; }

/* Sparkles: four-point gold stars that twinkle. Decoration only. */
.sparkle { position: absolute; width: 18px; height: 18px; color: var(--gold); opacity: .9; pointer-events: none; }
.sparkle svg { display: block; width: 100%; height: 100%; }
.motion .sparkle { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- 3D devices ---------- */
.stage { position: relative; perspective: 1800px; padding: 20px 44px 64px 0; }
.tilt { transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .5s var(--ease); }
.laptop { transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(7deg); }
.motion .laptop { animation: swayL 10s ease-in-out infinite; }
.phone { position: absolute; right: 0; bottom: 0; width: 27%; transform-style: preserve-3d; transform: rotateY(18deg) rotateX(5deg) translateZ(70px); }
.motion .phone { animation: swayP 8s ease-in-out infinite; }
@keyframes swayL { 0%, 100% { transform: rotateY(-14deg) rotateX(7deg); } 50% { transform: rotateY(-7deg) rotateX(4deg); } }
@keyframes swayP { 0%, 100% { transform: rotateY(18deg) rotateX(5deg) translateZ(70px); } 50% { transform: rotateY(10deg) rotateX(3deg) translateZ(70px); } }

.screen-lid { background: var(--indigo-deep); border: 1px solid var(--indigo-rule); border-radius: 14px 14px 0 0; padding: 10px; }
.laptop-base { height: 14px; margin: 0 -4%; background: var(--indigo-rule); border-radius: 0 0 14px 14px; }
.band-light .screen-lid { background: var(--night); }
.phone-shell { background: var(--night); border: 1px solid var(--indigo-edge); border-radius: 22px; padding: 6px; }
.view { position: relative; overflow: hidden; border-radius: 6px; background: var(--night); }
.view-laptop { aspect-ratio: 1366 / 657; }
.view-phone { aspect-ratio: 585 / 1266; border-radius: 16px; background: #EDE4D3; }
.view-phone.ss { aspect-ratio: 720 / 1600; background: #0B0E17; }
.view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .9s ease; }
.view img.on { opacity: 1; }

/* A phone on its own, slowly turning. */
.phone-solo-wrap { width: 100%; max-width: 270px; perspective: 1400px; }
.phone-solo { transform-style: preserve-3d; transform: rotateY(-16deg) rotateX(5deg); }
.motion .phone-solo { animation: swayS 9s ease-in-out infinite; }
.phone-solo .phone-shell { border-radius: 30px; padding: 8px; }
.phone-solo .view-phone { border-radius: 22px; }
@keyframes swayS { 0%, 100% { transform: rotateY(-16deg) rotateX(5deg); } 50% { transform: rotateY(14deg) rotateX(3deg); } }

/* ---------- facts strip ---------- */
.facts { list-style: none; margin: 0 auto; padding: 24px; max-width: var(--wrap); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 32px; font-size: 15px; }
.facts li { display: flex; flex-direction: column; }
.facts strong { font-size: 16px; }

/* ---------- automation ---------- */
.auto-head { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; }
.auto-head .stack { flex: 999 1 520px; min-width: 0; }
.steps { list-style: none; margin: 44px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step {
    background: var(--raised); border: 1px solid var(--rule); border-radius: 16px; padding: 22px;
    box-shadow: 0 8px 0 var(--lavender);
    display: flex; flex-direction: column; gap: 8px;
    transform: perspective(900px) rotateX(14deg); transform-origin: bottom center;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: perspective(900px) rotateX(0) translateY(-6px); box-shadow: 0 14px 0 var(--lavender); }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--indigo); }
.step strong { font-size: 18px; line-height: 1.35; }
.step span:last-child { color: var(--ink-soft); font-size: 15px; }
.ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 40px; list-style: none; margin: 0; padding: 0; }
.ticks li, .checks li { display: flex; gap: 10px; }
.ticks li::before, .checks li::before { content: "✓"; color: var(--indigo); flex: none; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---------- products ---------- */
.product .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.product-copy { flex: 999 1 440px; min-width: 0; }
.product-art { flex: 1 1 500px; min-width: 0; }
.product .wrap { position: relative; }
/* ShiftSync: the laptop and phone get the larger share of the row. */
#shiftsync .product-copy { flex: 1 1 360px; }
#shiftsync .product-art { flex: 1.7 1 560px; }
.product-art.narrow { flex: 1 1 320px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.band-dark ul.plain { color: var(--on-dark-soft); }
ul.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.picker { display: flex; gap: 2px; }
.picker button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.picker button span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); transition: transform .2s, background-color .2s; }
.picker button[aria-pressed="true"] span { background: var(--indigo); transform: scale(1.3); }
.screen-name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); min-height: 1.6em; }

/* ---------- coming next ---------- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.chips li { background: var(--lavender); border-radius: 999px; padding: 5px 13px; }

/* ---------- services ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--raised); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 8px; transition: transform .3s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card h3 { font-size: 22px; }

/* ---------- contact + footer ---------- */
.contact .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-top: 88px; padding-bottom: 88px; }
.contact .stack { flex: 999 1 460px; min-width: 0; gap: 10px; }
.footer { background: var(--indigo-deep); border-top: 1px solid var(--indigo-rule); color: var(--on-dark-soft); font-size: 15px; }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 28px; padding-bottom: 28px; }
.footer a { color: var(--link-dark); }
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer .co { display: flex; align-items: center; gap: 10px; }

/* ---------- scroll reveal ---------- */
.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .steps .step { opacity: 0; transform: perspective(900px) rotateX(55deg) translateY(30px); }
.motion .steps.in .step { opacity: 1; transform: perspective(900px) rotateX(14deg); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.motion .steps.in .step:nth-child(2) { transition-delay: .12s; }
.motion .steps.in .step:nth-child(3) { transition-delay: .24s; }
.motion .steps.in .step:nth-child(4) { transition-delay: .36s; }
.motion .steps.in .step:hover { transform: perspective(900px) rotateX(0) translateY(-6px); transition-delay: 0s; }

@media (max-width: 640px) {
    .section { padding: 64px 0; }
    .hero .wrap { padding-top: 48px; padding-bottom: 64px; gap: 40px; }
    .stage { padding-right: 24px; }
}