/* 
  Hansani Simoka static site (Cloudflare Pages)
  Style goals: premium dark industrial, modern typography, high contrast, subtle gradients
*/

:root{
  --bg: #070a12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.88);
  --muted: rgba(255,255,255,.66);
  --muted2: rgba(255,255,255,.52);

  --accent: #4ae6c9;      /* mint-cyan */
  --accent2: #f5b94b;     /* warm amber */
  --accent3: #6b7cff;     /* indigo highlight */
  --shadow: 0 24px 80px rgba(0,0,0,.55);

  --radius: 18px;
  --radius2: 26px;

  --max: 1100px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 15% 0%, rgba(107,124,255,.14), transparent 55%),
              radial-gradient(900px 600px at 80% 10%, rgba(74,230,201,.12), transparent 55%),
              radial-gradient(900px 600px at 65% 110%, rgba(245,185,75,.10), transparent 55%),
              var(--bg);
  overflow-x:hidden;
}

a{ color: inherit; text-decoration: none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .92em; color: rgba(255,255,255,.75); }

.container{
  width: min(var(--max), calc(100% - 2.2rem));
  margin: 0 auto;
}

.skip{
  position:absolute;
  left:-999px;
  top: 12px;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--border);
}
.skip:focus{ left: 12px; z-index: 9999; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(5,7,12,.70), rgba(5,7,12,.40));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: .95rem 0;
  gap: 1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap: .85rem;
  min-width: 220px;
}
.brand__mark{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  filter: saturate(1.05) contrast(1.05);
}
.brand__name{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 650;
  letter-spacing: .2px;
  line-height: 1.0;
}
.brand__sub{
  color: var(--muted2);
  font-size: .88rem;
  margin-top: 2px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 1.1rem;
  font-size: .96rem;
  color: rgba(255,255,255,.82);
}
.nav a{ opacity: .9; }
.nav a:hover{ opacity: 1; }
.nav .pill{
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(74,230,201,.35);
  background: linear-gradient(180deg, rgba(74,230,201,.10), rgba(74,230,201,.03));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.navbtn{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  gap: 5px;
  padding: 0;
}
.navbtn span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 99px;
}

/* Hero */
.hero{
  position: relative;
  padding: 5.3rem 0 3.4rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset: -120px -120px -120px -120px;
  background-image:
    radial-gradient(1200px 600px at 20% 15%, rgba(74,230,201,.16), transparent 60%),
    radial-gradient(900px 700px at 75% 0%, rgba(107,124,255,.16), transparent 60%),
    radial-gradient(700px 500px at 70% 80%, rgba(245,185,75,.12), transparent 60%),
    linear-gradient(to bottom, rgba(7,10,18,.10), rgba(7,10,18,.78)),
    url("assets/hero-bg.webp");
  background-size: cover;
  background-position: center;
  filter: saturate(1.08) contrast(1.05);
  opacity: .95;
  transform: scale(1.04);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,10,18,.92), rgba(7,10,18,.65) 45%, rgba(7,10,18,.92)),
    radial-gradient(900px 480px at 35% 45%, rgba(0,0,0,.20), transparent 60%);
  mix-blend-mode: multiply;
}

.hero__grid{
  position: relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2.0rem;
  align-items: start;
}

.kicker{
  display:inline-flex;
  padding: .4rem .7rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(255,255,255,.72);
}

.hero__title{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin: 1.0rem 0 .8rem;
}
.hero__titleAccent{
  display:block;
  background: linear-gradient(90deg, rgba(74,230,201,1), rgba(107,124,255,1), rgba(245,185,75,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.28));
}

.hero__lead{
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  max-width: 62ch;
  margin: 0 0 1.3rem;
}

