/* ═══════════════════════════════════════════════════
   CM — Static Site Stylesheet
   Monochrome dark. Bebas Neue + Inter.
   #992993 on card surfaces only.
   ═══════════════════════════════════════════════════ */

/* Fonts loaded via <link> in HTML head for non-blocking render */

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── Variables ── */
:root{
  --bg:#0D0D0D;
  --bg2:#1A1A1A;
  --card:#262A2C;
  --border:#333639;
  --muted:#545E63;
  --steel:#7A8B9A;
  --white:#F5F5F0;
  --pure:#FFFFFF;
  --violet:#992993;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Inter',sans-serif;
  --max-w:1100px;
  --gutter:clamp(20px,4vw,48px);
}

/* ── Base ── */
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none;transition:opacity .15s}
a:hover{opacity:.8}
img{max-width:100%;display:block}
::selection{background:var(--violet);color:var(--white)}

/* ── Layout ── */
.container{max-width:var(--max-w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.narrow{max-width:720px;margin-left:auto;margin-right:auto}
.section{padding:100px 0}
.section-sm{padding:60px 0}
.divider{height:1px;background:var(--border);max-width:var(--max-w);margin:0 auto}

/* ── Typography ── */
.bebas{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.text-white{color:var(--white)}
.text-steel{color:var(--steel)}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.underline{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
.eyebrow{font-size:11px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

/* ── Social icons ── */
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;opacity:.8;transition:opacity .15s}
.social-icon:hover{opacity:1}
.social-icon svg{width:14px;height:14px}
.social-icon:hover svg{fill:var(--white)}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(13,13,13,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav .inner{max-width:var(--max-w);margin:0 auto;padding:16px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .logo img{height:28px;width:auto}
.nav .social{display:flex;gap:14px;align-items:center;justify-self:start}
.nav .links{display:flex;gap:28px;align-items:center;font-size:14px;color:var(--steel);justify-self:end}
.nav .links a{color:var(--steel)}
.nav .links a:hover{color:var(--white)}
.nav .mobile-social{display:none}
.nav .btn-contact{background:var(--white) !important;color:var(--bg) !important;padding:8px 22px;border-radius:8px;font-weight:600;font-size:13px;transition:all .2s}
.nav .btn-contact:hover{opacity:.85}

/* Mobile menu */
.nav .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav .hamburger span{width:20px;height:1.5px;background:var(--white);transition:all .2s}

/* ── Hero ── */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:80px}
.hero h1{font-size:clamp(48px,9vw,110px);line-height:.92;margin-bottom:28px}
.hero .lead{font-size:clamp(15px,2vw,18px);color:var(--steel);max-width:480px;margin-bottom:12px}
.hero .cta-text{font-size:15px;color:var(--steel);margin-bottom:32px}
.hero .scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .scroll-hint .line{width:1px;height:28px;background:var(--muted);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ── Email form ── */
.email-wrap{display:inline-flex;align-items:center;background:var(--card);border-radius:100px;padding:5px 5px 5px 24px;gap:10px}
.email-wrap input{background:transparent;border:none;outline:none;color:var(--white);font-size:15px;font-family:var(--font-body);width:clamp(160px,30vw,260px)}
.email-wrap input::placeholder{color:var(--steel)}
.email-wrap .submit{width:42px;height:42px;border-radius:50%;background:var(--pure);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:transform .15s}
.email-wrap .submit:hover{transform:scale(1.06)}
.email-wrap .submit svg{width:16px;height:16px}

/* ── Client logos ── */
.logos-bar{display:flex;justify-content:center;gap:clamp(24px,4vw,48px);align-items:center;flex-wrap:wrap;padding:16px 0}
.logos-bar span{font-size:clamp(14px,1.5vw,17px);color:var(--steel);font-weight:600;opacity:.5}
.logo-grid{display:flex;justify-content:center;gap:clamp(28px,4vw,48px);align-items:center;flex-wrap:wrap;padding:24px 0}
.logo-grid img{height:20px;width:auto;opacity:.5;filter:brightness(0) invert(1);transition:opacity .2s}
.logo-grid img:hover{opacity:.8}

/* ── Testimonials ── */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;margin-top:24px}
.testimonial-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:32px}
.testimonial-card .company{font-size:12px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.testimonial-card .title{font-size:18px;font-weight:600;margin-bottom:12px}
.testimonial-card .quote{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:16px}
.testimonial-card .author{font-size:13px;color:var(--muted)}

/* ── About ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-photo{width:100%;aspect-ratio:3/4;background:var(--card);border-radius:12px;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-text h2{margin-bottom:20px}
.about-text p{color:var(--steel);margin-bottom:16px;max-width:480px;font-size:15px;line-height:1.7}

/* ── Newsletter section ── */
.newsletter-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.newsletter-left .stats{color:var(--white);font-size:15px;margin-top:16px}
.newsletter-left p{color:var(--steel);font-size:15px;margin-bottom:8px}

/* ── Article cards ── */
.cards-stack{display:flex;flex-direction:column;gap:14px}
.article-card{background:var(--card);border-radius:10px;padding:24px 28px;transition:transform .15s}
.article-card:hover{transform:translateY(-2px)}
.article-card h3{font-size:16px;font-weight:600;margin-bottom:6px}
.article-card .desc{font-size:14px;color:var(--steel);margin-bottom:10px;line-height:1.5}
.article-card .link{font-size:13px;color:var(--violet);font-weight:600}
.article-card .date{font-size:11px;color:var(--muted);margin-top:6px}

/* ── Article grid (newsletter page) ── */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

/* ── Letter cards (3-col on home) ── */
.letter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.letter-card{background:var(--card);border-radius:10px;padding:28px;display:flex;flex-direction:column;transition:transform .15s}
.letter-card:hover{transform:translateY(-2px)}
.letter-card .date{font-size:11px;color:var(--muted);margin-bottom:12px}
.letter-card h3{font-size:17px;font-weight:600;margin-bottom:8px;line-height:1.3}
.letter-card .excerpt{font-size:14px;color:var(--steel);line-height:1.5;flex:1}
.letter-card .read{margin-top:16px;font-size:13px;color:var(--violet);font-weight:600}

/* ── Work page ── */
.work-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:36px;margin-bottom:20px;transition:border-color .2s}
.work-card:hover{border-color:var(--steel)}
.work-card .tag{font-size:11px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.work-card h3{font-size:20px;font-weight:600;margin-bottom:8px}
.work-card p{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:12px}
.work-card .meta{font-size:12px;color:var(--muted)}

.repo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:20px}
.repo-card{background:var(--card);border-radius:8px;padding:20px 24px;transition:transform .15s}
.repo-card:hover{transform:translateY(-2px)}
.repo-card h4{font-size:15px;font-weight:600;margin-bottom:4px}
.repo-card p{font-size:13px;color:var(--steel);line-height:1.5;margin-bottom:8px}
.repo-card .tech{font-size:11px;color:var(--muted)}

/* ── Work items (thumb + content) ── */
.work-item{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--border);align-items:start}
.work-item:first-of-type{border-top:1px solid var(--border)}
.work-item-img{border-radius:8px;overflow:hidden;background:var(--card)}
.work-item-img img{width:100%;height:auto;display:block}
.work-item-body .tag{font-size:11px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.work-item-body h3{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:8px}
.work-item-body .work-subtitle{font-size:14px;color:var(--steel);margin-bottom:8px;font-style:italic}
.work-item-body .work-desc{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:12px}
.work-item-body .work-link{font-size:14px;font-weight:600;color:var(--white);display:inline-block}

/* ── Metrics ── */
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.metric .number{font-size:clamp(40px,6vw,64px);line-height:1;margin-bottom:6px}
.metric .label{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}

/* ── Course cards ── */
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.course-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:32px;transition:border-color .2s}
.course-card:hover{border-color:var(--steel)}
.course-card .tag{font-size:11px;font-weight:600;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.course-card h3{font-size:22px;font-weight:600;margin-bottom:8px}
.course-card .price{font-size:14px;color:var(--steel);margin-bottom:14px}
.course-card .desc{font-size:14px;color:var(--steel);line-height:1.5}

/* ── Quote ── */
.quote-section .bar{width:40px;height:3px;background:var(--steel);margin-bottom:24px}
.quote-section .text{font-size:clamp(20px,3vw,28px);font-weight:600;line-height:1.4;margin-bottom:16px}
.quote-section .attr{font-size:14px;color:var(--steel)}

/* ── Student testimonials ── */
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.student-card{background:var(--card);border-radius:8px;padding:24px}
.student-card .quote{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:12px;font-style:italic}
.student-card .name{font-size:13px;font-weight:600;color:var(--white)}
.student-card .role{font-size:12px;color:var(--muted)}

/* ── Closing CTA ── */
.closing-cta{text-align:center;padding:100px 0}
.closing-cta .avatar-ring{width:120px;height:120px;border-radius:50%;border:2px solid var(--violet);padding:4px;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.closing-cta .avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1)}

/* ── Footer ── */
.footer{padding:40px 0;border-top:1px solid var(--border)}
.footer .inner{display:flex;justify-content:space-between;align-items:center}
.footer .left{font-size:13px;color:var(--muted)}
.footer .center img{height:22px}
.footer .right{display:flex;gap:20px;font-size:13px;color:var(--steel)}
.footer .right a:hover{color:var(--white)}

/* ── Newsletter hero ── */
.nl-hero{padding:160px 0 60px;display:flex;flex-direction:column;align-items:center}
.nl-hero h1{font-size:clamp(48px,9vw,110px);line-height:.92;margin-bottom:20px}

/* ── Letter list (single column) ── */
.letter-item{padding:28px 0;border-bottom:1px solid var(--border)}
.letter-item:first-child{border-top:1px solid var(--border)}
.letter-item h3{font-size:clamp(17px,2vw,20px);font-weight:600;margin-bottom:6px;line-height:1.3}
.letter-item h3 a{color:var(--white)}
.letter-item h3 a:hover{opacity:.8}
.letter-item .excerpt{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:10px}
.letter-item .read-link{font-size:13px;color:var(--violet);font-weight:600;display:inline-block;margin-bottom:8px}
.letter-item .meta{font-size:12px;color:var(--muted)}


/* ── Page header (for inner pages) ── */
.page-header{padding-top:140px;padding-bottom:40px}
.page-header h1{font-size:clamp(36px,6vw,56px);line-height:1;margin-bottom:12px}
.page-header .subtitle{font-size:16px;color:var(--steel)}

/* ── Responsive ── */
@media(max-width:991px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-photo{max-width:400px;margin:0 auto}
  .newsletter-grid{grid-template-columns:1fr}
  .letter-grid{grid-template-columns:1fr 1fr}
  .course-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}

@media(max-width:767px){
  .nav .inner{display:flex;justify-content:space-between;align-items:center}
  .nav .social{display:none}
  .nav .hamburger{display:flex;z-index:201;position:relative}
  .nav .links{display:none}
  .nav .links.open{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:18px;z-index:200}
  .nav .links.open a{color:var(--white);font-size:18px}
  .nav .links.open .btn-contact{font-size:16px;padding:12px 32px;margin-top:8px}
  .nav .links.open .mobile-social{display:flex;gap:20px;margin-top:24px}
  .nav .links.open .mobile-social .social-icon{opacity:1;width:20px;height:20px;min-width:20px}
  .nav .links.open .mobile-social .social-icon svg{width:20px;height:20px}
  .hero h1,.hero-centered h1{font-size:clamp(36px,12vw,60px)}
  .hero-title .underline{display:inline-block;padding-bottom:6px}
  .letter-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .about-grid{text-align:center}
  .about-text p{margin-left:auto;margin-right:auto}
  .footer .inner{flex-direction:column;gap:16px;text-align:center}
  .email-wrap input{width:160px}
  .nl-hero{padding:120px 0 40px}
  .work-item{grid-template-columns:1fr;gap:16px}
  .work-item-img{max-width:200px}
}

@media(max-width:479px){
  .section{padding:60px 0}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .logos-bar{gap:16px}
  .logos-bar span{font-size:13px}
}