/* ===========================================================================
   NexoraTechnologies. Written from nothing on 2026-10-24.

   The brief: build it the way Vervoora is built, with more motion and more
   film, and make the coding itself the thing a client falls for.

   So the page borrows Vervoora's anatomy honestly, deep navy and one hot
   orange, a bold two tone headline, white cards floating off the hero and a
   white strip of promises breaking over its bottom edge, and then spends its
   own effort on the part Vervoora has no reason to show: the work being made.
   Four films of real code and one terminal that types itself as you scroll.

   Four products, named in the markup. There is no catalogue file any more:
   four entries do not need one, and nothing cached can disagree with the page.
   =========================================================================== */

@import url("/assets/fonts/faces.css");

:root{
  /* Vervoora's two colours, mixed for ourselves */
  --navy:#0C2340;
  --navy-2:#143256;
  --navy-3:#1D4572;
  --ink:#0A1622;
  --ink-2:#2A3A4D;
  --muted:#5A6B80;
  --faint:#8695A8;

  --orange:#F2660C;
  --orange-2:#FF8233;
  --orange-soft:#FFF1E6;

  --white:#FFFFFF;
  --mist:#F2F6FA;
  --mist-2:#E6EDF5;

  --line:rgba(12,35,64,.12);
  --line-soft:rgba(12,35,64,.07);
  --on-navy:rgba(255,255,255,.16);

  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.22,.78,.3,1);
  --out:cubic-bezier(.16,1,.3,1);
  --shell:1280px;
  --gut:clamp(18px,4vw,52px);
  --r:20px;
  --r-s:13px;
  --nav-h:74px;
  --lift:0 28px 64px -30px rgba(12,35,64,.42), 0 2px 8px rgba(12,35,64,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 16.5px/1.6 var(--body); letter-spacing:-.004em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--orange); color:#fff}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ---------- type ---------- */
