/* Pixel Insource stylesheet
   Layout: the founder portfolio's language (white ground, black primary, glass cards, black spotlight panels, pill nav)
   recoloured with Pixel Insource's own gradients: the six-stop "renaissance" headline gradient and three pastel product gradients.
   Single light theme by choice, matching the portfolio. */
:root{
  --bg:#ffffff; --bg-2:#f5f5f5; --black:#0a0a0a; --black-2:#161616;
  --text:#3c3c3c; --muted:#727272; --line:#e7e7e5; --line-2:#d2d2cf;
  --amber:#FEAC5E; --rose:#E35E88; --violet:#8920D6; --indigo:#5648EA; --teal:#2CD8D5; --blush:#FFBAC3;
  --pi:linear-gradient(90deg,var(--amber),var(--rose),var(--violet),var(--indigo),var(--teal),var(--blush));
  --g-web:linear-gradient(90deg,#C2B7FB,#F3E1EC);
  --g-app:linear-gradient(225deg,#FED89A,#FECCD4);
  --g-dm:linear-gradient(50deg,#84BDF5,#CCFADA);
  --holo:linear-gradient(115deg,#79D8D1 0%,#B9B2EE 34%,#DDB9E2 52%,#FFF6C8 74%,#FBE2C0 100%);
  --sky:#33BCFF; --azure:#0087FF; --orchid:#B566FF;
  --f-logo:"Arimo","Arial","Helvetica Neue",Helvetica,sans-serif;
  --ok:#14b886;
  --f-head:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --f-body:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:20px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.9)}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1200px;margin:0 auto}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--black);color:#fff}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--black);margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,82px);line-height:1.04;letter-spacing:-.04em;font-weight:800}
h2{font-size:clamp(32px,4.2vw,52px);line-height:1.1;letter-spacing:-.035em;font-weight:700}
h3{font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:700}
h2 em,h1 em{font-style:normal;font-weight:inherit;color:#8a8a8a}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--black)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--pi)}
.grad{background:var(--pi);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{50%{background-position:100% 0}}

/* atmosphere */
.blob{position:absolute;z-index:0;pointer-events:none}
/* holographic aurora from the logo's P: sits behind the hero and scrolls away with it */
.blob.a{width:min(820px,110vw);height:min(820px,110vw);right:-16vw;top:-300px;border-radius:44% 56% 62% 38%/42% 46% 54% 58%;
  background:conic-gradient(from 210deg,#79D8D1,#B9B2EE,#DDB9E2,#FFF6C8,#FBE2C0,#9FE3D8,#79D8D1);
  filter:blur(80px);opacity:.55;animation:aurora 26s ease-in-out infinite alternate}
.blob.b{width:min(520px,80vw);height:min(520px,80vw);left:-18vw;top:520px;border-radius:58% 42% 40% 60%/50% 60% 40% 50%;
  background:conic-gradient(from 40deg,#FFF6C8,#FBE2C0,#DDB9E2,#B9B2EE,#FFF6C8);filter:blur(90px);opacity:.4;animation:aurora 32s ease-in-out infinite alternate-reverse}
.blob.c{display:none}
@keyframes aurora{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(40deg) scale(1.08) translate(-30px,20px);border-radius:56% 44% 38% 62%/52% 38% 62% 48%}100%{transform:rotate(80deg) scale(.96) translate(20px,40px)}}

/* Pixel Insource logo: the P mark in holographic gradient, the bolt standing in for the I */
.wm{display:inline-flex;align-items:baseline;font:700 1em/1 var(--f-logo);letter-spacing:-.01em;color:var(--black);white-space:nowrap}
.wm svg{display:inline-block;flex:none}
.wm .wm-p{height:.716em;width:calc(.716em * 280 / 383);margin-right:.01em}
.wm .wm-b{height:.716em;width:calc(.716em * 195 / 383);margin:0 .02em 0 .24em}
.wm.light{color:#fff}
.logo-ico{width:42px;height:42px;border-radius:12px;background:var(--black);display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.logo-ico svg{width:28px;height:21px}
.logo-ico::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%);animation:glint 5s ease-in-out infinite 1.5s}
@keyframes glint{30%,100%{transform:translateX(100%)}}

/* gradient blob (from pixelinsource.com) */
.gblob{position:absolute;pointer-events:none;filter:blur(70px);opacity:.9}
.gblob i{position:absolute;display:block}
.gblob i:nth-child(1){left:37%;top:22%;width:38%;height:40%;background:var(--sky)}
.gblob i:nth-child(2){left:34%;top:38%;width:37%;height:40%;background:var(--azure);clip-path:polygon(0 0,100% 25%,100% 100%,10% 100%)}
.gblob i:nth-child(3){left:25%;top:24%;width:25%;height:28%;background:var(--orchid)}

/* brand band */
.brand{position:relative;overflow:hidden;isolation:isolate;padding:90px 48px 54px;text-align:center}
.brand .gblob{width:900px;height:900px;left:50%;top:-30%;transform:translateX(-50%);z-index:-1;opacity:.75;animation:breathe 10s ease-in-out infinite}
@keyframes breathe{50%{transform:translateX(-50%) scale(1.12) rotate(8deg)}}
.brand .eyebrow{justify-content:center}
.brand .big-wm{font-size:clamp(46px,11vw,150px);margin-top:26px}
.brand .big-wm.wm{color:#fff}
.brand > p{color:#cfcfcf;font-size:clamp(17px,1.6vw,20px);max-width:56ch;margin:22px auto 0}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px;text-align:left}
.pillars div{padding:20px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:0}
.pillars b{display:block;font:700 16px/1.3 var(--f-head);color:#fff}
.pillars span{font-size:14px;color:#a9a9a9}
.pillars i{display:block;width:28px;height:4px;border-radius:4px;background:var(--holo);margin-bottom:14px}
@media (max-width:860px){.pillars{grid-template-columns:1fr 1fr}.brand{padding:60px 20px 24px}}
@media (max-width:440px){.pillars{grid-template-columns:1fr}}
@keyframes drift{to{transform:translate(-50px,70px) scale(1.08)}}
header,main,footer{position:relative;z-index:2}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--pi);z-index:70}

.glass{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -20px rgba(0,0,0,.14)}
.dark{background:var(--black);color:#c9c9c9;border-radius:var(--r);position:relative;overflow:hidden;isolation:isolate}
.dark h2,.dark h3,.dark h4,.dark .eyebrow{color:#fff}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(137,32,214,.28),transparent 55%)}
.spot:hover::before{opacity:1}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:500 15px/1 var(--f-body);text-decoration:none;cursor:pointer;background:var(--black);color:#fff;border:1px solid var(--black);white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--rose),var(--violet),var(--indigo));opacity:0;transition:opacity .35s}
.btn:hover::after{opacity:1}
.btn:hover{border-color:transparent;transform:translateY(-2px)}
.btn.light{background:#fff;color:var(--black);border-color:var(--line-2);box-shadow:none}
.btn.light::after{display:none}
.btn.light:hover{border-color:var(--black)}
.btn.white{background:#fff;color:var(--black);border-color:#fff}
.btn.white:hover{color:#fff}
.btn svg{width:16px;height:16px;transition:transform .3s}
.btn:hover svg{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--black);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link svg{width:15px;height:15px;transition:transform .3s}.link:hover svg{transform:translateX(4px)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.05);color:var(--black)}
.dark .chips span{background:rgba(255,255,255,.08);color:#e9e9e9}

/* nav */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;font:800 22px/1 var(--f-head);letter-spacing:-.03em;color:var(--black)}
.pxmark{display:grid;grid-template-columns:repeat(3,8px);gap:2px;padding:7px;border-radius:12px;background:var(--black)}
.pxmark i{width:8px;height:8px;border-radius:2px;background:#fff}
.pxmark i:nth-child(1){background:var(--amber)}.pxmark i:nth-child(2){background:var(--rose)}.pxmark i:nth-child(3){background:var(--violet)}
.pxmark i:nth-child(5){background:var(--indigo)}.pxmark i:nth-child(6){background:transparent}.pxmark i:nth-child(7){background:var(--teal)}
.pxmark i:nth-child(8),.pxmark i:nth-child(9){background:transparent}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:6px;border-radius:999px;background:rgba(0,0,0,.035)}
.nav ul a{display:block;padding:8px 15px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--text);transition:all .25s}
.nav ul a:hover{background:#fff;color:var(--black);box-shadow:0 2px 8px -2px rgba(0,0,0,.15)}
.nav .btn{padding:12px 22px;font-size:14px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px}
.menu-btn .x{display:none}
.topbar.open .menu-btn .x{display:block}.topbar.open .menu-btn .b{display:none}
.mnav{display:none}
@media (max-width:1240px){
  .nav ul,.nav .nav-cta{display:none}
  .menu-btn{display:grid}
  .topbar.open .mnav{display:grid;gap:2px;padding-block:8px 18px}
  .mnav a{display:flex;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line);text-decoration:none;font:600 17px/1.2 var(--f-head);color:var(--black)}
  .mnav a svg{width:18px;height:18px}
  .mnav .btn{margin-top:12px;justify-content:center;border-bottom:0;color:#fff}
}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:70px 60px}
.tagline{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;font-size:13.5px;color:var(--text)}
.tagline b{background:var(--black);color:#fff;font-weight:500;border-radius:999px;padding:4px 10px;font-size:12px}
.hero h1{margin-top:22px}
.rotator{display:inline-grid;vertical-align:bottom}
.rotator > span{grid-area:1/1;opacity:0;transform:translateY(40%);transition:opacity .5s,transform .5s;padding-bottom:.06em}
.rotator > span.on{opacity:1;transform:none}
.rotator > span.out{opacity:0;transform:translateY(-40%)}
.lede{font-size:18.5px;max-width:54ch;margin-top:24px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-stats{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:44px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font:800 34px/1.1 var(--f-head);color:var(--black);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:13.5px;color:var(--muted)}
.rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) backwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

.orbit{position:relative;width:min(470px,100%);aspect-ratio:1;margin:0 auto}
.ring{position:absolute;border-radius:50%;border:1px dashed var(--line-2);animation:spin var(--d) linear infinite}
.ring.r1{inset:0}.ring.r2{inset:19%}
.oi{position:absolute;inset:0;transform:rotate(var(--a))}
.oi > div{position:absolute;left:50%;top:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
.badge{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 7px;border-radius:999px;font:600 13px/1 var(--f-head);color:var(--black);white-space:nowrap;animation:spin var(--d) linear infinite reverse}
.badge img{width:24px;height:24px;padding:3px;border-radius:50%;background:#fff;border:1px solid var(--line)}
@keyframes spin{to{transform:rotate(360deg)}}
.oi > div > .badge{animation:none}
.ring .oi > div{animation:counter var(--d) linear infinite}
@keyframes counter{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg))}}
.core{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle at 35% 25%,#2a2a2a,#0a0a0a 70%);display:grid;place-items:center;text-align:center;box-shadow:0 40px 70px -30px rgba(0,135,255,.55),0 0 0 10px rgba(255,255,255,.7)}
.core svg{width:52%;height:auto}
.orbit .gblob{inset:-10%;opacity:.55;z-index:-1}
.orbit{isolation:isolate}
.core::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;background:conic-gradient(var(--amber),var(--rose),var(--violet),var(--indigo),var(--teal),var(--blush),var(--amber));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite}
.core b{display:block;font:800 34px/1 var(--f-head);letter-spacing:-.04em}
.core small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;animation:bob 6s ease-in-out infinite}
.float-card b{display:block;font:700 14px/1.2 var(--f-head);color:var(--black)}
.float-card small{font-size:12px;color:var(--muted)}
.float-card .sw{width:34px;height:34px;border-radius:10px}
.fc1{left:-4%;bottom:10%}.fc2{right:-4%;top:8%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-block:44px 40px}.orbit{width:min(400px,100%)}}
@media (max-width:480px){.badge{font-size:11.5px;padding:5px 10px 5px 5px}.badge img{width:20px;height:20px}.fc1{left:0}.fc2{right:0}}

/* client logos */
.clients{padding-block:40px 70px}
.clients .rating{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:14px;color:var(--muted)}
.clients .rating b{font:800 16px/1 var(--f-head);color:var(--black)}
.clients .stars{color:#f5b301;letter-spacing:1px}
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.clogo{display:flex;align-items:center;justify-content:center;gap:10px;min-height:96px;padding:18px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--c);white-space:nowrap;min-width:0;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.clogo:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 40px -24px rgba(0,0,0,.35)}
.clogo svg{width:30px;height:30px;flex:none}
.clogo b{font-size:20px;line-height:1;color:var(--black)}
.clogo small{display:block;font:500 9px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;color:var(--muted)}
@media (max-width:1000px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.clogo{min-height:80px}.clogo b{font-size:16px!important}.clogo svg{width:24px;height:24px}}

/* our work */
.wk-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:10px;margin-bottom:22px}
.wk-filters{display:flex;flex-wrap:wrap;gap:6px}
.wk-filters button{font:500 14px/1 var(--f-body);padding:11px 16px;border-radius:999px;border:0;background:transparent;color:var(--text);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.wk-filters button span{font-size:12px;color:var(--muted)}
.wk-filters button[aria-pressed="true"]{background:var(--black);color:#fff}
.wk-filters button[aria-pressed="true"] span{color:#aaa}
.wk-search{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:var(--bg-2);min-width:min(280px,100%);flex:0 1 300px}
.wk-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.wk-search input{border:0;background:transparent;font:400 15px/1 var(--f-body);padding:12px 0;width:100%;color:var(--black);outline:none}
.wk-count{font-size:14px;color:var(--muted);margin:0 0 16px}
.wk-count b{color:var(--black)}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wk{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;min-width:0}
.wk:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
.wk-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--cv);display:grid;place-items:center}
.wk-cover .ini{font:800 64px/1 var(--f-head);letter-spacing:-.05em;color:rgba(10,10,10,.82)}
.wk-cover .ind{position:absolute;left:14px;bottom:12px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.6)}
.wk-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wk:hover .wk-cover img{transform:scale(1.04)}
.wk-st{position:absolute;right:12px;top:12px;z-index:2;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--black);display:inline-flex;align-items:center;gap:6px}
.wk-st i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.wk-st.Ongoing i{background:#f5b301}.wk-st.Closed i{background:#9a9a9a}
.wk-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.wk-body .tag{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.wk-body h3{font-size:20px}
.wk-body p{font-size:14.5px;color:var(--muted)}
.wk-body .chips{margin-top:2px}
.wk-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14.5px;color:var(--black);text-decoration:none;align-self:flex-start;border-bottom:1px solid currentColor}
.wk-go svg{width:14px;height:14px}
.wk-go.off{color:var(--muted);border-bottom:0}
.wk-more{display:flex;justify-content:center;margin-top:30px}
.wk-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}
@media (max-width:960px){.wk-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.wk-grid{grid-template-columns:1fr}.wk-search{flex:1 1 100%}}

/* marquee */
.marquee{overflow:hidden;padding-block:6px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:slide 45s linear infinite;padding-block:6px}
.track.rev{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
.tech{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;font:600 15px/1 var(--f-head);color:var(--black)}
.tech img{width:30px;height:30px;padding:5px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.tech .ab{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--f-head);color:#fff;background:var(--black)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.block{padding-block:100px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:44px}
.head > div{display:flex;flex-direction:column;gap:14px;max-width:640px}
.head > p{max-width:420px;color:var(--muted)}
@media (max-width:700px){.block{padding-block:70px}}

/* product lines (the three pastel gradients) */
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.line{border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.line.web{background:var(--g-web)}.line.app{background:var(--g-app)}.line.dm{background:var(--g-dm)}
.line .ico{width:52px;height:52px;border-radius:16px;background:var(--black);display:grid;place-items:center}
.line .ico svg{width:24px;height:24px}
.line .kicker{font:600 13px/1 var(--f-head);color:rgba(0,0,0,.6);letter-spacing:.02em}
.line h3{font-size:30px;letter-spacing:-.03em}
.line > p{color:#2e2e2e}
.subs{display:grid;gap:0;margin-top:4px;background:rgba(255,255,255,.6);border-radius:14px;padding:4px 16px}
.subs div{padding:13px 0;border-top:1px solid rgba(0,0,0,.07)}
.subs div:first-child{border-top:0}
.subs b{display:block;font:700 15px/1.3 var(--f-head);color:var(--black)}
.subs span{font-size:14px;color:#4a4a4a}
.line .link{margin-top:auto;align-self:flex-start}
@media (max-width:960px){.lines{grid-template-columns:1fr}}

/* bento extras */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.tile{padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tile .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--black)}
.tile.dark .ico{background:#fff}
.tile .ico svg{width:21px;height:21px}
.tile p{font-size:15px;color:var(--muted)}
.tile.dark p{color:#bdbdbd}
.tile.wide{grid-column:span 2}
.tile .big{font:800 46px/1 var(--f-head);letter-spacing:-.04em}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tile.wide{grid-column:auto}}

/* feature rows */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;padding-block:56px}
.feature.flip > :first-child{order:2}
.feature h2{margin-top:14px}
.feature .l{font-size:17.5px;margin-top:18px;max-width:50ch}
.checks{list-style:none;padding:0;margin:24px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.checks li{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--black)}
.checks li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--pi);-webkit-mask:radial-gradient(circle,#000 38%,transparent 40%),radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,#000 38%,transparent 40%),radial-gradient(circle,transparent 62%,#000 64%)}
.stage{border-radius:28px;padding:28px;min-height:360px;display:grid;align-items:center}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:32px;padding-block:36px}.feature.flip > :first-child{order:0}}
@media (max-width:440px){.checks{grid-template-columns:1fr}}

/* 7 day board */
.week{display:grid;gap:10px}
.wd{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.05)}
.wd b{font:800 13px/1 var(--f-head);color:var(--black)}
.wd span{font-size:14.5px;color:var(--black);font-weight:500}
.wd i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.wd.done i{background:var(--ok);box-shadow:0 0 0 4px rgba(20,184,134,.18)}
.wd.live{background:var(--black)}.wd.live b,.wd.live span{color:#fff}
.wd.live i{background:var(--teal);box-shadow:0 0 0 4px rgba(44,216,213,.25)}

/* phones */
.phones{display:flex;justify-content:center;gap:14px;align-items:flex-end}
.ph{width:31%;max-width:150px;aspect-ratio:9/18.5;border-radius:24px;background:var(--black);padding:6px;box-shadow:0 30px 50px -30px rgba(0,0,0,.5)}
.ph:nth-child(2){transform:translateY(-22px)}
.scr{height:100%;border-radius:19px;background:#fff;padding:12px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.scr small{font-size:10px;color:var(--muted)}
.scr b{font:800 15px/1.1 var(--f-head);color:var(--black)}
.scr .card{height:56px;border-radius:12px}
.scr .r{height:10px;border-radius:6px;background:var(--bg-2)}
.scr .r.s{width:60%}
.scr .bars{display:flex;align-items:flex-end;gap:4px;height:54px}
.scr .bars i{flex:1;border-radius:4px;background:var(--pi)}

/* flow svg */
.flow svg{width:100%;height:auto}

/* metrics */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{background:rgba(255,255,255,.85);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.metric small{font-size:12.5px;color:var(--muted)}
.metric b{font:800 26px/1 var(--f-head);color:var(--black);font-variant-numeric:tabular-nums}
.metric .up{font-size:12px;font-weight:500;color:var(--ok)}
.metric.dk{background:var(--black)}.metric.dk b{color:#fff}.metric.dk small{color:#9a9a9a}
.metric svg{width:100%;height:40px}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.step{padding:24px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.step .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 15px/1 var(--f-head);color:#fff;background:var(--black);position:relative}
.step .n::after{content:"";position:absolute;inset:-3px;border-radius:14px;padding:2px;background:var(--pi);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.step h3{font-size:18px}
.step p{font-size:14.5px;color:var(--muted)}
.step .when{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* products */
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.prod{padding:28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;min-width:0}
.prod:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(86,72,234,.45)}
.prod .top{display:flex;justify-content:space-between;align-items:center}
.prod .pico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--black)}
.prod .pico svg{width:22px;height:22px}
.prod .role{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prod h3{font-size:24px}
.prod p{color:var(--muted);font-size:15px}
.prod .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--black);font-size:14.5px}
.prod .go svg{width:15px;height:15px}
.sister{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px;padding:18px 22px}
.sister > span{font-size:14px;color:var(--muted);margin-right:6px}
.sister a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font:600 14px/1 var(--f-head);color:var(--black);background:#fff}
.sister a:hover{border-color:var(--black)}
@media (max-width:960px){.prods{grid-template-columns:1fr}}

/* band */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:46px 40px}
.band div{display:flex;flex-direction:column;gap:6px}
.band b{font:800 clamp(36px,4.6vw,56px)/1 var(--f-head);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.band span{color:#a9a9a9;font-size:14.5px}
@media (max-width:760px){.band{grid-template-columns:1fr 1fr;padding:32px 24px}}

/* industries */
.ind{display:flex;flex-wrap:wrap;gap:10px}
.ind span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font:600 15px/1 var(--f-head);color:var(--black)}
.ind span i{width:10px;height:10px;border-radius:3px}

/* leadership */
.lead{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;overflow:hidden;padding:0}
.lead-photo{position:relative;min-height:380px;background:var(--g-web)}
.lead-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.lead-photo .tag{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px}
.lead-photo .tag b{display:block;font:700 15px/1.2 var(--f-head);color:var(--black)}
.lead-photo .tag small{font-size:12px;color:var(--muted)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(20,184,134,.5);animation:pulse 2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 12px rgba(20,184,134,0)}}
.lead-text{padding:44px;display:flex;flex-direction:column;gap:16px}
.lead-text h2{font-size:clamp(30px,3.6vw,44px)}
.lead-text .role{font-weight:500;color:var(--black)}
.lead-text p.b{color:var(--text)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px}
.facts div{padding:14px;border-radius:14px;background:var(--bg-2)}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:2px 0 0;font:800 20px/1.2 var(--f-head);color:var(--black)}
.lead-text .xp{font-size:14.5px;color:var(--muted)}
@media (max-width:860px){.lead{grid-template-columns:1fr}.lead-photo{min-height:340px}.lead-text{padding:28px}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

/* locations */
.regions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.region{padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.region .rt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.region small{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.region small i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(44,216,213,.25)}
.clock{font:600 14px/1 var(--f-head);color:#fff;font-variant-numeric:tabular-nums}
.region h3{font-size:20px;margin-top:8px}
.region p{font-size:14px;color:#a9a9a9}
.locsec{padding:56px 40px}
.locsec .head > p{color:#a9a9a9}
@media (max-width:1000px){.regions{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.regions{grid-template-columns:1fr}.locsec{padding:32px 20px}}
.locsec .region{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px}

/* world map band */
.mapsec{background:var(--black);color:#c9c9c9;position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(56px,8vw,96px)}
.mapsec > .gblob{width:900px;height:900px;left:50%;top:-20%;transform:translateX(-50%);opacity:.32;z-index:-1}
.mapsec h2,.mapsec h3,.mapsec .eyebrow{color:#fff}
.mapsec .head > p{color:#a9a9a9}
.map{position:relative;width:100%;aspect-ratio:2400/950;max-width:1500px;margin:8px auto 0}
.map > img,.map > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.arc{fill:none;stroke:url(#arcg);stroke-width:2.6;stroke-dasharray:8 10;animation:dash 2.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-36}}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2}
.pin .pdot{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.pin .pdot::before,.pin .pdot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(51,188,255,.8);animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.pin .pdot::after{animation-delay:1.2s;border-color:rgba(181,102,255,.8)}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}
.pin.sm .pdot{width:8px;height:8px}
.pin.sm .pdot::before,.pin.sm .pdot::after{display:none}
.pin .lbl{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;padding:7px 12px;border-radius:999px;background:rgba(20,20,20,.85);border:1px solid #333;color:#fff;font:500 12.5px/1 var(--f-body);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,color .3s}
.pin .lbl small{color:#9a9a9a;margin-left:6px;font-size:11.5px}
.pin.below .lbl{bottom:auto;top:calc(100% + 10px)}
.pin.left .lbl{left:auto;right:calc(100% + 10px);bottom:50%;transform:translateY(50%)}
.pin.on .lbl{background:#fff;color:var(--black);border-color:#fff}
.pin.on .lbl small{color:#666}
.mapsec .regions{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
.mapsec .region{background:rgba(255,255,255,.04);border:1px solid #262626;border-radius:16px;padding:22px 22px 0;overflow:hidden;transition:border-color .3s,background .3s}
.mapsec .region:hover,.mapsec .region:focus-within{border-color:#5a5a5a;background:rgba(255,255,255,.07)}
.mapsec .region .cities{color:#fff;font-weight:500;font-size:14px;margin:2px 0 6px}
.mapsec .region p{margin:0 0 18px}
.mapsec .region .rf{margin:auto -22px 0;padding:15px 22px;border-top:1px solid #262626;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px;font-weight:500;text-decoration:none}
.mapsec .region .rf svg{width:16px;height:16px;transition:transform .3s}
.mapsec .region .rf:hover{background:rgba(255,255,255,.06)}
.mapsec .region .rf:hover svg{transform:translateX(4px)}
.serve{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.serve > span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;margin-right:6px}
.serve b{font:500 13.5px/1 var(--f-body);color:#e5e5e5;padding:8px 13px;border-radius:999px;border:1px solid #2c2c2c}
@media (max-width:960px){.mapsec .regions{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .mapsec .regions{grid-template-columns:1fr}
  .pin .lbl{font-size:10px;padding:4px 7px;bottom:calc(100% + 6px)}.pin .lbl small{display:none}
  .pin.below .lbl{top:calc(100% + 6px)}.pin.left .lbl{right:calc(100% + 6px)}
  .pin .pdot{width:8px;height:8px}.pin.sm .lbl{display:none}
}

/* faq */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{padding:6px 24px;border-radius:16px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font:700 18px/1.35 var(--f-head);color:var(--black)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);font:500 18px/1 var(--f-body);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--black);color:#fff}
.faq details p{padding-bottom:18px;color:var(--muted);max-width:70ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;padding-bottom:100px}
.c-info{padding:40px;display:flex;flex-direction:column;gap:18px}
.c-info h2{font-size:clamp(32px,3.8vw,46px)}
.c-info h2 em{background:var(--pi);-webkit-background-clip:text;background-clip:text;color:transparent}
.perks{list-style:none;padding:0;margin:4px 0;display:grid;gap:10px}
.perks li{display:flex;gap:10px;align-items:center;color:#e5e5e5}
.perks li::before{content:"✓";width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;background:rgba(255,255,255,.1);color:var(--teal)}
.numrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.numrow span{font:600 18px/1 var(--f-head);color:#fff;user-select:all;font-variant-numeric:tabular-nums}
.numrow button{font:500 13px/1 var(--f-body);padding:9px 14px;border-radius:999px;border:0;background:#fff;color:var(--black);cursor:pointer}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;background:#25D366;color:#06301a;text-decoration:none;font-weight:500;align-self:flex-start}
.wa-btn svg{width:20px;height:20px}
.f{padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;padding:0;margin:0}
.fld.full{grid-column:1/-1}
.fld label,.fld legend{font-size:13.5px;font-weight:500;color:var(--black);padding:0}
.fld legend{margin-bottom:7px}
.opt{color:var(--muted);font-weight:400}
.fld input,.fld select,.fld textarea{font:400 15.5px/1.4 var(--f-body);padding:13px 15px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--black);width:100%}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(86,72,234,.12)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{display:inline-block;padding:10px 15px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:500;transition:all .2s}
.opts input:checked + span{background:var(--black);border-color:var(--black);color:#fff}
.opts input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px}
.f .btn{grid-column:1/-1;justify-content:center}
.note{grid-column:1/-1;font-size:13.5px;color:var(--muted);text-align:center}
.note.err{color:var(--rose)}
.sent{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 10px}
.sent .ok{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:26px;background:var(--pi)}
@media (max-width:900px){.contact{grid-template-columns:1fr}.c-info,.f{padding:26px}}
@media (max-width:480px){.f{grid-template-columns:1fr}}

/* footer */
footer{background:var(--black);color:#a9a9a9;padding-block:80px 30px;margin-top:0;overflow:hidden;isolation:isolate}
footer > .gblob{z-index:-1}
.fhero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-bottom:50px;border-bottom:1px solid #222}
.fhero h2{color:#fff;font-size:clamp(40px,6vw,76px);letter-spacing:-.04em}
.fhero h2 em{background:var(--pi);-webkit-background-clip:text;background-clip:text;color:transparent}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-block:50px}
.fgrid .wordmark{color:#fff}
.fgrid p{margin-top:14px;max-width:34ch;font-size:15px}
.fgrid h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.02em}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.fgrid a{text-decoration:none}.fgrid a:hover{color:#fff}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid #2a2a2a;color:#fff}
.soc a:hover{background:#fff;color:var(--black)}
.soc svg{width:18px;height:18px}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #222;font-size:13.5px}
.fbot div{display:flex;gap:18px;flex-wrap:wrap}
.fbot a{text-decoration:none}.fbot a:hover{color:#fff}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}

.wa-float{position:fixed;right:max(20px,calc(env(safe-area-inset-right,0px) + 20px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7)}
.wa-float svg{width:28px;height:28px}
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--black);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* =========================================================
   Multi-page additions
   ========================================================= */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--black);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* founder photo: plain white, no gradient */
.lead-photo{background:#fff;border-right:1px solid var(--line)}
.lead-photo img{object-fit:contain;object-position:50% 100%}
@media (max-width:860px){.lead-photo{border-right:0;border-bottom:1px solid var(--line)}}

/* nav dropdown */
.nav ul li{position:relative}
.nav ul a[aria-current="page"],.nav ul .dd.on > a{background:#fff;color:var(--black);box-shadow:0 2px 8px -2px rgba(0,0,0,.15)}
.nav .dd > a{display:flex;align-items:center;gap:6px}
.nav .dd > a svg{width:12px;height:12px;transition:transform .25s}
.nav .dd:hover > a svg,.nav .dd:focus-within > a svg{transform:rotate(180deg)}
.nav .sub{position:absolute;left:-10px;top:calc(100% + 10px);width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -24px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .22s}
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .dd:hover .sub,.nav .dd:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:grid;grid-template-columns:38px 1fr;gap:4px 12px;align-items:center;padding:10px 12px;border-radius:14px;white-space:normal}
.nav .sub a:hover{box-shadow:none;background:var(--bg-2)}
.nav .sub a i{grid-row:span 2;width:38px;height:38px;border-radius:11px;display:block}
.nav .sub a b{font:700 14.5px/1.2 var(--f-head);color:var(--black)}
.nav .sub a small{font-size:12.5px;line-height:1.35;color:var(--muted)}
.nav .sub .all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;background:var(--bg-2);font-weight:500;color:var(--black)}
.mnav .msub{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;padding:4px 0 8px 12px;border-bottom:1px solid var(--line)}
.mnav .msub a{font:500 15px/1.2 var(--f-body);border-bottom:0;padding:9px 0;color:var(--text)}
@media (max-width:520px){.mnav .msub{grid-template-columns:1fr}}

/* page hero */
.phero{position:relative;padding-block:56px 40px}
.phero .grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.phero h1{font-size:clamp(38px,5.4vw,68px);margin-top:18px}
.phero .lede{font-size:18.5px;max-width:60ch;margin-top:20px}
.phero .ctas{margin-top:28px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--muted)}.crumbs a:hover{color:var(--black)}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:var(--black);font-weight:500}
.hcard{padding:26px;display:flex;flex-direction:column;gap:14px}
.hcard h2{font-size:22px;letter-spacing:-.02em}
.hcard ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hcard li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--black)}
.hcard li svg{width:18px;height:18px;flex:none;margin-top:3px}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.kv div{padding:14px;border-radius:14px;background:var(--bg-2);min-width:0}
.kv dt{font-size:12px;color:var(--muted)}
.kv dd{margin:3px 0 0;font:800 17px/1.2 var(--f-head);color:var(--black)}
@media (max-width:900px){.phero .grid2{grid-template-columns:1fr;gap:28px}}
@media (max-width:440px){.kv{grid-template-columns:1fr 1fr}}

/* generic sections */
.sec{padding-block:80px}
.sec.tight{padding-block:50px}
@media (max-width:700px){.sec{padding-block:56px}}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:960px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.g3,.g2,.g4{grid-template-columns:1fr}}
.card{padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:19px}
.card p{font-size:15px;color:var(--muted)}
.card .n{font:800 13px/1 var(--f-head);letter-spacing:.06em;color:var(--violet)}
.card .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--black);margin-bottom:6px}
.card .ic svg{width:21px;height:21px}
.card .sw{width:44px;height:44px;border-radius:13px;margin-bottom:6px}
a.card{text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
a.card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -28px rgba(0,0,0,.35)}
a.card .more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14.5px;color:var(--black)}
a.card .more svg{width:15px;height:15px;transition:transform .3s}
a.card:hover .more svg{transform:translateX(4px)}

/* two-column content with sidebar */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.side{position:sticky;top:100px;display:grid;gap:16px}
@media (max-width:980px){.cols{grid-template-columns:1fr}.side{position:static}}
.qcard{padding:26px;display:flex;flex-direction:column;gap:14px}
.qcard h3{color:#fff;font-size:22px}
.qcard p{color:#bdbdbd;font-size:15px}
.qcard .btn{justify-content:center}
.qcard .ln{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.qcard .ln a{color:#fff;text-decoration:none;display:flex;gap:10px;align-items:center}
.qcard .ln svg{width:17px;height:17px;flex:none;color:var(--teal)}
.toc{padding:22px}
.toc b{display:block;font:700 14px/1 var(--f-head);color:var(--black);margin-bottom:12px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:7px;font-size:14.5px}
.toc a{text-decoration:none;color:var(--text)}.toc a:hover{color:var(--black)}

/* prose */
.prose{font-size:17px;line-height:1.75;color:var(--text);max-width:74ch}
.prose > * + *{margin-top:1.05em}
.prose h2{font-size:clamp(26px,3vw,34px);margin-top:1.9em;scroll-margin-top:100px}
.prose h3{font-size:21px;margin-top:1.6em;scroll-margin-top:100px}
.prose a{color:var(--indigo);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--violet)}
.prose strong{color:var(--black)}
.prose blockquote{margin:1.5em 0;padding:18px 22px;border-left:3px solid var(--violet);background:var(--bg-2);border-radius:0 14px 14px 0;color:var(--black)}
.prose .callout{padding:18px 20px;border-radius:16px;background:var(--bg-2);font-size:15.5px}
.prose .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:700 14px/1.3 var(--f-head);color:var(--black);background:var(--bg-2)}
.prose tr:last-child td{border-bottom:0}
.prose td{font-variant-numeric:tabular-nums}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;color:var(--muted);margin-top:20px}
.meta .au{display:flex;align-items:center;gap:10px;color:var(--black);font-weight:500}
.meta .au img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#fff;border:1px solid var(--line)}

/* checklist & deliverables */
.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--black);font-weight:500}
.ticks li span{display:block;font-weight:400;color:var(--muted);font-size:14.5px;margin-top:2px}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--pi);-webkit-mask:radial-gradient(circle,#000 38%,transparent 40%),radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,#000 38%,transparent 40%),radial-gradient(circle,transparent 62%,#000 64%)}
@media (max-width:640px){.ticks{grid-template-columns:1fr}}

/* tech chips row */
.techrow{display:flex;flex-wrap:wrap;gap:10px}
.techrow span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 9px;border-radius:999px;font:600 14px/1 var(--f-head);color:var(--black);background:#fff;border:1px solid var(--line)}
.techrow img{width:22px;height:22px}
.techrow i{width:22px;height:22px;border-radius:50%;background:var(--black);color:#fff;font:700 9px/22px var(--f-head);text-align:center;font-style:normal}

/* city links */
.cities{display:flex;flex-wrap:wrap;gap:10px}
.cities a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;text-decoration:none;font:600 14.5px/1 var(--f-head);color:var(--black);background:#fff;border:1px solid var(--line);transition:all .2s}
.cities a:hover{border-color:var(--black)}
.cities a i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.cities a[aria-current]{background:var(--black);color:#fff;border-color:var(--black)}
.dark .cities a{background:rgba(255,255,255,.06);border-color:#2c2c2c;color:#fff}
.dark .cities a:hover{border-color:#fff}

/* location cards on hub */
.loc-card{padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0}
.loc-card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.loc-card small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.loc-card h3{font-size:20px}
.loc-card p{font-size:14.5px;color:var(--muted)}
.loc-card .km{font:600 13px/1 var(--f-head);color:var(--violet);white-space:nowrap}

/* cta band */
.ctaband{padding:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.ctaband h2{color:#fff;font-size:clamp(28px,3.6vw,44px)}
.ctaband p{color:#bdbdbd;margin-top:12px;max-width:56ch}
.ctaband .ctas{margin-top:0}
.ctaband > .gblob{width:700px;height:700px;right:-160px;top:-260px;opacity:.5;z-index:-1}
@media (max-width:760px){.ctaband{grid-template-columns:1fr;padding:30px 24px}}

/* contact page */
.cmethods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cm{padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cm .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--black);color:#fff;margin-bottom:6px}
.cm .ic.wa{background:#25D366}
.cm .ic svg{width:22px;height:22px}
.cm h3{font-size:18px}
.cm .v{font:600 16px/1.35 var(--f-head);color:var(--black);overflow-wrap:anywhere;user-select:all}
.cm p{font-size:14px;color:var(--muted)}
.cm .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.cm .acts a,.cm .acts button{font:500 13.5px/1 var(--f-body);padding:9px 13px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--black);text-decoration:none;cursor:pointer}
.cm .acts a:hover,.cm .acts button:hover{border-color:var(--black)}
@media (max-width:1000px){.cmethods{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cmethods{grid-template-columns:1fr}}
.cwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
@media (max-width:960px){.cwrap{grid-template-columns:1fr}}
.office{padding:0;overflow:hidden;display:flex;flex-direction:column}
.mapframe{position:relative;aspect-ratio:4/3;background:var(--g-dm);display:grid;place-items:center;text-align:center;max-width:100%}
.mapframe .fb{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;color:var(--black)}
.mapframe .fb svg{width:34px;height:34px}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.office .in{padding:24px;display:flex;flex-direction:column;gap:12px}
.office h3{font-size:20px}
.office address{font-style:normal;color:var(--black);line-height:1.6}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14.5px;margin:0}
.hours dt{color:var(--muted)}.hours dd{margin:0;color:var(--black);font-variant-numeric:tabular-nums}
.open-now{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--black)}
.open-now i{width:9px;height:9px;border-radius:50%;background:#9a9a9a}
.open-now.on i{background:var(--ok);box-shadow:0 0 0 4px rgba(20,184,134,.18)}

/* form extras */
.f .fld .err-msg{font-size:12.5px;color:var(--rose)}
.f .fld.bad input,.f .fld.bad select,.f .fld.bad textarea{border-color:var(--rose)}
.f h2{grid-column:1/-1;font-size:26px}
.f .sub-t{grid-column:1/-1;color:var(--muted);font-size:15px;margin-top:-6px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.consent input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--black)}
.consent a{color:var(--black)}

/* careers */
.empty{padding:40px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.empty .ic{width:64px;height:64px;border-radius:18px;background:var(--holo);display:grid;place-items:center}
.empty .ic svg{width:28px;height:28px}
.empty h3{font-size:22px}
.empty p{color:var(--muted);margin-top:6px;max-width:60ch}
@media (max-width:760px){.empty{grid-template-columns:1fr;padding:26px}}
.job{padding:24px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.job .meta{margin-top:6px}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;min-width:0}
.post:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
.post .cv{aspect-ratio:16/9;background:var(--cv);position:relative;display:flex;align-items:flex-end;padding:18px;overflow:hidden}
.post .cv b{font:800 26px/1.1 var(--f-head);letter-spacing:-.03em;color:rgba(10,10,10,.85);max-width:16ch;text-wrap:balance}
.post .cv span{position:absolute;right:14px;top:14px;font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--black)}
.post .bd{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post h3{font-size:19px}
.post p{font-size:14.5px;color:var(--muted)}
.post .meta{margin-top:auto;padding-top:6px;font-size:13px}
.post.feat{grid-column:span 2}
.post.feat .cv{aspect-ratio:auto;min-height:100%}
@media (min-width:961px){.post.feat{flex-direction:row}.post.feat .cv{flex:1.1}.post.feat .bd{flex:1;padding:28px}.post.feat h3{font-size:26px}}
@media (max-width:960px){.posts{grid-template-columns:1fr 1fr}.post.feat{grid-column:1/-1}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.share a,.share button{font:500 13.5px/1 var(--f-body);padding:9px 13px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--black);text-decoration:none;cursor:pointer}
.author{padding:24px;display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 10%;background:#fff;border:1px solid var(--line)}
.author b{font:700 17px/1.2 var(--f-head);color:var(--black)}
.author p{font-size:14.5px;color:var(--muted);margin-top:4px}

/* clients (real names) */
.cname{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;padding:16px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;text-decoration:none;min-width:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cname:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(0,0,0,.35)}
.cname b{font:800 17px/1.15 var(--f-head);letter-spacing:-.02em;color:var(--black)}
.cname small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cname img{max-height:40px;width:auto}

/* timeline (about) */
.tline{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tline li{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:20px 22px}
.tline b{font:800 15px/1.3 var(--f-head);color:var(--violet)}
.tline h3{font-size:18px}
.tline p{font-size:15px;color:var(--muted);margin-top:4px}
@media (max-width:520px){.tline li{grid-template-columns:1fr;gap:6px}}

/* legal */
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.legal-meta span{font-size:13.5px;padding:7px 12px;border-radius:999px;background:var(--bg-2);color:var(--black)}

/* 404 */
.nf{padding-block:90px 70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.nf .big{font:800 clamp(90px,18vw,200px)/1 var(--f-head);letter-spacing:-.06em}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* footer: five columns + contact list */
.fgrid{grid-template-columns:1.5fr 1fr 1fr .9fr 1fr}
.fcontact{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:14.5px}
.fcontact li{display:flex;gap:10px;align-items:flex-start}
.fcontact svg{width:17px;height:17px;flex:none;margin-top:3px;color:#fff}
.fcontact a{text-decoration:none;color:#c9c9c9}.fcontact a:hover{color:#fff}
@media (max-width:1100px){.fgrid{grid-template-columns:1fr 1fr 1fr}.fgrid > div:first-child{grid-column:1/-1}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
.soc a svg{width:18px;height:18px}

/* keep decorative glows and wide content from widening the page */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.cols > *,.cwrap > *,.grid2 > *,.g2 > *,.g3 > *,.g4 > *{min-width:0}
.bgfx{position:absolute;left:0;right:0;top:0;height:1700px;overflow:hidden;pointer-events:none;z-index:0}
@media (max-width:900px){.hero{overflow:hidden;padding-inline:4px}.orbit{width:min(330px,84%)}}
.consent.fld{flex-direction:row;align-items:flex-start}
.mapframe .fb svg{width:16px;height:16px}
.mapframe .fb > svg{width:34px;height:34px}
.lead.glass{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* industries icon grid */
.indg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.indc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;color:var(--black);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.indc:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(0,0,0,.3)}
.indc svg{width:30px;height:30px}
.indc span{font:600 15px/1.25 var(--f-head)}
@media (max-width:1000px){.indg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.indg{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* location cards: keep the label on its own line */
.loc-card .top{flex-wrap:wrap;row-gap:6px}
.loc-card .km{white-space:normal}

/* services dropdown: "All services" row */
.nav .sub a.all{grid-template-columns:1fr auto;padding:12px 14px}
.nav .sub a.all svg{width:16px;height:16px}

/* spacing before the footer */
main{padding-bottom:20px}
.ctaband{margin-block:10px 30px}

/* blog images */
.post .cv.has-img{padding:0}
.post .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.post:hover .cv img{transform:scale(1.03)}
.post .cv span{z-index:1}
.post.feat .cv.has-img{min-height:320px}
.post-cover{margin:0 0 40px;border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1200/630;max-width:100%;background:var(--bg-2)}
.post-cover img{width:100%;height:100%;object-fit:cover}
.prose img{border-radius:16px;height:auto}
.preview-bar{margin-top:16px;padding:12px 16px;border-radius:12px;background:#fff4d6;color:#5a3d00;font-size:14px}
.blog-cats a{font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.05);color:var(--black);text-decoration:none}
.blog-cats a[aria-current]{background:var(--black);color:#fff}
.pager-site{display:flex;gap:6px;justify-content:center;margin-top:34px}
.pager-site a{min-width:40px;text-align:center;padding:9px 12px;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;color:var(--black)}
.pager-site a[aria-current]{background:var(--black);color:#fff;border-color:var(--black)}

/* job cards */
.job{grid-template-columns:1fr auto}
.job h3{font-size:21px}
.job .meta span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--bg-2);color:var(--black);font-size:13px}
.job details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.job summary{cursor:pointer;font-weight:500;color:var(--black)}
.job .jd{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--text);display:grid;gap:10px}
.job .jd ul{margin:0;padding-left:20px}
@media (max-width:640px){.job{grid-template-columns:1fr}}
[hidden]{display:none!important}
@media (min-width:961px){.post.feat{align-items:center}.post.feat .cv.has-img{aspect-ratio:1200/630;min-height:0;align-self:stretch;flex:1.25}}

/* service icons: line icon on a soft brand tint */
.sico{position:relative;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;color:var(--black);background:#fff;border:1px solid var(--line);overflow:hidden;isolation:isolate;margin-bottom:6px}
.sico::before{content:"";position:absolute;inset:0;background:var(--g);opacity:.55;z-index:-1}
.sico svg{width:25px;height:25px}
a.card:hover .sico::before{opacity:.9}
.sico.sm{width:40px;height:40px;border-radius:12px;margin:0;grid-row:span 2}
.sico.sm svg{width:20px;height:20px}
.nav .sub a .sico{display:grid}

/* footer with separate India and worldwide columns */
.fgrid{grid-template-columns:1.4fr 1fr 1fr .95fr 1fr .9fr}
@media (max-width:1100px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}