/* ==========================================================
   Fays Technology
   Brand colours sampled directly from the logo PNG:
   blue #0098f8 · red #f80000 · green #009800
   ========================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-tint:#f5f9fd;
  --ink:#101720;
  --ink-2:#3a4453;
  --muted:#68738a;
  --line:#e1e8f1;
  --line-2:#edf2f8;

  /* exact logo colours */
  --blue:#0098f8;
  --blue-l:#38b0f8;
  --blue-d:#007ad0;
  --blue-dd:#0061a8;
  --red:#f80000;
  --red-d:#cc0000;
  --green:#009800;
  --green-l:#00b800;
  --green-d:#007a00;

  --grad:linear-gradient(120deg,var(--blue),var(--blue-d));
  --grad-brand:linear-gradient(120deg,var(--red),var(--blue),var(--green));

  /* shadows are always neutral — colour never bleeds into them */
  --sh-sm:0 2px 8px rgba(16,23,32,.05);
  --sh:0 12px 30px -8px rgba(16,23,32,.11);
  --sh-lg:0 24px 50px -12px rgba(16,23,32,.20);
  --sh-xl:0 40px 80px -18px rgba(16,23,32,.30);
  --sh-hover:0 28px 56px -16px rgba(16,23,32,.28);
  --sh-dark:0 30px 60px -16px rgba(0,0,0,.55);

  --head-h:104px;
  --pad:clamp(1.15rem,4.5vw,4rem);
  --maxw:1240px;
  --r:18px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.3s;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(60rem 40rem at 100% 10%, rgba(0,152,0,.06),   transparent 60%),
    radial-gradient(55rem 38rem at 0% 40%,   rgba(0,152,248,.08), transparent 60%),
    radial-gradient(50rem 36rem at 100% 70%, rgba(248,0,0,.045),  transparent 60%),
    linear-gradient(180deg,#fff,#fafcff 45%,#fff);
  background-attachment:fixed;
}
h1,h2,h3,h4{
  margin:0; font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  font-weight:700; letter-spacing:-.03em; line-height:1.08;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:1; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .95rem .4rem .6rem; border-radius:100px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  font-size:.8rem; font-weight:600; color:var(--ink-2);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--green); position:relative; flex:none; }
.dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--green);
  animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 75%,100%{ transform:scale(2.6); opacity:0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-d);
}
.eyebrow::before{ content:""; width:26px; height:3px; border-radius:3px; background:var(--grad-brand); }

h2{ font-size:clamp(1.95rem,4vw,3.05rem); max-width:19ch; }
.sub{ margin-top:1.1rem; color:var(--muted); max-width:56ch; font-size:1.05rem; }
.section{ padding-block:clamp(4.5rem,8vw,7.5rem); scroll-margin-top:var(--head-h); position:relative; }

.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.glow-a{ width:34rem; height:26rem; top:-6rem; left:-10rem; background:rgba(0,152,248,.17); }
.glow-b{ width:30rem; height:24rem; bottom:-8rem; right:-8rem; background:rgba(248,0,0,.11); }
.glow-c{ width:28rem; height:22rem; top:20%; right:-10rem; background:rgba(0,152,0,.13); }

