/* =========================================================
   SIMONE FONTANA — PORTFOLIO
   Design concept: technical blueprint / drawing title-block.
   ========================================================= */

:root{
  /* color */
  --ink-950:#081726;
  --ink-900:#0c2138;
  --panel:#0f2940;
  --panel-soft:#11304b;
  --line:#2e4f6c;
  --line-soft:rgba(159,196,219,0.14);
  --paper:#edf3f1;
  --paper-dim:#9bb2c4;
  --amber:#e8a33d;
  --amber-soft:rgba(232,163,61,0.14);
  --green:#6fcf97;

  /* type */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* layout */
  --maxw:1180px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:2px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--ink-950);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-0.01em;}
p{margin:0;}

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.mono-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
}

/* ---------- background grid ---------- */
.bg-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 60%, transparent 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 60%, transparent 100%);
  opacity:0.6;
}

/* ---------- shared section layout ---------- */
.section-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}
.section{
  position:relative;
  z-index:1;
  padding:96px 0;
  border-top:1px solid var(--line-soft);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:18px;
}
.eyebrow-mark{font-size:13px;}

.section-title{
  font-size:clamp(28px, 4vw, 42px);
  margin-bottom:14px;
  max-width:18ch;
}
.section-sub{
  color:var(--paper-dim);
  max-width:46ch;
  margin-bottom:48px;
  font-size:17px;
}
.path-more{
  font-size:15px;
  color:var(--paper-dim);
  margin-top:-28px;
  margin-bottom:48px;
}
.path-more .work-link{margin-top:0;display:inline;border-bottom:1px solid var(--line);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:rgba(8,23,38,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.brand-mark{width:28px;height:28px;}
.brand-mark rect{fill:none;stroke:var(--amber);stroke-width:1.4;}
.brand-mark line,.brand-mark circle{stroke:var(--paper);}
.brand-text{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.06em;
}
.main-nav{
  display:flex;
  gap:28px;
  font-size:14.5px;
}
.main-nav a{
  color:var(--paper-dim);
  position:relative;
  padding:4px 0;
  transition:color .2s;
}
.main-nav a:hover{color:var(--paper);}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--amber);
  transition:width .2s;
}
.main-nav a:hover::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:16px;}
.lang-switch{
  display:flex;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}