.hero__cta{
  display:flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1rem 0 1.3rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .55rem;
  padding: .78rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary{
  border-color: rgba(74,230,201,.55);
  background: linear-gradient(180deg, rgba(74,230,201,.22), rgba(74,230,201,.06));
}
.btn--ghost{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.link{
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
.link:hover{ opacity: 1; }

/* Stats */
.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem;
}
.stat{
  padding: 1rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.stat__num{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 650;
  letter-spacing: .2px;
}
.stat__lbl{
  color: rgba(255,255,255,.65);
  margin-top: .25rem;
  font-size: .92rem;
}

/* Right panel */
.hero__panel{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 28px 85px rgba(0,0,0,.45);
  padding: 1.25rem 1.25rem;
}
.panel__title{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 650;
  font-size: 1.15rem;
}
.panel__grid{
  margin-top: .85rem;
  display:flex;
  flex-direction: column;
  gap: .55rem;
}
.pillrow{
  display:flex;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: .42rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.80);
  font-size: .88rem;
}
.panel__note{
  margin-top: 1rem;
  color: rgba(255,255,255,.70);
  line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
}
.panel__actions{
  margin-top: .85rem;
  display:flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Sections */
.section{ padding: 4.2rem 0; }
.section--alt{
  background: radial-gradient(1000px 600px at 20% 0%, rgba(74,230,201,.10), transparent 60%),
              radial-gradient(900px 600px at 85% 10%, rgba(107,124,255,.10), transparent 60%),
              rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section__head{
  display:grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-bottom: 1.6rem;
}
.section__head h2{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin:0;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.section__head p{
  margin:0;
  color: rgba(255,255,255,.72);
  max-width: 90ch;
  line-height: 1.65;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.card{
  padding: 1.15rem 1.15rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}
.card__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(120% 120% at 20% 20%, rgba(74,230,201,.18), rgba(255,255,255,.05));
  margin-bottom: .85rem;
}
.card__icon svg{ width: 22px; height: 22px; color: rgba(255,255,255,.85); }
.card h3{
  margin:.2rem 0 .45rem;
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 650;
}
.card p{ margin:0; color: rgba(255,255,255,.70); line-height: 1.6; }

/* Split */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.4rem;
  align-items:start;
}
.feature{ padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.feature:last-child{ border-bottom: none; }
.feature h3{
  font-family: "Space Grotesk", Inter, system-ui;
  font-weight: 650;
  margin: 0 0 .35rem;
}
.feature p{ margin:0; color: rgba(255,255,255,.72); line-height: 1.65; }

.panel--glass{
  padding: 1.3rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(255,255,255,.04));
  box-shadow: 0 28px 85px rgba(0,0,0,.45);
}
.muted{ color: rgba(255,255,255,.70); line-height: 1.6; }
.divider{ height:1px; background: rgba(255,255,255,.08); margin: 1.1rem 0; }
.chips{ display:flex; flex-wrap: wrap; gap: .6rem; margin: .85rem 0 1rem; }

.machinegrid{ display:grid; gap: .75rem; }
.machine{
  padding: .85rem .9rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.machine__k{ color: rgba(255,255,255,.62); font-size: .9rem; }
.machine__v{ font-family: "Space Grotesk", Inter, system-ui; font-weight: 650; margin-top: .15rem; }

.mini{ display:grid; gap: .8rem; }
.mini__item{
  border-left: 2px solid rgba(74,230,201,.50);
  padding-left: .8rem;
}
.mini__top{ font-weight: 650; font-family: "Space Grotesk", Inter, system-ui; }
.mini__bot{ color: rgba(255,255,255,.68); margin-top: .2rem; line-height: 1.55; }

/* Industries */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.tile{
  padding: 1.15rem 1.15rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}
.tile h3{ margin:0 0 .4rem; font-family:"Space Grotesk", Inter, system-ui; font-weight:650; }
.tile p{ margin:0; color: rgba(255,255,255,.70); line-height: 1.6; }

.banner{
  margin-top: 1.3rem;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(74,230,201,.20);
  background: linear-gradient(90deg, rgba(74,230,201,.14), rgba(107,124,255,.06), rgba(245,185,75,.10));
  box-shadow: 0 28px 85px rgba(0,0,0,.45);
}
.banner__k{ font-family:"Space Grotesk", Inter, system-ui; font-weight:700; }
.banner__v{ color: rgba(255,255,255,.75); margin-top: .15rem; }

/* Steps */
.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: .85rem;
}
.step{
  display:flex;
  gap: .9rem;
  padding: 1.05rem 1.1rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}
.step__n{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Space Grotesk", Inter, system-ui;
  font-weight: 750;
  background: radial-gradient(120% 120% at 20% 20%, rgba(74,230,201,.22), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
}
.step__c h3{ margin:0 0 .25rem; font-family:"Space Grotesk", Inter, system-ui; font-weight:650; }
.step__c p{ margin:0; color: rgba(255,255,255,.70); line-height: 1.6; }

.note{
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius2);
  border: 1px solid rgba(245,185,75,.22);
  background: linear-gradient(180deg, rgba(245,185,75,.12), rgba(255,255,255,.03));
  color: rgba(255,255,255,.78);
}

/* Gallery placeholders */
.gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}
.gcard{
  margin:0;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}
.gimg{
  height: 160px;
  background-size: cover;
  background-position:center;
  position:relative;
}
.gimg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, transparent, rgba(7,10,18,.75));
}
.gimg--a {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65)),
    url("assets/gallery/injection-moulding.webp");
  background-size: cover;
  background-position: center;
}
.gimg--b {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65)),
    url("assets/gallery/tooling-moulds.webp");
  background-size: cover;
  background-position: center;
}
.gimg--c {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65)),
    url("assets/gallery/crushing-recycling.webp");
  background-size: cover;
  background-position: center;
}
.gimg--d {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65)),
    url("assets/gallery/metal-fabrication.webp");
  background-size: cover;
  background-position: center;
}

