/* Entrolution marketing site — kit styles. Tokens come from ../../styles.css */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.site-scroll{
  height:100vh;overflow-y:auto;scroll-behavior:smooth;
  background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);
}
img{display:block;}
button{font-family:inherit;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(10,12,27,0);backdrop-filter:blur(0);transition:background var(--duration-normal),backdrop-filter var(--duration-normal),box-shadow var(--duration-normal);}
.site-header.is-scrolled{background:rgba(251,251,254,0.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--border-subtle);}
.site-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6);height:72px;
  display:flex;align-items:center;gap:var(--space-8);}
.site-brand{display:flex;align-items:center;gap:0.6rem;cursor:pointer;text-decoration:none;}
.site-brand__mark{width:34px;height:34px;}
/* Wordmark rendered from the official logo SVG (outlined glyphs with the brand's
   exact kerning + custom 'l') as a mask, tinted via currentColor so it still adapts
   to the header's scrolled/unscrolled colours. */
.site-brand__word{display:block;width:86px;height:17px;color:var(--text-strong);background-color:currentColor;
  -webkit-mask:url('../assets/logos/entrolution-wordmark.svg') no-repeat left center;
          mask:url('../assets/logos/entrolution-wordmark.svg') no-repeat left center;
  -webkit-mask-size:86px 17px;mask-size:86px 17px;}
.site-header:not(.is-scrolled) .site-brand__word{color:#fff;}
.site-nav{display:flex;gap:var(--space-2);margin-left:var(--space-4);flex:1;}
.site-nav__link{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--ink-300);
  padding:0.5rem 0.75rem;border-radius:var(--radius-sm);cursor:pointer;transition:color var(--duration-fast),background var(--duration-fast);}
.site-header.is-scrolled .site-nav__link{color:var(--text-muted);}
.site-nav__link:hover{color:var(--text-strong);background:var(--surface-hover);}
.site-header:not(.is-scrolled) .site-nav__link:hover{color:#fff;background:rgba(255,255,255,0.08);}
.site-header__cta{margin-left:auto;}
.site-header__burger{display:none;background:none;border:none;cursor:pointer;color:#fff;padding:6px;}
.site-header.is-scrolled .site-header__burger{color:var(--text-strong);}
.site-header__burger svg{width:24px;height:24px;}
.site-mobilenav{display:none;flex-direction:column;gap:0.25rem;padding:var(--space-4) var(--space-6) var(--space-6);
  background:var(--surface-inverse);}
.site-mobilenav a{color:var(--ink-200);padding:0.75rem 0;font-size:var(--text-lg);cursor:pointer;border-bottom:1px solid var(--border-inverse);}

/* ---------- Hero ---------- */
/* Pull the dark band up under the sticky 72px header so its background reaches the top
   of the page (no hard edge under the header; the transparent header's light wordmark
   sits on the dark hero as intended). Top padding then clears the header + a small gap. */
.hero{position:relative;background:var(--gradient-ink);color:#fff;overflow:hidden;
  margin-top:-72px;
  padding:calc(72px + var(--space-12)) var(--space-6) var(--space-24);}
.hero__glow{position:absolute;top:-220px;right:-120px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(192,22,106,0.40),rgba(122,47,184,0.16) 40%,transparent 66%);
  filter:blur(20px);pointer-events:none;}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);}
.hero__plot{position:absolute;top:50%;right:-8%;width:64%;max-width:900px;height:150%;transform:translateY(-50%);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 92%);
          mask-image:linear-gradient(to left,#000 55%,transparent 92%);}
.hero__plot svg{width:100%;height:100%;display:block;overflow:visible;}
.hero__inner{position:relative;max-width:var(--container-max);margin:0 auto;display:grid;
  grid-template-columns:1.25fr 0.75fr;gap:var(--space-12);align-items:center;}
.hero__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-5xl);line-height:1.04;
  letter-spacing:-0.015em;margin:var(--space-5) 0 var(--space-5);color:#fff;}
.hero__title-grad{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__sub{font-size:var(--text-lg);line-height:1.55;color:var(--ink-200);max-width:54ch;margin:0 0 var(--space-8);}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-12);}
.hero__ghost{background:rgba(255,255,255,0.06) !important;border-color:rgba(255,255,255,0.18) !important;color:#fff !important;}
.hero__ghost:hover{background:rgba(255,255,255,0.12) !important;}
.hero__stats{display:flex;gap:var(--space-10);flex-wrap:wrap;}
.hero__art{position:relative;display:flex;justify-content:center;align-items:center;}
.hero__art-mark{position:relative;z-index:2;width:min(300px,72%);filter:drop-shadow(0 30px 60px rgba(122,47,184,0.5));
  animation:floaty 6s var(--ease-in-out) infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion: reduce){.hero__art-mark{animation:none;}}

/* ---------- Generic section ---------- */
.section{max-width:var(--container-max);margin:0 auto;padding:var(--space-24) var(--space-6);}
.section__head{max-width:680px;margin:0 auto var(--space-12);text-align:center;}
.section__head--left{margin-left:0;text-align:left;}
.section__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);
  letter-spacing:-0.01em;color:var(--text-strong);margin:var(--space-3) 0 var(--space-3);line-height:1.12;}
