/* =========================================================
   JMFCool Development
   COMPLETE TURNKEY style.css
========================================================= */

:root
{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#fafbfd;

  --border:#dfe5ee;

  --text:#10151e;
  --muted:#596579;

  --blue:#1c5fd9;
  --blue-dark:#144aac;

  --dark:#0b0f16;
  --dark-card:#151b24;
  --dark-border:#29313d;

  --shadow:
    0 16px 45px rgba(15,20,32,.08);

  --max-width:1200px;
}

html.dark
{
  --bg:#0b0f16;
  --surface:#11161e;
  --surface-soft:#151b24;

  --border:#29313d;

  --text:#eef3f8;
  --muted:#98a4b4;

  --shadow:
    0 18px 55px rgba(0,0,0,.30);
}


/* =========================================================
   BASE
========================================================= */

*
{
  box-sizing:border-box;
}

html
{
  scroll-behavior:smooth;
}

body
{
  margin:0;

  background:var(--bg);
  color:var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.6;
}

a
{
  color:inherit;
  text-decoration:none;
}

button
{
  font:inherit;
}


/* =========================================================
   HEADER
========================================================= */

.site-header
{
  position:sticky;
  top:0;
  z-index:100;

  background:
    color-mix(
      in srgb,
      var(--surface) 94%,
      transparent
    );

  border-bottom:
    1px solid var(--border);

  backdrop-filter:
    blur(16px);
}

.header-inner
{
  max-width:var(--max-width);

  min-height:70px;

  margin:0 auto;

  padding:
    0 22px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:30px;
}


/* =========================================================
   JMFCool BLOCK EMBLEM
========================================================= */

.brand
{
  display:flex;

  align-items:center;

  gap:9px;

  justify-self:start;

  white-space:nowrap;

  font-weight:800;
}

.brand-mark
{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  position:relative;

  overflow:hidden;

  border-radius:5px;

  background:var(--blue);

  color:#ffffff;

  box-shadow:
    0 0 0 3px rgba(28,95,217,.10),
    0 0 16px rgba(28,95,217,.24);
}

.brand-mark::before
{
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(255,255,255,.38);

  border-radius:3px;
}

.brand-mark span
{
  position:relative;

  z-index:2;

  font-size:10px;

  font-weight:900;

  line-height:1;

  letter-spacing:-.8px;
}

.brand-name
{
  font-size:14px;

  font-weight:800;
}


/* =========================================================
   CENTERED NAVIGATION
========================================================= */

.main-nav
{
  grid-column:2;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:28px;

  margin:0;
}

.main-nav a
{
  position:relative;

  font-size:12px;

  color:var(--muted);

  font-weight:700;

  transition:
    color .2s ease;
}

.main-nav a::after
{
  content:"";

  position:absolute;

  left:0;
  right:0;

  bottom:-7px;

  height:2px;

  width:0;

  margin:auto;

  background:var(--blue);

  transition:
    width .2s ease;
}

.main-nav a:hover
{
  color:var(--blue);
}

.main-nav a:hover::after
{
  width:100%;
}


/* =========================================================
   HEADER RIGHT SIDE
========================================================= */

.header-controls
{
  grid-column:3;

  justify-self:end;

  display:flex;

  align-items:center;
}


/* =========================================================
   SLIDE TOGGLE
========================================================= */

.theme-toggle
{
  width:47px;
  height:27px;

  padding:0;

  border:
    1px solid
    var(--border);

  border-radius:999px;

  background:var(--surface);

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease;

  appearance:none;
}

.theme-toggle:hover
{
  border-color:var(--blue);
}

.toggle-track
{
  position:relative;

  display:block;

  width:100%;
  height:100%;
}

.toggle-thumb
{
  position:absolute;

  top:3px;
  left:3px;

  width:19px;
  height:19px;

  border-radius:50%;

  background:var(--blue);

  box-shadow:
    0 2px 8px
    rgba(28,95,217,.35);

  transition:
    transform .24s ease;
}

html.dark .theme-toggle
{
  background:#19212c;

  border-color:#344152;
}

html.dark .toggle-thumb
{
  transform:translateX(20px);
}


/* =========================================================
   HERO
========================================================= */

.hero
{
  background:var(--surface);

  border-bottom:
    1px solid var(--border);
}

