/* =========================================================
   jCypher · Concept 05 "Mosaic"
   The whole company on one bento board
   ========================================================= */
:root{
  --bg:#EDF1F8;
  --card:#FFFFFF;
  --ink:#0E1A33;
  --slate:#4A5B7C;
  --muted:#7C8BA8;
  --blue:#2563EB;
  --blue-deep:#1D4ED8;
  --navy:#101E42;
  --sky:#DBEAFE;
  --line:#DFE6F2;
  --r:22px;
  --font:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.board-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.head{padding:26px 0 8px}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:800;font-size:1.15rem;letter-spacing:-.01em;
}
.brand-tile{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-weight:800;
  box-shadow:0 6px 16px rgba(37,99,235,.32);
}
.head-note{font-size:.9rem;color:var(--muted)}
.head-cta{
  font-family:var(--mono);font-size:.8rem;text-decoration:none;color:var(--blue);
  border:1px solid #C6D6F3;border-radius:999px;padding:.5rem 1.1rem;
  transition:background .25s,color .25s;
}
.head-cta:hover{background:var(--blue);color:#fff}

/* ---------- bento board ---------- */
.board{
  display:grid;gap:16px;padding-top:22px;padding-bottom:26px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(96px,auto);
  grid-template-areas:
    "intro intro intro code  code  code"
    "intro intro intro stat1 stat2 stat2"
    "svc   svc   quote quote years years"
    "svc   svc   proc  proc  proc  team"
    "tech  tech  tech  tech  tech  tech"
    "prom  prom  cta   cta   cta   cta";
}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(14,26,51,.04);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s;
}
.tile:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(14,26,51,.12)}
.tile-h{font-size:.85rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.tile-h.light{color:#9FB3E8}

/* intro */
.t-intro{grid-area:intro;display:flex;flex-direction:column;gap:18px;justify-content:center}
.chip{
  align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--blue);background:var(--sky);border-radius:999px;padding:.4rem .95rem;
}
.t-intro h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;line-height:1.14}
.t-intro em{font-style:normal;color:var(--blue)}
.t-intro p{color:var(--slate);max-width:52ch}
.btn{
  align-self:flex-start;text-decoration:none;font-weight:700;font-size:.95rem;
  background:var(--blue);color:#fff;border-radius:14px;padding:.8rem 1.6rem;
  box-shadow:0 8px 22px rgba(37,99,235,.32);
  transition:transform .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,99,235,.42)}