.section__title--inverse{color:#fff;}
.section__lede{font-size:var(--text-lg);color:var(--text-muted);line-height:1.55;margin:0;}
.section__lede--inverse{color:var(--ink-200);}

/* ---------- Practice ---------- */
.practice__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.service-card{display:flex;flex-direction:column;gap:var(--space-3);}
.service-card__icon{width:48px;height:48px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;
  background:var(--violet-50);color:var(--brand-violet);margin-bottom:var(--space-2);}
.service-card__icon svg{width:24px;height:24px;stroke-width:1.6;}
.service-card__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);color:var(--text-strong);margin:0;}
.service-card__body{font-size:var(--text-base);color:var(--text-muted);line-height:1.55;margin:0;flex:1;}
.service-card__tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:var(--space-2);}

/* ---------- Work ---------- */
.work{padding-top:0;}
.work__list{display:flex;flex-direction:column;gap:var(--space-4);}
.work-row{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:200px 1fr;gap:var(--space-4) var(--space-8);align-items:start;
  transition:box-shadow var(--duration-normal),transform var(--duration-normal);overflow:hidden;}
.work-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.work-row__bar{position:absolute;left:0;top:0;bottom:0;width:4px;}
.work-row__kicker{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);grid-row:1;}
.work-row__title{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:400;
  font-size:var(--text-xl);color:var(--text-strong);margin:0;line-height:1.15;}
.work-row__body{grid-column:2;grid-row:2;font-size:var(--text-base);color:var(--text-muted);line-height:1.55;margin:0;max-width:62ch;}
.work-row__tags{grid-column:2;grid-row:3;display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:var(--space-1);}

/* ---------- Open source (dark band) ---------- */
.oss{max-width:none;background:var(--surface-inverse);padding:0;}
.oss__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-24) var(--space-6);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;}
.oss__switch{display:inline-flex;gap:0.4rem;margin-top:var(--space-6);background:rgba(255,255,255,0.05);
  padding:0.3rem;border-radius:var(--radius-pill);border:1px solid var(--border-inverse);}
.oss__tab{border:none;background:none;color:var(--ink-300);font-size:var(--text-sm);font-weight:var(--weight-medium);
  padding:0.5rem 1.1rem;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration-fast);}
.oss__tab.is-active{background:var(--gradient-violet-magenta);color:#fff;}
.oss__card{background:var(--surface-inverse-2);border:1px solid var(--border-inverse);border-radius:var(--radius-xl);
  padding:var(--space-8);box-shadow:var(--shadow-xl);}
.oss__card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4);}
.oss__card-name{font-family:var(--font-display);font-size:var(--text-2xl);color:#fff;}
.oss__card-tag{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-300);margin-top:2px;}
.oss__card-body{font-size:var(--text-base);color:var(--ink-200);line-height:1.55;margin:0 0 var(--space-5);}
.oss__repo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;background:var(--ink-950);
  border:1px solid var(--border-inverse);border-radius:var(--radius-md);padding:0.6rem 0.6rem 0.6rem 0.9rem;margin-bottom:var(--space-6);
  transition:border-color var(--duration-fast),background var(--duration-fast);}
.oss__repo:hover{border-color:var(--brand-magenta);background:#0c0e1f;}
.oss__repo code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--brand-gold);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oss__repo-icon{flex:none;width:34px;height:34px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.06);
  color:var(--ink-200);display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-fast),color var(--duration-fast);}
.oss__repo:hover .oss__repo-icon{background:rgba(255,255,255,0.14);color:#fff;}
.oss__repo-icon svg{width:16px;height:16px;}
.oss__stats{display:flex;gap:var(--space-8);}

/* ---------- Engagement ---------- */
.engage__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-10);}
.engage__item{display:flex;gap:var(--space-4);align-items:flex-start;}
.engage__icon{flex:none;width:44px;height:44px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;
  background:var(--magenta-50);color:var(--brand-magenta);}
.engage__icon svg{width:22px;height:22px;stroke-width:1.6;}
.engage__item h4{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);color:var(--text-strong);margin:0 0 4px;}
.engage__item p{font-size:var(--text-base);color:var(--text-muted);line-height:1.5;margin:0;}

