/* ═══════════════════════════════════════════════
   GREEN UNIMARK — Shared Styles
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
:root {
  --bg:     #030A03;
  --dark:   #071207;
  --accent: #00FF88;
  --a2:     #00FFB2;
  --leaf:   #4ADE80;
  --white:  #F0FFF4;
  --muted:  rgba(240,255,244,.42);
}

/* ── CONTAINER ── */
.cont { max-width: 1300px; margin: 0 auto; padding: 0 64px; }
@media(max-width:768px){ .cont { padding: 0 24px; } }

/* ── SECTION HEADER (centered) ── */
.sh { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.sh p { color: var(--muted); font-size: 1rem; line-height: 1.8; margin-top: 16px; }
.sh h2 { font-size: clamp(2rem,5vw,4rem); font-weight:900; letter-spacing:-2px; line-height:.93; text-transform:uppercase; }

/* ── GENERIC BUTTON ── */
.btn {
  background: var(--accent); color: var(--bg);
  padding: 16px 40px; border: 1px solid var(--accent);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; cursor: none;
  text-decoration: none; display: inline-block;
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,255,136,.3); }

.btn-dark {
  background: var(--bg); color: var(--accent);
  padding: 18px 44px; border: 1px solid var(--bg);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; cursor: none;
  text-decoration: none; display: inline-block;
  transition: transform .3s, box-shadow .3s;
}
.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.3); }

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

body {
  background: var(--bg); color: var(--white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden; cursor: none;
}

/* NOISE */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ── PAGE TRANSITION ── */
#pt {
  position: fixed; inset: 0; z-index: 99980;
  background: var(--dark);
  transform: scaleX(1);
  transform-origin: right;
  pointer-events: none;
}

/* ── CURSOR ── */
#cur {
  width: 12px; height: 12px; background: var(--accent); border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s, border-radius .25s;
  mix-blend-mode: difference;
}
#cur.h { width: 48px; height: 48px; background: transparent; border: 2px solid var(--accent); }
#fol {
  width: 36px; height: 36px; border: 1px solid rgba(0,255,136,.45); border-radius: 50%;
  position: fixed; pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%); mix-blend-mode: difference;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 28px 60px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.s {
  background: rgba(3,10,3,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-color: rgba(0,255,136,.07);
}
@media(max-width:768px){ nav { padding: 20px 24px; } }

.n-logo {
  font-size: 15px; font-weight: 800; letter-spacing: 4px;
  color: var(--white); text-decoration: none; text-transform: uppercase; cursor: none;
}
.n-logo em { color: var(--accent); font-style: normal; }

.n-btn {
  background: none; border: none; font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--white); cursor: none; display: flex; align-items: center; gap: 12px;
}
.hbg { width: 26px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.hbg span { display: block; height: 1px; background: var(--white); transition: all .4s; }

/* ── FULLSCREEN MENU ── */
.fmenu {
  position: fixed; inset: 0; background: var(--dark); z-index: 900;
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(0% at calc(100% - 90px) 48px);
  transition: clip-path .85s cubic-bezier(.76,0,.24,1);
  pointer-events: none;
}
.fmenu.o { clip-path: circle(160% at calc(100% - 90px) 48px); pointer-events: all; }

.fm-x {
  position: absolute; top: 28px; right: 60px;
  background: none; border: none; font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--white); cursor: none;
}
.fmenu ul { list-style: none; text-align: center; }
.fmenu ul li { overflow: hidden; margin: 4px 0; }
.fmenu ul a {
  display: block;
  font-size: clamp(42px, 8.5vw, 84px); font-weight: 900;
  color: var(--white); text-decoration: none; text-transform: uppercase; letter-spacing: -3px;
  transform: translateY(110%);
  transition: color .3s, transform .65s cubic-bezier(.76,0,.24,1);
}
.fmenu.o ul a { transform: translateY(0); }
.fmenu ul a:hover { color: var(--accent); }
.fmenu ul li:nth-child(1) a { transition-delay: .07s; }
.fmenu ul li:nth-child(2) a { transition-delay: .12s; }
.fmenu ul li:nth-child(3) a { transition-delay: .17s; }
.fmenu ul li:nth-child(4) a { transition-delay: .22s; }
.fmenu ul li:nth-child(5) a { transition-delay: .27s; }