/* ---------- buttons ----------
   Solid colours, never gradients: gradients can't be transitioned,
   which is what made hovers snap instead of glide. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.7rem; border-radius:100px; font-weight:600; font-size:.97rem;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease),
             color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2;
  transition:transform var(--t) var(--ease); }
.btn-solid{ background-color:var(--blue); color:#fff; box-shadow:var(--sh-sm); }
.btn-solid:hover{ background-color:var(--blue-d); transform:translateY(-3px); box-shadow:var(--sh-hover); }
.btn-solid:hover svg{ transform:translateX(3px); }
.btn-solid:active{ transform:translateY(-1px); }
.btn-line{ background-color:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn-line:hover{ background-color:#fff; border-color:var(--blue); color:var(--blue-d); transform:translateY(-3px); box-shadow:var(--sh-lg); }
.btn-line:active{ transform:translateY(-1px); }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:80; height:var(--head-h); display:flex; align-items:center;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.header.stuck{ border-bottom-color:var(--line); box-shadow:var(--sh); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:1rem; }
.brand{ cursor:pointer; }
.brand img{ height:80px; width:auto; transition:transform var(--t) var(--ease); }
.brand:hover img{ transform:scale(1.04); }
.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav > a:not(.btn){
  position:relative; font-size:.94rem; font-weight:500; color:var(--ink-2); padding:.3rem 0; cursor:pointer;
  transition:color var(--t) var(--ease);
}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:2.5px; width:0; border-radius:3px;
  background:var(--grad-brand); transition:width var(--t) var(--ease);
}
.nav > a:not(.btn):hover{ color:var(--ink); }
.nav > a:not(.btn):hover::after{ width:100%; }
.nav .btn{ padding:.68rem 1.45rem; font-size:.92rem; }

.burger{
  display:none; width:46px; height:46px; padding:0; position:relative; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-sm);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.burger:hover{ border-color:var(--blue); box-shadow:var(--sh); }
.burger i{ position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), opacity .18s var(--ease); }
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ top:22px; }
.burger i:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--head-h) 0 auto 0; z-index:75; display:grid; gap:.2rem;
  padding:1.1rem var(--pad) 1.9rem; background:#fff; border-bottom:1px solid var(--line);
  box-shadow:var(--sh-lg); transform:translateY(-120%); transition:transform .42s var(--ease);
}
.drawer.open{ transform:translateY(0); }
.drawer a:not(.btn){
  font-family:"Space Grotesk",sans-serif; font-size:1.35rem; font-weight:600; letter-spacing:-.02em;
  padding:.7rem 0; border-bottom:1px solid var(--line-2); cursor:pointer;
  transition:color var(--t) var(--ease);
}
.drawer a:not(.btn):hover{ color:var(--blue-d); }
.drawer .btn{ margin-top:1rem; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5rem) clamp(4rem,8vw,7rem); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46rem 30rem at 8% -10%,  rgba(0,152,248,.26), transparent 62%),
    radial-gradient(40rem 26rem at 95% 2%,   rgba(0,152,0,.17),   transparent 62%),
    radial-gradient(32rem 22rem at 65% 100%, rgba(248,0,0,.13),   transparent 62%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(16,23,32,.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 78%);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
.hero h1{ font-size:clamp(2.45rem,5.4vw,4.35rem); margin-top:1.4rem; max-width:15ch; }
.hero-sub{ margin-top:1.5rem; font-size:1.12rem; color:var(--ink-2); max-width:47ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }
.hero-trust{ margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1.9rem; }
.hero-trust div strong{ display:block; font-family:"Space Grotesk",sans-serif; font-size:1.45rem; letter-spacing:-.03em; }
.hero-trust div:nth-child(1) strong{ color:var(--blue-d); }
.hero-trust div:nth-child(2) strong{ color:var(--red-d); }
.hero-trust div:nth-child(3) strong{ color:var(--green-d); }
.hero-trust div span{ font-size:.82rem; color:var(--muted); font-weight:500; }

/* ---------- hero visual: code editor + app preview ---------- */
.visual{ position:relative; padding:.5rem 2.5rem 3.5rem .5rem; }