/* ---------- Contact ---------- */
.contact{padding-top:0;}
.contact__panel{position:relative;overflow:hidden;background:var(--gradient-ink);border-radius:var(--radius-2xl);
  padding:var(--space-16);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);
  box-shadow:var(--shadow-xl);}
.contact__panel::before{content:"";position:absolute;top:-180px;left:-100px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,47,184,0.45),transparent 65%);pointer-events:none;}
.contact__panel::after{content:"";position:absolute;bottom:-30%;right:-8%;width:420px;height:420px;
  background:url('../assets/brand/motif-halftone.png') center/contain no-repeat;opacity:0.5;pointer-events:none;
  mask-image:radial-gradient(circle at 60% 40%,#000 40%,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 60% 40%,#000 40%,transparent 75%);}
.contact__copy{position:relative;}
.contact__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);color:#fff;
  letter-spacing:-0.01em;line-height:1.12;margin:var(--space-3) 0 var(--space-3);}
.contact__sub{font-size:var(--text-lg);color:var(--ink-200);line-height:1.55;margin:0 0 var(--space-6);max-width:42ch;}
.contact__book{margin:0 0 var(--space-6);}
.contact__error{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-sm);color:var(--danger);margin:0;}
.contact__error a{color:var(--danger);font-weight:var(--weight-semibold);}
.contact__error svg{width:16px;height:16px;flex:none;}
.lucide-loader{animation:enx-spin 0.9s linear infinite;}
@keyframes enx-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.lucide-loader{animation:none;}}
.contact__meta{display:flex;flex-direction:column;gap:0.6rem;}
.contact__meta span{display:flex;align-items:center;gap:0.55rem;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-200);}
.contact__meta svg{width:16px;height:16px;color:var(--brand-gold);}
.contact__formwrap{position:relative;background:var(--white);border-radius:var(--radius-xl);padding:var(--space-8);}
.contact__form{display:flex;flex-direction:column;gap:var(--space-4);}
.contact__field-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong);margin-bottom:-8px;}
.contact__textarea{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-strong);
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0.7rem 0.85rem;resize:vertical;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);}
.contact__textarea::placeholder{color:var(--text-subtle);}
.contact__textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--violet-100);}
.contact__success{text-align:center;padding:var(--space-8) var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);}
.contact__success-mark{width:56px;height:56px;border-radius:50%;background:var(--success-bg);color:var(--success);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--space-2);}
.contact__success-mark svg{width:28px;height:28px;stroke-width:2.5;}
.contact__success h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);color:var(--text-strong);margin:0;}
.contact__success p{color:var(--text-muted);margin:0 0 var(--space-3);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-950);color:var(--ink-200);padding:var(--space-16) var(--space-6) var(--space-8);border-top:1px solid var(--border-inverse);}
.site-footer .site-brand__word{color:var(--ink-100);}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:var(--space-12);}
.site-footer__brand p{font-size:var(--text-sm);color:var(--ink-300);line-height:1.55;max-width:34ch;margin:var(--space-4) 0;}
.site-footer__social{display:flex;gap:0.6rem;}
.site-footer__social a{width:38px;height:38px;border-radius:var(--radius-md);border:1px solid var(--border-inverse);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-200);cursor:pointer;transition:all var(--duration-fast);}
.site-footer__social a:hover{background:rgba(255,255,255,0.08);color:#fff;}
.site-footer__social svg{width:18px;height:18px;}
.site-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);}
.site-footer__cols h5{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 var(--space-4);}
.site-footer__cols a{display:block;font-size:var(--text-sm);color:var(--ink-200);padding:0.35rem 0;cursor:pointer;transition:color var(--duration-fast);}
.site-footer__cols a:hover{color:#fff;}
.site-footer__base{max-width:var(--container-max);margin:var(--space-12) auto 0;padding-top:var(--space-6);
  border-top:1px solid var(--border-inverse);display:flex;align-items:center;gap:var(--space-4);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-400);}
.site-footer__sym{color:var(--brand-magenta);font-size:var(--text-lg);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .site-nav,.site-header__cta{display:none;}
  .site-header__burger{display:inline-flex;}
  .site-mobilenav{display:flex;}
  .hero__inner,.oss__inner,.engage__grid,.contact__panel,.site-footer__inner{grid-template-columns:1fr;}
  .hero__art{display:none;}
  .practice__grid{grid-template-columns:1fr;}
  .work-row{grid-template-columns:1fr;}
  .work-row__title,.work-row__body,.work-row__tags{grid-column:1;}
  .hero__title{font-size:var(--text-4xl);}
  .contact__panel{padding:var(--space-8);}
}