/* ── INNER PAGE HERO ── */
.ph {
  height: 65vh; min-height: 380px; position: relative;
  display: flex; align-items: flex-end;
  padding: 80px 64px 60px; overflow: hidden;
}
@media(max-width:768px){ .ph { padding: 80px 24px 44px; height: 55vh; } }

.ph-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.35) saturate(1.2);
  transform: scale(1.04);
  transition: transform 8s ease;
}
.ph:hover .ph-bg { transform: scale(1.08); }

.ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3,10,3,.9) 0%, rgba(3,10,3,.2) 60%);
}

.ph-content { position: relative; z-index: 1; }

.ph-label {
  font-size: 10px; letter-spacing: 6px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; animation: phUp .7s ease .1s forwards;
}
.ph-label::before { content: ''; display: block; width: 30px; height: 1px; background: var(--accent); }

.ph-title {
  font-size: clamp(48px, 9vw, 100px); font-weight: 900;
  line-height: .88; letter-spacing: -4px; text-transform: uppercase;
  opacity: 0; transform: translateY(36px);
  animation: phUp .9s cubic-bezier(.25,.46,.45,.94) .2s forwards;
}
.ph-sub {
  font-size: 15px; color: rgba(255,255,255,.5); font-weight: 300;
  margin-top: 16px; max-width: 520px; line-height: 1.75;
  opacity: 0; animation: phUp .7s ease .4s forwards;
}

@keyframes phUp { to { opacity: 1; transform: translateY(0); } }

/* ── MARQUEE ── */
.mqstrip { background: var(--accent); color: var(--bg); padding: 13px 0; overflow: hidden; white-space: nowrap; }
.mqinner { display: inline-flex; animation: mq 22s linear infinite; }
.mqinner span { font-size: 11px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; padding: 0 32px; }
.mqinner .dot { padding: 0; color: rgba(0,0,0,.35); }
@keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── SECTIONS ── */
.sec { padding: 120px 64px; }
@media(max-width:768px){ .sec { padding: 80px 24px; } }

.sl {
  font-size: 10px; letter-spacing: 6px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
}
.sl::before { content: ''; display: block; width: 32px; height: 1px; background: var(--accent); }

.st {
  font-size: clamp(34px, 5.5vw, 72px); font-weight: 900;
  line-height: .92; letter-spacing: -3px; text-transform: uppercase; margin-bottom: 20px;
}

/* ── REVEAL ── */
.rv { opacity: 0; transform: translateY(52px); transition: opacity .88s cubic-bezier(.25,.46,.45,.94), transform .88s cubic-bezier(.25,.46,.45,.94); }
.rv.vis { opacity: 1; transform: translateY(0); }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; } .rv.d4 { transition-delay: .4s; }

/* ── BUTTONS ── */
.btn-g {
  background: var(--accent); color: var(--bg);
  padding: 18px 44px; border: none; font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  cursor: none; text-decoration: none; display: inline-block;
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.btn-g::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.15); transform: translateX(-100%); transition: transform .35s; }
.btn-g:hover::before { transform: translateX(0); }
.btn-g:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,255,136,.3); }

.btn-o {
  background: transparent; color: var(--white);
  padding: 18px 44px; border: 1px solid rgba(255,255,255,.22);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; cursor: none; text-decoration: none;
  display: inline-block; transition: all .3s;
}
.btn-o:hover { border-color: var(--accent); color: var(--accent); }

/* ── STATS ── */
.stats-g { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.stat { border-top: 1px solid rgba(255,255,255,.07); padding-top: 22px; }
.sn { font-size: clamp(40px, 4.5vw, 62px); font-weight: 900; color: var(--accent); letter-spacing: -3px; line-height: 1; margin-bottom: 8px; }
.sl2 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); }