.editor{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,#0c1622,#121d2c);
  border:1px solid rgba(255,255,255,.09); box-shadow:var(--sh-xl);
  animation:floaty 8s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
.ed-bar{ display:flex; align-items:center; gap:.45rem; padding:.8rem 1rem; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.ed-bar i{ width:11px; height:11px; border-radius:50%; flex:none; }
.ed-bar i:nth-child(1){ background:var(--red); }
.ed-bar i:nth-child(2){ background:var(--blue); }
.ed-bar i:nth-child(3){ background:var(--green); }
.ed-bar em{ margin-left:.75rem; font-style:normal; font-size:.76rem; color:#6d7a90; font-family:ui-monospace,Menlo,monospace; }
.ed-body{
  margin:0; padding:1.35rem 1.3rem 1.7rem; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem; line-height:2.05; color:#c5cddc; overflow-x:auto;
}
.ed-body .ln{ display:block; opacity:0; animation:typeIn .5s var(--ease) forwards; }
.ed-body .ln:nth-child(1){ animation-delay:.20s; }
.ed-body .ln:nth-child(2){ animation-delay:.38s; }
.ed-body .ln:nth-child(3){ animation-delay:.56s; }
.ed-body .ln:nth-child(4){ animation-delay:.74s; }
.ed-body .ln:nth-child(5){ animation-delay:.92s; }
.ed-body .ln:nth-child(6){ animation-delay:1.10s; }
.ed-body .ln:nth-child(7){ animation-delay:1.28s; }
@keyframes typeIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
/* syntax colours drawn from the logo */
.k{ color:#ff6b6b; } .f{ color:#38b0f8; } .s{ color:#4ade4a; } .c{ color:#55617a; } .v{ color:#e6b3ff; }
.cursor{ display:inline-block; width:8px; height:1em; background:var(--blue); vertical-align:-2px;
  animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* phone preview floating over the editor */
.phone{
  position:absolute; right:0; bottom:0; width:138px;
  border-radius:24px; background:#0c1622; padding:7px;
  box-shadow:var(--sh-xl); border:1px solid rgba(255,255,255,.12);
  animation:floaty 8s ease-in-out infinite 1s;
}
.ph-screen{ border-radius:18px; overflow:hidden; background:#fff; }
.ph-top{ height:54px; background:linear-gradient(130deg,var(--blue),var(--blue-d)); position:relative; }
.ph-top::after{
  content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:34px; height:4px; border-radius:3px; background:rgba(255,255,255,.55);
}
.ph-top b{ position:absolute; left:11px; bottom:10px; width:54%; height:7px; border-radius:4px; background:rgba(255,255,255,.92); }
.ph-list{ padding:.65rem; display:grid; gap:.45rem; }
.ph-list i{ height:12px; border-radius:4px; background:var(--line-2); }
.ph-list i:nth-child(1){ width:100%; }
.ph-list i:nth-child(2){ width:76%; }
.ph-list i:nth-child(3){ width:90%; }
.ph-btn{ margin:.2rem .65rem .75rem; height:21px; border-radius:100px; background:var(--green); }

.chip{
  position:absolute; display:flex; align-items:center; gap:.5rem;
  padding:.58rem .9rem; border-radius:12px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--sh-lg);
  font-size:.79rem; font-weight:600; white-space:nowrap;
}
.chip svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
/* small labels float at top-right and bottom-left of the editor */
.chip-web{ top:-16px; right:-12px; color:var(--blue-d); animation:floaty 7s ease-in-out infinite .4s; }
.chip-app{ bottom:16px; left:-18px; color:var(--red-d); animation:floaty 7.5s ease-in-out infinite 1.3s; }

/* ---------- marquee ---------- */
.marquee{
  position:relative; z-index:1;
  border-block:1px solid var(--line); background:rgba(245,249,253,.85); padding-block:1.15rem; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq-track{ display:flex; width:max-content; gap:3.2rem; animation:slide 34s linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-track span{
  display:flex; align-items:center; gap:.85rem; white-space:nowrap;
  font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.mq-track span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--grad-brand); flex:none; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- statement banner ---------- */
.banner{
  position:relative; overflow:hidden; text-align:center;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,249,253,.4),rgba(238,246,253,.92),rgba(245,249,253,.4));
  padding-block:clamp(3.5rem,7vw,5.75rem);
  scroll-margin-top:var(--head-h);
}
.banner .wrap{ max-width:900px; }
.banner-mark{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(3.5rem,9vw,6rem); line-height:.5; color:var(--blue);
  opacity:.22; margin-bottom:.75rem; user-select:none;
}
.banner-text{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.7rem,4.4vw,3rem); line-height:1.18; color:var(--ink);
  max-width:20ch; margin-inline:auto;
}
.banner-by{
  margin-top:1.35rem; font-size:.88rem; font-weight:600; letter-spacing:.02em; color:var(--muted);
}

/* ---------- statement strip ---------- */
.strip{ padding-block:clamp(3rem,6vw,4.5rem); text-align:center; position:relative; }
.strip-text{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.4rem,3.4vw,2.35rem); line-height:1.25; color:var(--ink-2);
  max-width:24ch; margin-inline:auto;
}

/* ---------- counters ---------- */
.count-card{
  position:relative; overflow:hidden; border-radius:26px;
  padding:clamp(2.5rem,5vw,3.75rem) clamp(1.5rem,4vw,3.25rem);
  background:linear-gradient(135deg,#0b1420,#111c2a 55%,#0d1824);
  box-shadow:var(--sh-xl);
}
.count-card::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(26rem 18rem at 3% 0%,   rgba(0,152,248,.48), transparent 62%),
    radial-gradient(24rem 16rem at 55% 108%,rgba(0,152,0,.34),   transparent 62%),
    radial-gradient(22rem 15rem at 99% 4%,  rgba(248,0,0,.30),   transparent 62%);
}
.count-card::after{
  content:""; position:absolute; inset:0; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000, transparent 80%);
}
.count-head{ position:relative; z-index:1; margin-bottom:clamp(2rem,4vw,3rem); }
.count-head .eyebrow{ color:var(--blue-l); }
.count-head h2{ color:#fff; max-width:20ch; }
.count-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.count{
  padding:1.6rem 1.4rem; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(6px);
  transition:background-color var(--t) var(--ease), transform var(--t) var(--ease),
             border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.count:hover{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24);
  transform:translateY(-7px); box-shadow:var(--sh-dark);
}
.count b{
  display:block; font-family:"Space Grotesk",sans-serif; font-size:clamp(2.3rem,4.4vw,3.3rem);
  font-weight:700; letter-spacing:-.04em; line-height:1;
}
.count:nth-child(1) b{ color:var(--blue-l); }
.count:nth-child(2) b{ color:#ff7a6e; }
.count:nth-child(3) b{ color:#4ade4a; }
.count:nth-child(4) b{ color:#7cc8ff; }
.count span{ display:block; margin-top:.85rem; font-weight:600; font-size:.98rem; color:#fff; }
.count p{ margin-top:.3rem; font-size:.85rem; color:#8d99ad; line-height:1.5; }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start; margin-top:clamp(2rem,4vw,2.75rem);
}
.about-copy p{ color:var(--ink-2); font-size:1.06rem; }
.about-copy p + p{ margin-top:1.15rem; }
.about-quote{
  margin:2rem 0 0; padding:1.35rem 0 1.35rem 1.6rem;
  border-left:4px solid var(--blue); border-radius:2px;
  font-family:"Space Grotesk",sans-serif; font-size:1.22rem; font-weight:600;
  letter-spacing:-.02em; line-height:1.35; color:var(--ink);
}
.about-quote footer{ margin-top:.65rem; font-family:"Inter",sans-serif; font-size:.84rem;
  font-weight:500; color:var(--muted); letter-spacing:0; }

.about-side{ display:grid; gap:1rem; }
.ab{
  --accent:var(--blue); --accent-rgb:0,152,248;
  position:relative; display:flex; gap:1.1rem; padding:1.4rem 1.5rem;
  border-radius:var(--r); cursor:pointer;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .35s var(--ease), border-color .35s var(--ease);
}
.ab:nth-child(2){ --accent:var(--red);   --accent-rgb:248,0,0; }
.ab:nth-child(3){ --accent:var(--green); --accent-rgb:0,152,0; }
.ab:hover{ transform:translateY(-5px); background-color:#fff;
  border-color:rgba(var(--accent-rgb),.3); box-shadow:var(--sh-hover); }
.ab-i{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--accent); color:#fff; box-shadow:var(--sh-sm);
  transition:transform .4s cubic-bezier(.34,1.5,.64,1), border-radius .35s var(--ease);
}
.ab:hover .ab-i{ transform:scale(1.08) rotate(-6deg); border-radius:50%; }
.ab-i svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.ab h3{ font-size:1.03rem; margin-bottom:.3rem; transition:color .35s var(--ease); }
.ab:hover h3{ color:var(--accent); }
.ab p{ color:var(--muted); font-size:.92rem; }

/* ---------- services ---------- */
.svc-grid{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; }
.svc{
  --accent:var(--blue);
  --accent-rgb:0,152,248;
  position:relative; padding:1.9rem 1.7rem 1.8rem; border-radius:var(--r); cursor:pointer;
  background:rgba(255,255,255,.78); backdrop-filter:blur(6px);
  border:1px solid var(--line); box-shadow:var(--sh-sm); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease), background-color .35s var(--ease);
}
/* light sweeps across the card on hover */
.svc::before{
  content:""; position:absolute; top:-50%; left:-65%; width:45%; height:200%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-22deg); transition:left .75s var(--ease);
}
.svc:hover::before{ left:135%; }
/* accent bar wipes along the top edge */
.svc::after{
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:var(--accent); transition:width .45s var(--ease);
}
.svc:hover{
  transform:translateY(-9px); background-color:#fff; border-color:rgba(var(--accent-rgb),.35);
  box-shadow:var(--sh-hover);
}
.svc:hover::after{ width:100%; }
.svc:nth-child(2),.svc:nth-child(6){ --accent:var(--red);   --accent-rgb:248,0,0; }
.svc:nth-child(3),.svc:nth-child(5){ --accent:var(--green); --accent-rgb:0,152,0; }

.svc-i{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--accent); color:#fff; margin-bottom:1.25rem;
  box-shadow:var(--sh);
  transition:transform .45s cubic-bezier(.34,1.5,.64,1), box-shadow .35s var(--ease), border-radius .35s var(--ease);
}
.svc:hover .svc-i{
  transform:scale(1.12) rotate(-8deg); border-radius:50%;
  box-shadow:var(--sh-lg);
}
.svc-i svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.9; }
.svc:nth-child(4) .svc-i{ background:var(--blue-d); }
.svc:nth-child(5) .svc-i{ background:var(--green-d); }
.svc:nth-child(6) .svc-i{ background:var(--red-d); }
.svc h3{ font-size:1.18rem; margin-bottom:.6rem; transition:color .35s var(--ease); }
.svc:hover h3{ color:var(--accent); }
.svc p{ color:var(--muted); font-size:.95rem; }
/* "Learn more" arrow slides up into view */
.svc-go{
  display:flex; align-items:center; gap:.45rem; margin-top:1.1rem;
  font-size:.86rem; font-weight:600; color:var(--accent);
  opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.svc:hover .svc-go{ opacity:1; transform:none; }
.svc-go svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4;
  transition:transform .35s var(--ease); }
.svc:hover .svc-go svg{ transform:translateX(4px); }

/* ---------- bento / why ---------- */
.why{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(245,249,253,.5),rgba(238,246,253,.95),rgba(245,249,253,.5));
  border-block:1px solid var(--line);
}
.bento{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.bx{
  --accent:var(--blue);
  --accent-rgb:0,152,248;
  position:relative; overflow:hidden; padding:1.8rem; border-radius:var(--r); cursor:pointer;
  background:rgba(255,255,255,.88); backdrop-filter:blur(6px);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .35s var(--ease), border-color .35s var(--ease);
}
/* left edge fills in with the accent colour */
.bx::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:4px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.bx:hover::after{ transform:scaleY(1); }
.bx:hover{
  transform:translateY(-8px); background-color:#fff; border-color:rgba(var(--accent-rgb),.32);
  box-shadow:var(--sh-hover);
}
.bx > *{ position:relative; z-index:1; }
.bx h3{ font-size:1.2rem; margin-bottom:.55rem; transition:color .35s var(--ease); }
.bx:hover h3{ color:var(--accent); }
.bx p{ color:var(--muted); font-size:.95rem; }
.bx:nth-child(3){ --accent:var(--green); --accent-rgb:0,152,0; }
.bx:nth-child(4){ --accent:var(--red);   --accent-rgb:248,0,0; }
.bx:nth-child(5){ --accent:var(--blue-d);--accent-rgb:0,122,208; }

.bx-tag{
  display:inline-block; margin-bottom:1rem; padding:.3rem .78rem; border-radius:100px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(var(--accent-rgb),.12); color:var(--accent);
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.bx:hover .bx-tag{ background:var(--accent); color:#fff; }

.bx-wide{ grid-column:span 2; display:flex; gap:1.9rem; align-items:center; }
.bx-wide .bx-copy{ flex:1; }
.bx-dark{
  border-color:#17232f; color:#fff;
  background:
    radial-gradient(20rem 14rem at 100% 0%, rgba(0,152,248,.40), transparent 65%),
    linear-gradient(135deg,#0f1a26,#17232f);
}
.bx-dark:hover{
  background:
    radial-gradient(22rem 16rem at 100% 0%, rgba(0,152,248,.55), transparent 68%),
    linear-gradient(135deg,#0f1a26,#17232f);
  border-color:rgba(0,152,248,.4);
  box-shadow:var(--sh-dark);
}
.bx-dark:hover h3{ color:#fff; }
.bx-dark p{ color:#96a2b4; }
.bx-dark .bx-tag{ background:rgba(255,255,255,.13); color:#fff; }
.bx-dark:hover .bx-tag{ background:var(--blue); color:#fff; }

.plats{ display:grid; gap:.6rem; flex:none; }
.plat{
  display:flex; align-items:center; gap:.65rem; padding:.7rem 1.05rem; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  font-size:.86rem; font-weight:600; white-space:nowrap;
  transition:background-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.plat:hover{ background:rgba(255,255,255,.16); transform:translateX(5px); box-shadow:var(--sh); }
.plat svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
.plat:nth-child(1){ color:var(--blue-l); }
.plat:nth-child(2){ color:#4ade4a; }
.plat:nth-child(3){ color:#ff7a6e; }

.bx-num b{
  display:block; font-family:"Space Grotesk",sans-serif; font-size:3.1rem; line-height:1;
  letter-spacing:-.04em; color:var(--blue-d); margin-bottom:.7rem;
}

/* ---------- process ---------- */
.steps{ margin-top:clamp(2.75rem,5vw,3.75rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; }
.steps::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:3px; border-radius:3px;
  background:var(--grad-brand); opacity:.28;
}
.step{ position:relative; text-align:center; cursor:pointer; }
.step-n{
  width:54px; height:54px; margin:0 auto 1.15rem; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--line); box-shadow:var(--sh-sm);
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.05rem;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease),
             transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.step:nth-child(1):hover .step-n{ border-color:var(--red);   color:var(--red);     box-shadow:var(--sh-lg); }
.step:nth-child(2):hover .step-n{ border-color:var(--blue);  color:var(--blue-d);  box-shadow:var(--sh-lg); }
.step:nth-child(3):hover .step-n{ border-color:var(--green); color:var(--green-d); box-shadow:var(--sh-lg); }
.step:nth-child(4):hover .step-n{ border-color:var(--blue-d);color:var(--blue-dd); box-shadow:var(--sh-lg); }
.step:hover .step-n{ transform:translateY(-6px) scale(1.08); }
.step h3{ font-size:1.05rem; margin-bottom:.45rem; }
.step p{ color:var(--muted); font-size:.9rem; }

/* ---------- contact / footer ---------- */
.cta-card{
  position:relative; overflow:hidden; border-radius:26px; padding:clamp(2.5rem,5vw,4.25rem);
  background:linear-gradient(135deg,#0b1420,#121e2c 60%,#0d1824); color:#fff; box-shadow:var(--sh-xl);
}
.cta-card::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(30rem 20rem at 5% 0%,   rgba(0,152,248,.50), transparent 62%),
    radial-gradient(26rem 18rem at 97% 96%, rgba(248,0,0,.34),   transparent 62%),
    radial-gradient(24rem 16rem at 58% 108%,rgba(0,152,0,.32),   transparent 62%);
}
.cta-card::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,#000,transparent 75%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.cta-inner{ position:relative; z-index:1; }
.cta-card h2{ color:#fff; max-width:18ch; }
.cta-card .eyebrow{ color:var(--blue-l); }
.cta-note{ margin-top:1.15rem; color:#96a2b4; font-size:1rem; max-width:50ch; }
.cta-mail{
  display:inline-flex; align-items:center; gap:.85rem; margin-top:1.7rem;
  font-family:"Space Grotesk",sans-serif; font-size:clamp(1.3rem,3.4vw,2.25rem); font-weight:700;
  letter-spacing:-.035em; color:#fff; padding-bottom:.3rem;
  border-bottom:2px solid rgba(255,255,255,.32); cursor:pointer;
  transition:border-color var(--t) var(--ease), gap var(--t) var(--ease), color var(--t) var(--ease);
}
.cta-mail:hover{ border-color:var(--blue); color:var(--blue-l); gap:1.25rem; }
.cta-mail svg{ width:.6em; height:.6em; stroke:currentColor; fill:none; stroke-width:2.5; }
.cta-info{
  position:relative; z-index:1; margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:2.1rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem;
}
.cta-info h4{ font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#8592a5; margin-bottom:.6rem; }
.cta-info p, .cta-info a{ color:#dce3ec; font-size:1rem; }
.cta-info a{ cursor:pointer; transition:color var(--t) var(--ease); }
.cta-info a:hover{ color:var(--blue-l); }

.footer{ border-top:1px solid var(--line); padding-block:2.25rem; background:rgba(245,249,253,.85); position:relative; z-index:1; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; justify-content:space-between; }
.footer img{ height:64px; width:auto; }
.footer p{ font-size:.86rem; color:var(--muted); }

/* ---------- reveal ---------- */
.js .up{ opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .up.in{ opacity:1; transform:none; }
.js .up[data-d="1"]{ transition-delay:.09s; }
.js .up[data-d="2"]{ transition-delay:.18s; }
.js .up[data-d="3"]{ transition-delay:.27s; }
.js .up[data-d="4"]{ transition-delay:.36s; }

/* ==========================================================
   responsive
   ========================================================== */
@media (max-width:1040px){
  .hero-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .visual{ max-width:520px; margin-inline:auto; width:100%; }
  .hero h1{ max-width:none; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .count-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .steps::before{ display:none; }
}
@media (max-width:820px){
  :root{ --head-h:88px; }
  .brand img{ height:64px; }
  .footer img{ height:52px; }
  .nav{ display:none; }
  .burger{ display:block; }
  .cta-info{ grid-template-columns:1fr; gap:1.6rem; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  :root{ --head-h:78px; }
  .brand img{ height:56px; }
  .svc-grid,.bento,.steps,.count-grid{ grid-template-columns:1fr; }
  .bx-wide{ grid-column:span 1; flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .plats{ width:100%; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1; }
  .visual{ padding:.5rem 1.75rem 2.5rem .5rem; }
  .phone{ width:108px; }
  .chip{ font-size:.72rem; padding:.45rem .7rem; }
  .chip-web{ top:-8px; left:-6px; }
  .chip-app{ right:-8px; }
  .ed-body{ font-size:.72rem; }
  .hero-trust{ gap:1.4rem 2rem; }
}

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