.lang-btn{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  padding:6px 12px;
  background:transparent;
  border:none;
  color:var(--paper-dim);
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lang-btn.is-active{background:var(--amber);color:var(--ink-950);}
.lang-btn:not(.is-active):hover{color:var(--paper);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  background:none;border:none;cursor:pointer;
  padding:0;
}
.nav-toggle span{display:block;width:100%;height:1.5px;background:var(--paper);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  z-index:1;
  padding:152px var(--pad) 0;
  max-width:var(--maxw);
  margin:0 auto;
}
.corner-tick{
  position:absolute;
  width:18px;height:18px;
  border-color:var(--line);
  display:none;
}
@media (min-width:700px){.corner-tick{display:block;}}
.tick-tl{top:96px;left:var(--pad);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.tick-tr{top:96px;right:var(--pad);border-top:1px solid var(--line);border-right:1px solid var(--line);}

.hero-inner{
  display:grid;
  grid-template-columns:1.3fr 0.8fr;
  gap:48px;
  align-items:start;
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-photo{order:-1; max-width:220px;}
}

/* solo layout: no side visual, text takes the full sheet */
.hero-inner--solo{
  grid-template-columns:1fr;
}
.hero-copy--wide{
  max-width:780px;
}
.hero-name.hero-name--big{
  font-size:clamp(56px, 10vw, 124px);
}
.hero-claim.hero-claim--big{
  font-size:clamp(22px, 3.4vw, 34px);
  max-width:40ch;
}

.hero-name{
  font-size:clamp(48px, 8vw, 92px);
  line-height:0.98;
  margin:6px 0 22px;
}
.hero-role{
  font-size:clamp(16px,2vw,19px);
  color:var(--paper-dim);
  max-width:42ch;
  margin-bottom:18px;
}
.hero-typed{
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--amber);
  margin-bottom:36px;
  min-height:20px;
}
.typed-prefix{color:var(--paper-dim);margin-right:8px;}
.typed-cursor{
  display:inline-block;
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

.btn{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.04em;
  padding:13px 22px;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  transition:transform .15s, background .2s, border-color .2s, color .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--amber);color:var(--ink-950);}
.btn-primary:hover{background:#f3b65a;}
.btn-secondary{border-color:var(--line);color:var(--paper);}
.btn-secondary:hover{border-color:var(--paper);}
.btn-ghost{color:var(--paper-dim);}
.btn-ghost:hover{color:var(--amber);}
.btn-large{padding:16px 30px;font-size:14px;margin-top:8px;}

/* photo frame */
.hero-photo{display:flex;flex-direction:column;gap:10px;}
.photo-frame{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.photo-placeholder{width:100%;height:100%;display:block;}
.ph-bg{fill:var(--panel);}
.ph-grid line{stroke:var(--line-soft);stroke-width:0.5;}
.ph-mono{
  font-family:var(--font-mono);
  font-size:22px;
  fill:var(--paper-dim);
  letter-spacing:2px;
}
.photo-real{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
.photo-real.is-loaded{opacity:1;}
.frame-tick{
  position:absolute;
  width:12px;height:12px;
  border-color:var(--amber);
}
.frame-tl{top:6px;left:6px;border-top:1.5px solid;border-left:1.5px solid;}
.frame-tr{top:6px;right:6px;border-top:1.5px solid;border-right:1.5px solid;}
.frame-bl{bottom:6px;left:6px;border-bottom:1.5px solid;border-left:1.5px solid;}
.frame-br{bottom:6px;right:6px;border-bottom:1.5px solid;border-right:1.5px solid;}
.photo-caption{text-align:center;}

/* title block strip */
.title-block{
  margin-top:72px;
  border:1px solid var(--line);
  border-bottom:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:760px){.title-block{grid-template-columns:1fr 1fr;}}
.deploy-note{
  grid-template-columns:1fr 1fr;
  margin-top:40px;
}
.deploy-note .tb-value{font-size:14.5px;color:var(--paper-dim);}
.tb-field{
  padding:18px 22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tb-field:last-child{border-right:none;}
.tb-label{display:block;}
.tb-value{font-size:14.5px;}
.status-dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  margin-right:8px;
  box-shadow:0 0 0 0 rgba(111,207,151,0.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,207,151,0.5);}
  70%{box-shadow:0 0 0 6px rgba(111,207,151,0);}
  100%{box-shadow:0 0 0 0 rgba(111,207,151,0);}
}
.tb-link{transition:color .2s;}
.tb-link:hover{color:var(--amber);}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1.4fr 0.8fr;
  gap:56px;
}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
.about-lead{font-size:19px;margin-bottom:18px;color:var(--paper);}
.about-body{color:var(--paper-dim);font-size:16px;max-width:54ch;margin-bottom:18px;}
.about-body:last-of-type{margin-bottom:0;}

.spec-sheet{
  border:1px solid var(--line);
  background:var(--panel);
  padding:24px;
  align-self:start;
}
.spec-title{margin-bottom:16px;}
.spec-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid var(--line-soft);
  font-size:14px;
}
.spec-row:first-child{border-top:none;}
.spec-row dt{font-family:var(--font-mono);color:var(--paper-dim);font-size:12px;letter-spacing:0.05em;}
.spec-row dd{margin:0;text-align:right;}

/* =========================================================
   EXPERIENCE — BUS TIMELINE
   ========================================================= */
.bus-timeline{position:relative;padding-left:32px;}
.bus-line{
  position:absolute;
  left:5px;top:6px;bottom:6px;
  width:1px;
  background:var(--line);
}
.bus-line::after{
  content:"";
  position:absolute;
  left:-1px;top:0;
  width:3px;
  height:var(--draw, 0%);
  background:var(--amber);
  transition:height 1.4s ease;
}
.bus-node{
  position:relative;
  margin-bottom:48px;
}
.bus-node:last-child{margin-bottom:0;}
.node-dot{
  position:absolute;
  left:-32px;top:6px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--ink-950);
  border:2px solid var(--line);
}
.node-dot--current{border-color:var(--amber);background:var(--amber);}
.node-card{
  border:1px solid var(--line);
  background:var(--panel);
  padding:26px 28px;
}
.node-dates{margin-bottom:10px;color:var(--amber);}
.node-role{font-size:21px;margin-bottom:4px;}
.node-company{color:var(--paper-dim);font-size:14.5px;margin-bottom:16px;}
.node-bullets{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.node-bullets li{
  position:relative;
  padding-left:16px;
  font-size:15px;
  color:var(--paper);
}
.node-bullets li::before{
  content:"·";
  position:absolute;left:0;top:0;
  color:var(--amber);
}
.node-tags{display:flex;flex-wrap:wrap;gap:8px;}
.node-tags span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--paper-dim);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:20px;
}