/* ── ACCORDION ── */
.acc { border-top: 1px solid rgba(255,255,255,.07); }
.ai  { border-bottom: 1px solid rgba(255,255,255,.07); }
.ah  { display: flex; align-items: center; justify-content: space-between; padding: 32px 0; cursor: none; }
.ah:hover .at { color: var(--accent); }
.al  { display: flex; align-items: center; gap: 24px; }
.an  { font-size: 12px; color: var(--accent); letter-spacing: 3px; }
.at  { font-size: clamp(18px, 2.6vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: -1px; transition: color .3s; }
.aico {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: all .4s;
}
.aico::before, .aico::after { content: ''; position: absolute; background: var(--white); transition: all .4s; }
.aico::before { width: 14px; height: 1px; }
.aico::after  { width: 1px;  height: 14px; }
.ai.op .aico { background: var(--accent); border-color: var(--accent); }
.ai.op .aico::before, .ai.op .aico::after { background: var(--bg); }
.ai.op .aico::after { transform: rotate(90deg); opacity: 0; }
.ab2 { max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.25,.46,.45,.94); }
.abi { padding-bottom: 20px; padding-left: calc(24px + 2ch + 24px); font-size: 15px; color: rgba(255,255,255,.48); line-height: 1.88; max-width: 640px; }
.acc-img {
  display: block; margin: 0 0 32px calc(24px + 2ch + 24px);
  width: min(700px, calc(100% - (24px + 2ch + 24px) - 40px));
  height: 220px; object-fit: cover;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s .2s, transform .5s .2s;
  filter: brightness(.82) saturate(1.1);
}
.ai.op .acc-img { opacity: 1; transform: translateY(0); }
@media(max-width:768px){ .acc-img { width: 100%; margin-left: 0; height: 160px; } }

/* ── PROCESS ── */
.pi { max-width: 900px; margin: 0 auto; position: relative; }
.pspine { position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.05); overflow: hidden; }
.psfill { position: absolute; top: 0; left: 0; right: 0; height: 0; background: linear-gradient(to bottom, var(--accent), transparent); transition: height .12s; }
.ps { display: flex; gap: 52px; padding: 52px 0 52px 60px; position: relative; opacity: .22; transition: opacity .6s; }
.ps.lit { opacity: 1; }
.pdot { position: absolute; left: 0; top: 60px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.13); background: var(--bg); transition: all .5s; }
.ps.lit .pdot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 24px rgba(0,255,136,.5); }
.pnum { font-size: 84px; font-weight: 900; color: rgba(255,255,255,.04); line-height: 1; letter-spacing: -5px; flex-shrink: 0; width: 86px; transition: color .5s; }
.ps.lit .pnum { color: rgba(0,255,136,.1); }
.pcont h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 12px; padding-top: 10px; }
.pcont p { font-size: 15px; color: rgba(255,255,255,.46); line-height: 1.88; max-width: 480px; }

/* ── TESTIMONIALS ── */
.trow { overflow: hidden; margin-bottom: 16px; }
.ttrack { display: inline-flex; gap: 18px; animation: tmq 32s linear infinite; }
.trow:nth-child(2) .ttrack { animation-direction: reverse; animation-duration: 40s; }
@keyframes tmq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.tc { width: 360px; flex-shrink: 0; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); padding: 28px; transition: border-color .4s; }
.tc:hover { border-color: rgba(0,255,136,.2); }
.tstars { display: flex; gap: 3px; margin-bottom: 14px; }
.tstars span { color: var(--accent); font-size: 12px; }
.tq { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.85; margin-bottom: 20px; }
.ta { display: flex; align-items: center; gap: 10px; }
.tav { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--a2)); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--bg); font-size: 11px; }
.tn { font-size: 13px; font-weight: 700; }
.tr { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; }