.h1,.h2,.h3,.h4{font-family:var(--display); font-weight:700; letter-spacing:-.035em; margin:0; line-height:1.02}
.h1{font-size:clamp(42px,6.6vw,92px)}
.h2{font-size:clamp(30px,4.1vw,58px); line-height:1.05}
.h3{font-size:clamp(22px,2.2vw,30px); letter-spacing:-.028em; line-height:1.14}
.h4{font-size:clamp(17px,1.35vw,20px); letter-spacing:-.02em; line-height:1.25}
.lead{font-size:clamp(16.5px,1.26vw,19.5px); line-height:1.58; color:var(--ink-2); margin:0}
.small{font-size:14.5px; line-height:1.55; color:var(--muted); margin:0}
.on-navy{color:#fff}
.on-navy .lead{color:rgba(255,255,255,.76)}
.on-navy .small{color:rgba(255,255,255,.6)}

/* the pill that labels a section, Vervoora puts one over its hero too */
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px 8px 12px;
  border-radius:999px; background:var(--orange-soft); color:#9C3F02;
  font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
}
.pill svg{width:14px; height:14px}
.on-navy .pill{background:rgba(255,255,255,.1); color:#FFC79C; backdrop-filter:blur(8px)}

.eyebrow{font:500 11.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin:0 0 18px}
.on-navy .eyebrow{color:var(--orange-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  padding:15px 26px; border-radius:999px;
  font:600 15px/1 var(--body); letter-spacing:-.012em; white-space:nowrap;
  transition:transform .35s var(--ease), background .22s, border-color .22s, color .22s, box-shadow .22s;
}
.btn svg{width:16px; height:16px; flex:none; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-orange{background:var(--orange); color:#fff; box-shadow:0 12px 26px -14px rgba(242,102,12,.9)}
.btn-orange:hover{background:#D9550A}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-line{border:1.5px solid var(--line); color:var(--navy)}
.btn-line:hover{border-color:var(--navy); background:rgba(12,35,64,.04)}
.on-navy .btn-line{border-color:var(--on-navy); color:#fff}
.on-navy .btn-line:hover{border-color:#fff; background:rgba(255,255,255,.08)}

/* the cursor in the terminal, blinking while it waits for the next character */
@keyframes blink{50%{opacity:0}}

/* ===========================================================================
   masthead
   =========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:800; height:var(--nav-h);
  display:flex; align-items:center; transition:background .4s var(--ease), box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(255,255,255,.9); backdrop-filter:blur(16px) saturate(1.5); border-bottom-color:var(--line-soft)}
.nav .shell{display:flex; align-items:center; gap:22px}

.brand{display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--navy)}
.brand .mk{width:34px; height:34px; flex:none}
.brand .mk .spin{transform-origin:20px 20px; animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand b{font:700 17px/1 var(--display); letter-spacing:-.035em; display:block}
.brand .sub{font:500 9px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:block; margin-top:5px}
.nav:not(.stuck) .brand{color:#fff}
.nav:not(.stuck) .brand .sub{color:rgba(255,255,255,.5)}

.navlinks{display:flex; gap:2px}
.navlinks a{padding:9px 14px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--muted); transition:color .2s, background .2s}
.navlinks a:hover{color:var(--navy)}
.navlinks a.on{color:var(--navy); background:var(--mist)}
.nav:not(.stuck) .navlinks a{color:rgba(255,255,255,.76)}
.nav:not(.stuck) .navlinks a:hover,.nav:not(.stuck) .navlinks a.on{color:#fff; background:rgba(255,255,255,.12)}

.burger{display:none; width:44px; height:44px; border:1.5px solid var(--line); border-radius:999px; align-items:center; justify-content:center; color:var(--navy)}
.nav:not(.stuck) .burger{border-color:var(--on-navy); color:#fff}
.burger svg{width:18px; height:18px}

.drawer{
  position:fixed; inset:var(--nav-h) 0 auto; z-index:790; background:var(--white);
  border-bottom:1px solid var(--line); display:grid; padding:10px var(--gut) 24px;
  clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{padding:14px 2px; font:700 21px/1 var(--display); letter-spacing:-.03em; color:var(--navy); border-bottom:1px solid var(--line-soft)}

@media (max-width:980px){
  .navlinks{display:none}
  .burger{display:flex}
  .nav > .shell > .btn{display:none}
}

/* ===========================================================================
   hero
   =========================================================================== */
.hero{position:relative; background:var(--navy); color:#fff; isolation:isolate; overflow:hidden}
.hero-film{position:absolute; inset:0; z-index:0}
.hero-film img,.hero-film video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; will-change:transform}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(104deg,rgba(12,35,64,.96) 0%,rgba(12,35,64,.84) 42%,rgba(12,35,64,.56) 72%,rgba(12,35,64,.4) 100%),
    linear-gradient(180deg,rgba(12,35,64,.8) 0%,transparent 26%);
}
/* a faint grid, so the navy is a surface and not a fill */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 70% 30%,#000,transparent 72%);
}
.hero .shell{position:relative; z-index:2; padding-top:calc(var(--nav-h) + clamp(42px,6vw,88px)); padding-bottom:clamp(120px,13vw,190px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:center}
.hero h1{margin:22px 0 0}
.hero h1 .o{color:var(--orange-2)}
.hero-copy .lead{margin-top:24px; max-width:48ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* Vervoora's example card, in our terms: one build, with what it cost in days */
.spec{background:var(--white); color:var(--ink); border-radius:var(--r); padding:26px 26px 22px; box-shadow:var(--lift); position:relative}
.spec .k{font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin:0 0 16px}
.spec .top{display:flex; align-items:center; gap:13px}
.spec .ico{width:44px; height:44px; border-radius:13px; background:var(--mist); display:grid; place-items:center; color:var(--navy); flex:none}
.spec .ico svg{width:22px; height:22px}
.spec .nm{font:700 18px/1.15 var(--display); letter-spacing:-.03em; margin:0}
.spec .mt{font:500 12px/1 var(--mono); color:var(--faint); margin:6px 0 0}
.spec .route{margin:22px 0 18px}
.spec .route svg{width:100%; height:42px; overflow:visible}
.spec .price{display:flex; align-items:baseline; gap:10px}
.spec .price b{font:700 clamp(32px,3vw,40px)/1 var(--display); letter-spacing:-.05em; color:var(--navy)}
.spec .price span{font-size:13.5px; color:var(--muted)}
.spec .note{margin:12px 0 0; font-size:12.5px; color:var(--faint)}

/* the white strip of promises breaking over the bottom of the hero */
.promise{position:relative; z-index:6; margin-top:clamp(-96px,-9vw,-70px)}
.promise .in{
  background:var(--white); border-radius:var(--r); box-shadow:var(--lift);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.promise .p{padding:22px 24px; display:flex; gap:12px; align-items:flex-start; border-right:1px solid var(--line-soft)}
.promise .p:last-child{border-right:0}
.promise .p svg{width:19px; height:19px; flex:none; color:var(--orange); margin-top:2px}
.promise .p b{display:block; font:600 14.5px/1.25 var(--body); color:var(--navy)}
.promise .p span{display:block; font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:4px}
@media (max-width:1040px){ .promise .in{grid-template-columns:repeat(2,1fr)} .promise .p:nth-child(2){border-right:0} }
@media (max-width:620px){ .promise .in{grid-template-columns:1fr} .promise .p{border-right:0; border-bottom:1px solid var(--line-soft)} .promise .p:last-child{border-bottom:0} }
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .spec{max-width:420px}
}

/* ===========================================================================
   sections
   =========================================================================== */
.sec{position:relative; padding:clamp(70px,8vw,124px) 0}
.sec-mist{background:var(--mist)}
.sec-navy{background:var(--navy); color:#fff}
.sec-head{max-width:800px; margin-bottom:clamp(36px,4.4vw,60px)}
.sec-head .lead{margin-top:18px}
.sec-head.row{max-width:none; display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px}
@media (max-width:820px){ .sec-head.row{grid-template-columns:1fr} }

/* reveals: the script hides these, one tick before it shows them */
.word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.05em; margin-bottom:-.05em}
.word > span{display:inline-block; will-change:transform,filter,opacity}

/* ===========================================================================
   the terminal that types itself as you scroll
   =========================================================================== */
.term-wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4vw,64px); align-items:center}
@media (max-width:900px){ .term-wrap{grid-template-columns:1fr} }
.term{
  background:#071424; border-radius:var(--r); overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(7,20,36,.8); border:1px solid rgba(255,255,255,.07);
}
.term-bar{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03)}
.term-bar i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); display:block}
.term-bar i:first-child{background:#FF5F57} .term-bar i:nth-child(2){background:#FEBC2E} .term-bar i:nth-child(3){background:#28C840}
.term-bar span{margin-left:8px; font:500 11.5px/1 var(--mono); color:rgba(255,255,255,.4); letter-spacing:.04em}
.term-body{
  padding:20px clamp(16px,2vw,24px) 24px; min-height:clamp(290px,34vw,420px);
  font:500 clamp(11.5px,1.05vw,13.5px)/1.85 var(--mono); color:#A9C3DD;
  white-space:pre-wrap; word-break:break-word;
}
.term-body .q{color:var(--orange-2)}
.term-body .c{color:#EAF2FB}
.term-body .ok{color:#59D98B}
.term-body .dim{color:#5C738C}
.term-body .n{color:#7FD3F7}
.term-cursor{display:inline-block; width:.6em; height:1em; background:var(--orange-2); vertical-align:-.14em; animation:blink .9s steps(1) infinite}
.term-steps{display:grid; gap:2px; margin-top:clamp(26px,3vw,38px); counter-reset:ts}
.ts{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:17px 0 17px 0; border-top:1px solid var(--line); position:relative}
/* Only the step the terminal is on is lit, so the pairing between the two columns is
   unmistakable. Gated on .motion, because without the script no step is ever the current one and
   dimming three of four would just be three paragraphs nobody can read. */
.motion .ts{opacity:.4; transition:opacity .5s var(--ease), padding-left .5s var(--ease)}
.motion .ts.on{opacity:1; padding-left:16px}
.motion .ts::before{
  content:""; position:absolute; left:0; top:17px; bottom:17px; width:2px; border-radius:2px;
  background:var(--orange); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.motion .ts.on::before{transform:scaleY(1)}
.sec-navy .ts{border-top-color:var(--on-navy)}
.ts .num{font:500 11.5px/1.6 var(--mono); color:var(--orange); letter-spacing:.14em}
.ts h4{margin:0 0 5px}
.ts p{margin:0; font-size:14.5px; line-height:1.5; color:var(--muted)}
.sec-navy .ts p{color:rgba(255,255,255,.62)}
.ts.on .num{color:var(--orange-2)}

/* ===========================================================================
   the four products
   =========================================================================== */
.work{display:grid; gap:clamp(64px,8vw,132px)}
.item{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(26px,4vw,70px); align-items:center}
.item.flip .shots{order:2}
@media (max-width:980px){ .item,.item.flip{grid-template-columns:1fr} .item.flip .shots{order:0} }

.shots{position:relative; padding-bottom:clamp(26px,4vw,52px); padding-right:clamp(26px,4vw,56px)}
/* the browser frame */
.frame{border-radius:var(--r); overflow:hidden; background:var(--white); box-shadow:var(--lift); border:1px solid var(--line-soft)}
.frame .chrome{display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--mist); border-bottom:1px solid var(--line-soft)}
.frame .chrome i{width:9px; height:9px; border-radius:50%; background:var(--mist-2); display:block}
.frame .chrome span{margin-left:8px; flex:1; height:19px; border-radius:999px; background:var(--white); border:1px solid var(--line-soft); font:500 10.5px/19px var(--mono); color:var(--faint); padding-inline:10px; overflow:hidden; white-space:nowrap}
.frame .pane{position:relative; aspect-ratio:1400/875; overflow:hidden; background:var(--mist)}
.frame .pane img{width:100%; height:100%; object-fit:cover; object-position:top}
/* the second view slides over the first on hover and on scroll */
.frame .pane img.b{position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease)}
.item:hover .frame .pane img.b{opacity:1}
/* the phone, hanging off the corner */
.phone{
  position:absolute; right:0; bottom:0; width:clamp(104px,13vw,168px);
  border-radius:clamp(14px,1.6vw,22px); overflow:hidden; background:#fff;
  box-shadow:0 26px 50px -22px rgba(12,35,64,.55); border:4px solid #fff;
}
.phone img{width:100%; height:auto; display:block}

.item .meta .pill{margin-bottom:18px}
.item .meta h3{margin:0 0 14px}
.item .meta p{margin:0 0 20px; color:var(--muted); font-size:16px; line-height:1.6}
.facts{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-s); overflow:hidden; margin-bottom:22px}
.facts div{background:var(--white); padding:14px 16px; display:flex; align-items:baseline; gap:12px}
.facts b{font:700 18px/1 var(--display); letter-spacing:-.03em; color:var(--navy); min-width:3.4ch; font-variant-numeric:tabular-nums}
.facts span{font-size:13.5px; line-height:1.4; color:var(--muted)}
.sec-mist .facts div{background:var(--white)}
.stack{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px}
.stack span{font:500 11.5px/1 var(--mono); letter-spacing:.04em; padding:7px 11px; border-radius:999px; background:var(--mist); color:var(--ink-2)}

/* ===========================================================================
   full bleed film bands
   =========================================================================== */
.band{position:relative; overflow:hidden; isolation:isolate; background:var(--navy); color:#fff}
.band-film{position:absolute; inset:-8% 0; z-index:0}
.band-film img,.band-film video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; will-change:transform}
.band::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(98deg,rgba(10,22,34,.92) 0%,rgba(10,22,34,.7) 46%,rgba(10,22,34,.3) 100%)}
.band .shell{position:relative; z-index:2; padding-block:clamp(78px,10vw,150px)}
.band-copy{max-width:640px}
.band-copy p{margin:22px 0 0; font-size:clamp(16.5px,1.4vw,19px); line-height:1.58; color:rgba(255,255,255,.76)}
.ticks{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
.tick{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--on-navy); border-radius:999px; font:500 12px/1 var(--mono); letter-spacing:.03em}
.tick svg{width:13px; height:13px; color:var(--orange-2)}

/* ===========================================================================
   numbers
   =========================================================================== */
.figs{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px)}
.fig{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r-s); padding:24px 24px 22px}
.sec-navy .fig{background:rgba(255,255,255,.05); border-color:var(--on-navy)}
.fig b{display:block; font:700 clamp(32px,3.6vw,48px)/1 var(--display); letter-spacing:-.05em; color:var(--navy)}
.sec-navy .fig b{color:#fff}
.fig span{display:block; font-size:13.5px; line-height:1.45; color:var(--muted); margin-top:10px}
.sec-navy .fig span{color:rgba(255,255,255,.6)}
.fig .spark{height:26px; margin-top:16px; display:flex; align-items:flex-end; gap:4px}
.fig .spark i{flex:1; background:var(--orange); opacity:.3; border-radius:2px; transform-origin:bottom}
.fig .spark i:last-child{opacity:.9}
@media (max-width:980px){ .figs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .figs{grid-template-columns:1fr} }

/* ---------- markets marquee ---------- */
.strip{border-block:1px solid var(--line); padding:18px 0; overflow:hidden; display:flex; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.sec-navy .strip,.band + .strip{border-color:var(--on-navy)}
.strip ul{display:flex; gap:44px; margin:0; padding:0 22px 0 0; list-style:none; flex:none; animation:slide 46s linear infinite}
.strip li{font:500 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); white-space:nowrap; display:flex; align-items:center; gap:44px}
.strip li::after{content:""; width:3px; height:3px; border-radius:50%; background:var(--orange); flex:none}
@keyframes slide{to{transform:translateX(-100%)}}
.strip:hover ul{animation-play-state:paused}

/* ---------- closing ---------- */
.closer .shell{padding-block:clamp(84px,11vw,160px)}
.closer-in{max-width:700px}
.closer h2{margin-bottom:20px}

/* ===========================================================================
   footer
   =========================================================================== */
.foot{background:var(--ink); color:#fff; padding:clamp(54px,6vw,84px) 0 38px}
.foot .brand{color:#fff}
.foot .brand .sub{color:rgba(255,255,255,.4)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,52px)}
.foot h5{font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.42); margin:0 0 16px}
.foot nav{display:grid; gap:10px}
.foot nav a{font-size:14.5px; color:rgba(255,255,255,.72); transition:color .2s}
.foot nav a:hover{color:var(--orange-2)}
.foot .blurb{font-size:14.5px; color:rgba(255,255,255,.66); margin:16px 0 0; max-width:34ch}
.credits{margin-top:clamp(38px,4.4vw,58px); padding-top:22px; border-top:1px solid var(--on-navy); display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between}
.credits p{margin:0; font-size:12px; line-height:1.65; color:rgba(255,255,255,.45); max-width:86ch}
.credits a{color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:3px}
.credits a:hover{color:var(--orange-2)}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ===========================================================================
   less movement, on request
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .strip ul{animation:none}
  /* With no script running the terminal there is no current step, so all four read at full
     strength rather than three of them being dimmed for no reason. */
  .ts{opacity:1 !important; padding-left:0 !important}
}