/* =========================================================
   WORK GRID
   ========================================================= */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.work-card{
  position:relative;
  background:var(--ink-950);
  padding:30px 26px;
  transition:background .25s;
}
.work-card:hover{background:var(--panel);}
.card-tick{
  position:absolute;
  top:14px;right:14px;
  width:10px;height:10px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  opacity:0;
  transition:opacity .25s, border-color .25s;
}
.work-card:hover .card-tick{opacity:1;border-color:var(--amber);}
.work-tag{margin-bottom:14px;color:var(--amber);}
.work-card h3{font-size:19px;margin-bottom:4px;}
.work-company{color:var(--paper-dim);font-size:13.5px;margin-bottom:12px;}
.work-card p:not(.work-tag):not(.work-company):not(.work-metric){
  font-size:14.5px;
  color:var(--paper-dim);
  margin-bottom:6px;
}
.work-metric{color:var(--green);margin-top:10px;}
.work-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--paper);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.work-link:hover{color:var(--amber);border-color:var(--amber);}

/* =========================================================
   STACK & CERTS
   ========================================================= */
.stack-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  margin-bottom:64px;
}
@media (max-width:820px){.stack-grid{grid-template-columns:1fr;}}
.stack-col-title{margin-bottom:18px;}
.chip-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.chip-cloud span{
  font-family:var(--font-mono);
  font-size:12.5px;
  border:1px solid var(--line);
  padding:7px 13px;
  border-radius:20px;
  color:var(--paper);
}
.cert-list{display:flex;flex-direction:column;gap:14px;}
.cert-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid var(--line-soft);
  background:var(--panel);
  padding:14px 16px;
}
.cert-badge{color:var(--amber);font-size:14px;margin-top:2px;}
.cert-list strong{display:block;font-size:14.5px;font-weight:600;}
.cert-list span{color:var(--paper-dim);font-size:13px;}

.education-row{border-top:1px solid var(--line-soft);padding-top:48px;}
.edu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:18px;
}
@media (max-width:760px){.edu-grid{grid-template-columns:1fr;}}
.edu-card{border:1px solid var(--line-soft);padding:22px 24px;background:var(--panel);}
.edu-card h3{font-size:17px;margin:6px 0 4px;}
.edu-card p:last-child{color:var(--paper-dim);font-size:14px;margin-top:8px;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-block{
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:40px;
}
@media (max-width:760px){.contact-block{grid-template-columns:1fr 1fr;}}
.contact-block .tb-field{border-bottom:none;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line-soft);
  padding:28px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  color:var(--paper-dim);
  font-size:13.5px;
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .status-dot{animation:none;}
  .typed-cursor{animation:none;}
  .btn:hover{transform:none;}
  .bus-line::after{transition:none;}
}

/* =========================================================
   MOBILE NAV
   ========================================================= */
@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:68px;left:0;right:0;
    background:var(--ink-900);
    border-bottom:1px solid var(--line-soft);
    flex-direction:column;
    padding:18px var(--pad) 24px;
    gap:16px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:40;
  }
  .main-nav.is-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-toggle{display:flex;}
}

/* =========================================================
   AGENTICO — additions: hero claim, workflow diagram,
   differentiators grid, sector card variants, founder spacing
   ========================================================= */

.hero-claim{
  font-family:var(--font-display);
  font-size:clamp(20px, 2.6vw, 28px);
  font-weight:600;
  color:var(--paper);
  max-width:34ch;
  line-height:1.25;
  margin-bottom:16px;
}

/* deploy tags (cloud / on-premise) reuse node-tags pill style */
.deploy-tags{margin-bottom:14px;}

/* differentiators grid */
.diff-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
@media (max-width:820px){.diff-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.diff-grid{grid-template-columns:1fr;}}
.diff-card{
  background:var(--ink-950);
  padding:30px 26px;
  transition:background .25s;
}
.diff-card:hover{background:var(--panel);}
.diff-num{
  color:var(--amber);
  font-size:13px;
  margin-bottom:14px;
}
.diff-card h3{font-size:18px;margin-bottom:8px;}
.diff-card p{font-size:14.5px;color:var(--paper-dim);}

/* sector / service card tweaks */
.card-bullets{margin-bottom:16px;}
.card-bullets li{font-size:14px;}
.sector-pain{
  color:var(--paper-dim);
  font-size:14px;
  font-style:italic;
  margin-bottom:10px;
  padding-left:14px;
  border-left:2px solid var(--line);
}

/* founder sub-blocks: visual separators */
.timeline-block,
.track-block{
  border-top:1px solid var(--line-soft);
  padding-top:64px;
  margin-top:64px;
}
.founder-spec{max-width:520px;}
.cv-btn{margin-top:28px;display:inline-flex;}

/* services grid: 3 cards, one clean row on desktop */
.services-grid{grid-template-columns:repeat(3, 1fr);}
@media (max-width:1000px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.services-grid{grid-template-columns:1fr;}}