/* ── CONTACT FORM ── */
.cg { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; max-width: 1200px; margin: 0 auto; }
@media(max-width:900px){ .cg { grid-template-columns: 1fr; gap: 56px; } }
.ci h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 900; text-transform: uppercase; letter-spacing: -3px; line-height: .93; margin-bottom: 20px; }
.ci p { color: rgba(255,255,255,.42); font-size: 15px; line-height: 1.88; margin-bottom: 40px; }
.cd { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: rgba(255,255,255,.5); font-size: 14px; }
.cdico { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid rgba(0,255,136,.2); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 14px; }
.fg { position: relative; margin-bottom: 34px; }
.fi { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.14); padding: 18px 0; color: var(--white); font-family: 'Inter', sans-serif; font-size: 15px; outline: none; transition: border-color .3s; }
.fi:focus { border-color: var(--accent); }
.fi::placeholder { color: transparent; }
.fl { position: absolute; top: 18px; left: 0; font-size: 13px; color: rgba(255,255,255,.32); pointer-events: none; transition: all .3s cubic-bezier(.25,.46,.45,.94); letter-spacing: 1px; }
.fi:focus + .fl, .fi:not(:placeholder-shown) + .fl { top: -6px; font-size: 10px; color: var(--accent); letter-spacing: 4px; text-transform: uppercase; }
.fglow { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .35s; box-shadow: 0 0 12px var(--accent); }
.fi:focus ~ .fglow { width: 100%; }
.fta { resize: none; height: 108px; }
.fsel { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300FF88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center; }
.fsel option { background: var(--dark); color: var(--white); }
.mw { display: inline-block; position: relative; margin-top: 8px; }
.bsend { background: var(--accent); color: var(--bg); padding: 20px 60px; border: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; cursor: none; display: inline-block; transition: transform .2s, box-shadow .3s; }
.bsend:hover { box-shadow: 0 16px 48px rgba(0,255,136,.35); }
.fok { display: none; padding: 56px 0; text-align: center; }
.fok.sh { display: block; }
.fok h3 { font-size: 32px; font-weight: 900; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; letter-spacing: -2px; }
.fok p { color: rgba(255,255,255,.4); line-height: 1.88; }

/* ── CONFETTI ── */
.cf { position: fixed; width: 7px; height: 7px; pointer-events: none; z-index: 99999; animation: cff var(--d,.9s) ease-in forwards; }
@keyframes cff { 0% { transform: translateY(-80px) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--r,720deg)); opacity: 0; } }

/* ── FOOTER ── */
footer { background: var(--dark); padding: 88px 64px 44px; border-top: 1px solid rgba(255,255,255,.04); }
@media(max-width:768px){ footer { padding: 64px 24px 36px; } }
.ft { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px; flex-wrap: wrap; gap: 44px; }
.fb { font-size: clamp(36px, 5vw, 58px); font-weight: 900; text-transform: uppercase; letter-spacing: -3px; line-height: 1; }
.fb em { color: var(--accent); font-style: normal; }
.fbsub { color: rgba(255,255,255,.28); font-size: 13px; margin-top: 12px; line-height: 1.75; max-width: 260px; }
.fn h4 { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.22); margin-bottom: 16px; }
.fn ul { list-style: none; }
.fn li { margin-bottom: 10px; }
.fn a { color: rgba(255,255,255,.46); text-decoration: none; font-size: 14px; transition: color .3s; cursor: none; }
.fn a:hover { color: var(--accent); }
.fbot { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.04); flex-wrap: wrap; gap: 16px; }
.fcp { font-size: 12px; color: rgba(255,255,255,.18); }
.tbtn { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--white); font-size: 17px; cursor: none; position: relative; overflow: hidden; transition: border-color .3s; }
.tbtn::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(100%); transition: transform .35s; }
.tbtn:hover::before { transform: translateY(0); }
.tbtn:hover { border-color: var(--accent); color: var(--bg); }
.tbtn span { position: relative; z-index: 1; }