/* code */
.t-code{grid-area:code;background:var(--navy);color:#D7E3FB;border-color:transparent}
.code-dots{display:flex;gap:6px;margin-bottom:16px}
.code-dots i{width:10px;height:10px;border-radius:50%;background:#31406E}
.code-dots i:first-child{background:#F87171}
.code-dots i:nth-child(2){background:#FBBF24}
.code-dots i:nth-child(3){background:#34D399}
.t-code pre{font-family:var(--mono);font-size:.86rem;line-height:1.85;white-space:pre-wrap}
.t-code .k{color:#93B4F5}
.t-code .f{color:#5EEAD4}
.t-code .c{color:#5A6C93}
.code-status{
  margin-top:16px;font-family:var(--mono);font-size:.72rem;color:#34D399;
  border-top:1px solid #21315E;padding-top:12px;
}

/* stats */
.t-stat{display:flex;flex-direction:column;justify-content:center;gap:4px}
.t-stat:nth-of-type(3){grid-area:stat1}
.t-stat:nth-of-type(4){grid-area:stat2}
.s-blue{background:var(--blue);border-color:transparent;color:#fff}
.s-navy{grid-area:years;background:var(--navy);border-color:transparent;color:#fff}
.t-stat[style*="--d:8"]{grid-area:team}
.stat-big{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.stat-big.ink{color:var(--blue)}
.stat-cap{font-size:.85rem;opacity:.85}
.stat-cap.dim{color:var(--muted)}

/* services */
.t-services{grid-area:svc}
.svc-list{list-style:none;display:grid;gap:0}
.svc-list li{
  display:flex;align-items:center;gap:14px;
  padding:13px 4px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:.98rem;
  transition:padding-left .25s,color .25s;
}
.svc-list li:last-child{border-bottom:0}
.svc-list li:hover{padding-left:12px;color:var(--blue)}
.svc-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--sky);color:var(--blue);font-size:1rem;font-weight:400;
}
.svc-list em{
  font-style:normal;font-family:var(--mono);font-weight:400;font-size:.68rem;
  color:var(--muted);margin-left:auto;text-align:right;
}

/* quote */
.t-quote{grid-area:quote;display:flex;flex-direction:column;background:linear-gradient(150deg,#F3F7FF,#E5EEFF)}
.quote-mark{font-size:3rem;font-weight:800;color:var(--blue);line-height:.6;margin-bottom:10px}
.t-quote blockquote{font-size:1.02rem;font-weight:600;line-height:1.55;min-height:4.6em}
.t-quote figcaption{font-size:.8rem;color:var(--muted);margin-top:12px}
.quote-nav{display:flex;gap:8px;margin-top:16px}
.quote-nav button{
  width:26px;height:6px;border-radius:3px;border:0;cursor:pointer;
  background:#C6D6F3;transition:background .3s,width .3s;
}
.quote-nav button.on{background:var(--blue);width:40px}

/* process */
.t-process{grid-area:proc}
.steps{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;counter-reset:s;
}
.steps li{
  counter-increment:s;font-weight:700;font-size:.88rem;
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem .5rem .7rem;
  display:flex;align-items:center;gap:8px;
  transition:border-color .25s,background .25s;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--blue);
  background:var(--sky);border-radius:999px;padding:3px 7px;
}
.steps li:hover{border-color:var(--blue);background:#F3F7FF}
.steps li.hot{background:var(--blue);border-color:var(--blue);color:#fff}
.steps li.hot::before{background:rgba(255,255,255,.2);color:#fff}

/* tech marquee */
.t-tech{grid-area:tech;padding:22px 0;display:flex;align-items:center;overflow:hidden}
.tech-track{
  display:flex;gap:14px;width:max-content;padding:0 14px;
  animation:ticker 30s linear infinite;
}
.t-tech:hover .tech-track{animation-play-state:paused}
.tech-track span{
  font-family:var(--mono);font-size:.8rem;color:var(--slate);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:.45rem 1.05rem;
  background:#F7FAFF;
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* promise */
.t-promise{grid-area:prom;background:var(--navy);color:#E4ECFF;border-color:transparent}
.promise{list-style:none;display:grid;gap:12px}
.promise li{
  position:relative;padding-left:26px;font-weight:600;font-size:.95rem;
}
.promise li::before{
  content:"✓";position:absolute;left:0;top:0;color:#5EEAD4;font-weight:800;
}

/* CTA */
.t-cta{
  grid-area:cta;display:flex;flex-direction:column;gap:18px;justify-content:center;
  background:linear-gradient(120deg,var(--blue-deep),var(--blue) 60%,#4F8DFF);
  color:#fff;border-color:transparent;
}
.t-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.t-cta form{display:flex;gap:10px;flex-wrap:wrap}
.t-cta input{
  flex:1;min-width:200px;padding:.85rem 1.2rem;border-radius:13px;border:0;
  font:inherit;font-size:.93rem;
}
.t-cta input:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:2px}
.t-cta button{
  border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.93rem;
  background:#fff;color:var(--blue-deep);border-radius:13px;padding:.85rem 1.5rem;
  transition:transform .25s,box-shadow .25s;
}
.t-cta button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.cta-small{font-size:.8rem;opacity:.85}

/* ---------- footer ---------- */
.foot{padding:8px 0 40px}
.foot-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}

/* ---------- concept switcher ---------- */
.switcher{
  position:fixed;bottom:22px;right:22px;z-index:60;
  display:flex;gap:5px;padding:6px;
  background:var(--navy);border-radius:999px;
  box-shadow:0 12px 32px rgba(16,30,66,.4);
}
.switcher a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#9FB3E8;text-decoration:none;font-weight:700;font-size:.82rem;
  transition:background .2s,color .2s;
}
.switcher a:hover{background:rgba(255,255,255,.12);color:#fff}
.switcher a.active{background:var(--blue);color:#fff}

/* ---------- reveal (staggered) ---------- */
.reveal{
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0)*70ms);
}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none;transition-delay:0s}
  .tech-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .board{
    grid-template-columns:repeat(4,1fr);
    grid-template-areas:
      "intro intro intro intro"
      "code  code  stat1 stat2"
      "svc   svc   quote quote"
      "svc   svc   years team"
      "proc  proc  proc  proc"
      "tech  tech  tech  tech"
      "prom  prom  cta   cta";
  }
}
@media (max-width:700px){
  .board{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "intro intro"
      "code  code"
      "stat1 stat2"
      "svc   svc"
      "quote quote"
      "years team"
      "proc  proc"
      "tech  tech"
      "prom  prom"
      "cta   cta";
  }
  .tile{padding:22px}
  .head-note{display:none}
}
@media (max-width:420px){
  .board-wrap{padding:0 14px}
  .board{gap:12px}
  .switcher{bottom:14px;right:14px}
  .switcher a{width:30px;height:30px;font-size:.76rem}
}