.gcard figcaption{
  padding: 1rem 1rem 1.05rem;
}
.gcap{ font-family:"Space Grotesk", Inter, system-ui; font-weight:650; }
.gsub{ color: rgba(255,255,255,.68); margin-top:.22rem; }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items:start;
}
.contact__card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
  padding: 1.25rem 1.25rem;
}
.contact__card h3{ margin:0 0 .35rem; font-family:"Space Grotesk", Inter, system-ui; font-weight:700; }
.contact__list{ margin-top: 1rem; display:grid; gap: .6rem; }
.contact__item{
  display:flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .75rem .85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.contact__item:hover{ border-color: rgba(74,230,201,.28); }
.label{ color: rgba(255,255,255,.62); }
.value{ font-weight: 650; font-family:"Space Grotesk", Inter, system-ui; }

.contact__cta{ display:flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.05rem; }

.form{ margin-top: .8rem; display:grid; gap: .85rem; }
label span{ display:block; color: rgba(255,255,255,.70); margin-bottom: .35rem; font-size: .92rem; }
input, textarea{
  width: 100%;
  padding: .75rem .85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  outline: none;
}
input:focus, textarea:focus{ border-color: rgba(74,230,201,.45); box-shadow: 0 0 0 4px rgba(74,230,201,.10); }
textarea{ resize: vertical; min-height: 140px; }

.tiny{ color: rgba(255,255,255,.60); margin-top: .9rem; font-size: .9rem; line-height: 1.5; }

/* Footer */
.footer{
  padding: 2.3rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.footer__inner{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__name{ font-family:"Space Grotesk", Inter, system-ui; font-weight:700; }
.footer__sub{ color: rgba(255,255,255,.66); margin-top: .15rem; }
.footer__meta{ color: rgba(255,255,255,.62); }

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__stats{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
  .contact{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .navbtn{ display:flex; }
  .nav{
    position: absolute;
    right: 1.1rem;
    top: 72px;
    width: min(420px, calc(100% - 2.2rem));
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: .75rem;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(7,10,18,.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    display:none;
  }
  .nav a{ padding: .65rem .7rem; border-radius: 12px; }
  .nav a:hover{ background: rgba(255,255,255,.06); }
  .nav .pill{ text-align:center; }
  .nav.nav--open{ display:flex; }
}

@media (max-width: 520px){
  .hero{ padding-top: 4.4rem; }
  .hero__cta .btn{ width: 100%; }
  .banner{ flex-direction: column; align-items: flex-start; }
  .gallery{ grid-template-columns: 1fr; }
}