.hero-inner
{
  max-width:var(--max-width);

  margin:0 auto;

  padding:
    92px
    22px
    84px;

  display:grid;

  grid-template-columns:
    1.08fr
    .92fr;

  gap:70px;

  align-items:center;
}

.status
{
  display:flex;

  width:max-content;

  align-items:center;

  gap:9px;

  padding:
    7px
    12px;

  border:
    1px solid
    var(--border);

  border-radius:999px;

  background:var(--surface-soft);

  font-size:11px;

  font-weight:800;
}


/* =========================================================
   GLOWING DOT
========================================================= */

.dot
{
  display:inline-block;

  width:8px;
  height:8px;

  flex:0 0 8px;

  border-radius:50%;

  background:var(--blue);

  box-shadow:
    0 0 0 4px
      rgba(28,95,217,.12),
    0 0 13px
      rgba(28,95,217,.75);

  animation:
    jmfcool-pulse 1.8s
    ease-in-out infinite;
}

@keyframes jmfcool-pulse
{
  0%,
  100%
  {
    transform:scale(1);
    opacity:1;
  }

  50%
  {
    transform:scale(1.28);
    opacity:.65;
  }
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.eyebrow
{
  margin:
    0
    0
    13px;

  color:var(--muted);

  font-size:10px;

  font-weight:900;

  letter-spacing:.16em;
}

.hero .eyebrow
{
  margin-top:29px;
}

h1,
h2,
h3,
p
{
  margin-top:0;
}

h1
{
  margin-bottom:25px;

  font-size:
    clamp(
      52px,
      7vw,
      84px
    );

  line-height:.98;

  letter-spacing:-.065em;
}

h1 em
{
  color:var(--blue);

  font-style:normal;
}

.hero-copy
{
  max-width:650px;

  color:var(--muted);

  font-size:17px;
}


/* =========================================================
   BUTTONS
========================================================= */

.actions
{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:30px;
}

.btn
{
  display:inline-flex;

  align-items:center;

  gap:16px;

  padding:
    12px
    17px;

  border-radius:9px;

  font-size:12px;

  font-weight:900;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.primary
{
  background:var(--blue);

  color:#ffffff;
}

.primary:hover
{
  background:var(--blue-dark);

  transform:translateY(-1px);
}

.secondary
{
  background:var(--surface);

  border:
    1px solid
    var(--border);
}

.secondary:hover
{
  color:var(--blue);

  border-color:var(--blue);
}

.flow
{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:34px;

  color:var(--muted);

  font-size:9px;

  letter-spacing:.13em;
}

.flow i
{
  color:var(--blue);

  font-style:normal;
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal-card
{
  overflow:hidden;

  border:
    1px solid
    #252d39;

  border-radius:17px;

  background:#0b0f16;

  box-shadow:var(--shadow);
}

.window
{
  height:44px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:
    0 15px;

  border-bottom:
    1px solid
    #252d39;
}

.window span
{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#394452;
}

.window small
{
  margin-left:8px;

  color:#7e8998;

  font-size:9px;
}

.terminal
{
  min-height:330px;

  padding:27px;

  color:#dbe3ec;

  font:
    12px/1.5
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.terminal p
{
  margin-bottom:13px;
}

.terminal b
{
  color:#8eb4ff;
}

.terminal .muted
{
  color:#697585;
}

.terminal .ok
{
  color:#91d9a6;
}

.terminal .accent
{
  color:#8eb4ff;
}

.progress
{
  height:4px;

  margin:
    22px
    0;

  overflow:hidden;

  border-radius:99px;

  background:#1c2430;
}

.progress span
{
  display:block;

  width:100%;
  height:100%;

  background:var(--blue);

  animation:
    load 1.5s ease-out;
}

@keyframes load
{
  from
  {
    width:0;
  }

  to
  {
    width:100%;
  }
}


/* =========================================================
   SECTIONS
========================================================= */

.section
{
  max-width:var(--max-width);

  margin:0 auto;

  padding:
    100px
    22px;
}

.heading
{
  display:grid;

  grid-template-columns:
    1fr
    .6fr;

  gap:55px;

  align-items:end;

  margin-bottom:42px;
}

.heading h2,
.experience h2,
.eco h2,
.cta h2
{
  margin:0;

  font-size:
    clamp(
      38px,
      5vw,
      61px
    );

  line-height:1;

  letter-spacing:-.055em;
}

.heading > p
{
  margin:0;

  color:var(--muted);

  font-size:14px;
}


/* =========================================================
   DEVELOPMENT CARDS
========================================================= */

.card-grid
{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:13px;
}

.card
{
  position:relative;

  min-height:235px;

  overflow:hidden;

  padding:27px;

  border:
    1px solid
    var(--border);

  border-radius:16px;

  background:var(--surface);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.card::before,
.project-card::before
{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:0;
  height:3px;

  background:var(--blue);

  transition:
    width .28s ease;
}

.card:hover::before,
.project-card:hover::before
{
  width:100%;
}

.card:hover
{
  transform:translateY(-3px);

  box-shadow:var(--shadow);
}

.card > b
{
  color:var(--blue);

  font-size:10px;
}

.card h3
{
  margin:
    42px
    0
    9px;

  font-size:20px;

  letter-spacing:-.03em;
}

.card p
{
  color:var(--muted);

  font-size:12px;
}


/* =========================================================
   PROJECTS
========================================================= */

.projects
{
  background:var(--surface-soft);

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);
}

.project-grid
{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;
}

.project-card
{
  position:relative;

  min-height:265px;

  overflow:hidden;

  padding:29px;

  border:
    1px solid
    var(--dark-border);

  border-radius:16px;

  background:var(--dark-card);

  color:#f1f5f9;

  transition:
    transform .2s ease,
    border-color .2s ease;
}

.project-card:hover
{
  transform:translateY(-3px);

  border-color:#376fda;
}

.project-card small
{
  color:#8b97a7;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;
}

.project-card h3
{
  margin:
    65px
    0
    9px;

  font-size:31px;

  letter-spacing:-.05em;
}

.project-card p
{
  max-width:470px;

  color:#a6b0be;

  font-size:12px;
}

.project-card > span
{
  position:absolute;

  right:27px;
  bottom:23px;

  color:var(--blue);

  font-size:21px;
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.tech
{
  display:grid;

  grid-template-columns:
    1fr
    .55fr;

  gap:75px;

  align-items:center;
}

.tech-cloud
{
  display:flex;

  flex-wrap:wrap;

  gap:9px;
}

.tech-cloud span
{
  padding:
    12px
    15px;

  border:
    1px solid
    var(--border);

  border-radius:999px;

  background:var(--surface);

  font-size:12px;

  font-weight:800;
}

.tech-list
{
  padding-left:30px;

  border-left:
    1px solid
    var(--border);
}

.tech-list p
{
  margin:0;

  padding:14px 0;

  border-bottom:
    1px solid
    var(--border);

  font-size:12px;

  font-weight:800;
}

.tech-list b
{
  margin-right:14px;

  color:var(--blue);
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-grid
{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:95px;
}

.large
{
  font-size:24px;

  line-height:1.35;

  letter-spacing:-.025em;
}

.experience-grid
> div:last-child
> p:not(.large)
{
  color:var(--muted);

  font-size:13px;
}

.text-link
{
  color:var(--blue);

  font-size:12px;

  font-weight:900;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem
{
  padding:
    95px
    22px;

  background:var(--surface-soft);

  border-top:
    1px solid
    var(--border);
}

.eco
{
  max-width:var(--max-width);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    .7fr
    1fr;

  gap:70px;

  align-items:center;
}

.eco > div:first-child > p:last-child
{
  max-width:430px;

  color:var(--muted);

  font-size:13px;
}

.eco-map
{
  position:relative;

  height:350px;

  display:grid;

  place-items:center;
}

.eco-core,
.eco-node
{
  position:absolute;

  z-index:2;

  display:grid;

  place-items:center;

  border:
    1px solid
    var(--border);

  border-radius:50%;

  background:var(--surface);

  box-shadow:var(--shadow);

  font-size:11px;

  font-weight:900;
}

.eco-core
{
  width:125px;
  height:125px;

  background:var(--blue);

  color:#ffffff;

  border-color:var(--blue);
}

.eco-node
{
  width:105px;
  height:105px;
}

.n1
{
  top:12px;
  left:14%;
}

.n2
{
  top:38%;
  right:2%;
}

.n3
{
  bottom:5px;
  left:16%;
}

.line
{
  position:absolute;

  top:50%;
  left:35%;

  width:30%;
  height:1px;

  background:var(--border);

  transform-origin:left;
}

.l1
{
  transform:rotate(-43deg);
}

.l2
{
  width:33%;

  transform:rotate(15deg);
}

.l3
{
  transform:rotate(43deg);
}


/* =========================================================
   CTA
========================================================= */

.cta
{
  padding:
    115px
    22px;

  text-align:center;

  background:var(--surface);
}

.cta h2
{
  max-width:800px;

  margin:
    0
    auto
    17px;
}

.cta > p:not(.eyebrow)
{
  color:var(--muted);

  font-size:16px;
}

.cta .btn
{
  margin-top:8px;
}


/* =========================================================
   LIGHT JMFCool FOOTER
========================================================= */

.footer
{
  padding:
    44px
    22px
    30px;

  background:var(--surface);

  color:var(--text);

  border-top:
    1px solid
    var(--border);
}

.footer-flow
{
  max-width:960px;

  margin:
    0
    auto
    30px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  color:var(--muted);

  font-size:9px;

  font-weight:900;

  letter-spacing:.13em;
}

.footer-flow i
{
  color:var(--blue);

  font-style:normal;
}

.footer-divider
{
  width:min(960px,100%);

  height:1px;

  margin:
    0
    auto
    28px;

  background:var(--border);
}

.footer-inner
{
  max-width:var(--max-width);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    1fr
    auto;

  gap:18px;
}

.footer-brand strong
{
  font-size:17px;
}

.footer p
{
  margin:
    3px
    0
    0;

  color:var(--muted);

  font-size:10px;
}

.footer-links
{
  display:flex;

  gap:19px;

  font-size:10px;

  font-weight:800;
}

.footer-links a
{
  color:var(--muted);
}

.footer-links a:hover
{
  color:var(--blue);
}

.copyright
{
  grid-column:1/-1;

  margin-top:9px !important;

  padding-top:16px;

  border-top:
    1px solid
    var(--border);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px)
{
  .card-grid
  {
    grid-template-columns:
      repeat(2,1fr);
  }

  .main-nav
  {
    gap:18px;
  }
}

@media(max-width:800px)
{
  .header-inner
  {
    grid-template-columns:
      auto
      1fr
      auto;
  }

  .main-nav
  {
    gap:14px;
  }

  .main-nav a
  {
    font-size:10px;
  }

  .hero-inner,
  .heading,
  .tech,
  .experience-grid,
  .eco
  {
    grid-template-columns:1fr;
  }

  .hero-inner
  {
    padding-top:70px;

    gap:45px;
  }

  .heading
  {
    gap:18px;
  }

  .project-grid
  {
    grid-template-columns:1fr;
  }

  .tech-list
  {
    padding:
      18px
      0
      0;

    border-top:
      1px solid
      var(--border);

    border-left:0;
  }

  .eco-map
  {
    height:320px;
  }
}

@media(max-width:600px)
{
  .header-inner
  {
    display:flex;

    justify-content:space-between;

    padding:
      0
      14px;
  }

  .main-nav
  {
    display:none;
  }

  .header-controls
  {
    margin-left:auto;
  }

  .section
  {
    padding-left:17px;
    padding-right:17px;
  }

  .hero-inner
  {
    padding-left:17px;
    padding-right:17px;
  }

  h1
  {
    font-size:50px;
  }

  .card-grid
  {
    grid-template-columns:1fr;
  }

  .project-card h3
  {
    margin-top:50px;
  }

  .footer-inner
  {
    grid-template-columns:1fr;
  }

  .footer-links
  {
    flex-wrap:wrap;
  }

  .copyright
  {
    grid-column:auto;
  }

  .footer-flow
  {
    gap:7px;

    font-size:8px;
  }
}

.jmf-three-dots {

    display:flex;

    align-items:center;

    gap:6px;

}


.jmf-three-dots span {

    width:8px;

    height:8px;

    display:block;

    border-radius:50%;

    background:#80EF80;

    animation:
        jmfDotPulse 1.8s infinite ease-in-out;

}


.jmf-three-dots span:nth-child(2) {

    animation-delay:.2s;

}


.jmf-three-dots span:nth-child(3) {

    animation-delay:.4s;

}


@keyframes jmfDotPulse {

    0%,
    100% {

        transform:scale(1);

        opacity:.45;

    }

    50% {

        transform:scale(1.35);

        opacity:1;

    }

}