:root{
  /* richer, cinematic brand gradient (emerald -> teal -> gold) */
  --brand-grad: linear-gradient(135deg,#00C776 0%, #00A8A8 55%, #C4A15A 100%);
  --brand-stop-1: #00C776; /* emerald */
  --brand-stop-2: #00A8A8; /* teal */
  --gold: #C4A15A;         /* warm accent */
  --accent:#1E40AF;
  --bg:#F4FFF9;
  --text:#071024;
  --muted:#6B7280;
  --glass-1: rgba(255,255,255,0.78);
  --glass-2: rgba(255,255,255,0.52);
  --radius:16px;
  --shadow-deep: 0 18px 50px rgba(2,8,23,0.12);
  --shadow-soft: 0 10px 30px rgba(2,8,23,0.06);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: linear-gradient(180deg, #fbfffb 0%, var(--bg) 100%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout container */
.container{max-width:1200px;margin:0 auto;padding:28px}

/* header - glass, blur on scroll handled by .scrolled */
.site-header{
  position:fixed;left:0;right:0;top:0;z-index:999;
  backdrop-filter: blur(0px);
  transition:backdrop-filter .32s ease, box-shadow .32s ease, background-color .32s ease;
}
.site-header.scrolled{
  backdrop-filter: blur(8px);
  background: linear-gradient(90deg, rgba(255,255,255,0.74), rgba(255,255,255,0.62));
  box-shadow: 0 12px 38px rgba(2,8,23,0.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 28px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;border-radius:8px;box-shadow:0 8px 20px rgba(2,8,23,0.05)}
.brand h1{font-size:1.05rem;color:var(--brand-stop-1);margin:0;font-weight:700}
.nav{display:flex;align-items:center;gap:14px}
.nav a{position:relative;color:var(--text);font-weight:600;padding:8px;border-radius:8px;transition:color .22s}
.nav a::after{
  content:'';position:absolute;left:10px;right:10px;bottom:6px;height:3px;border-radius:6px;
  background:var(--brand-stop-1);opacity:0;transform:scaleX(0);
  transition:opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1);
  background-image: var(--brand-grad);
}
.nav a:hover{color:var(--brand-stop-2)}
.nav a:hover::after{opacity:1;transform:scaleX(1)}

/* Buttons: sheen, hover-only pulse & ripple */
.btn{
  background-image: var(--brand-grad);
  color:#fff;padding:11px 20px;border-radius:14px;border:none;font-weight:800;cursor:pointer;
  box-shadow:0 10px 30px rgba(2,120,84,0.12);
  position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s;
}
.btn:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,199,118,0.14)}
.btn::before{
  content:'';position:absolute;left:-60%;top:0;width:40%;height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  transform:skewX(-20deg);transition:left .9s ease;
}
.btn:hover::before{left:120%}

/* ripple effect (JS adds span.rip) */
.btn.ripple{position:relative;overflow:hidden}
.btn.ripple span.rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.28);animation:ripple .7s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(6);opacity:0}}

/* hero - parallax-ready but no continuous animations */
.hero{
  min-height:560px;display:flex;align-items:center;padding:120px 0 60px;position:relative;overflow:hidden;
  background: linear-gradient(180deg, rgba(0,167,131,0.02), rgba(255,255,255,0));
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:120%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 10s linear}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,10,6,0.06), rgba(255,255,255,0.18));mix-blend-mode:multiply;z-index:1}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 520px;gap:28px;align-items:center}
.hero-card{
  background: linear-gradient(180deg,var(--glass-1),var(--glass-2));
  border-radius:20px;padding:28px;box-shadow:var(--shadow-deep);backdrop-filter: blur(6px);
}

/* typewriter / heading */
.typewriter{font-weight:800;color:var(--brand-stop-2);display:inline-block;white-space:nowrap;border-right:2px solid rgba(0,0,0,0.06);padding-right:8px;margin-left:8px}
.typewriter-cursor{display:inline-block;width:2px;background:var(--brand-stop-2);margin-left:8px;animation:blink 900ms steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* underline for headings (animates when .visible) */
.underline{height:4px;width:76px;border-radius:8px;background-image:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.9,.2,1);margin-top:8px}
.fade-in.visible .underline{transform:scaleX(1)}

/* cards & grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:18px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88));
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s;
  transform-origin:center;background-clip:padding-box;position:relative;
}
.card:hover{
  transform:translateY(-12px) rotateX(2.2deg);
  box-shadow: 0 24px 60px rgba(2,8,23,0.14);
}
.card .thumb{height:180px;overflow:hidden}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;transition:transform .9s ease, filter .45s ease;
  filter:brightness(.96) contrast(1.02);
}
.card:hover .thumb img{transform:scale(1.08);filter:brightness(1.03) contrast(1.07) saturate(1.03)}

/* tilt subtle on pointer (JS sets transform on mousemove) */
.card.tilt{transition:transform .12s ease-out}

/* feature / glass blocks */
.feature{
  padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88));
  box-shadow:var(--shadow-soft);transition:transform .28s, box-shadow .28s;
}
.feature:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,0.08)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}

/* image ambient lighting (gold-teal) */
.img-ambient{
  position:relative;overflow:hidden;border-radius:12px;
}
.img-ambient::after{
  content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background: linear-gradient(180deg, rgba(196,161,90,0.02), rgba(0,168,168,0.02));
  opacity:0;transition:opacity .45s;
}
.img-ambient:hover::after{opacity:1}

/* headings decorative */
h2{font-size:1.6rem;margin:0 0 8px}
h2 + .underline{margin-bottom:14px}

/* contact focus glow */
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;box-shadow:0 12px 30px rgba(196,161,90,0.12);border-color:var(--brand-stop-2)
}

/* footer ambient */
.site-footer{margin-top:60px;padding:28px;text-align:center;color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}

/* fade-in (stagger-ready) - IntersectionObserver adds .visible */
.fade-in{
  opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.9,.2,1), transform 1.0s cubic-bezier(.2,.9,.2,1);
}
.fade-in.visible{opacity:1;transform:none}

/* small screens */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:14px}
  .header-inner{padding:10px 16px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .card .thumb{height:160px}
}

/* utility: subtle focus ring for keyboard users */
:focus{outline:2px solid rgba(0,199,118,0.12);outline-offset:3px}

/* assets/styles.css - Shared styles for SOYET site */
:root{
  --brand:#00C776;
  --brand-dark:#028a53;
  --gold:#C4A15A;
  --muted:#6B7280;
  --text:#071024;
  --bg:#F6FBF7;
  --card:#ffffff;
  --radius:14px;
  --shadow-1: 0 8px 30px rgba(2,8,23,0.06);
  --shadow-2: 0 16px 48px rgba(2,8,23,0.09);
  --max:1200px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: linear-gradient(180deg,#fbfffb 0%, var(--bg) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-family:inherit;
}

.container{max-width:var(--max);margin:0 auto;padding:22px}

/* header */
.site-header{
  position:fixed;left:0;right:0;top:0;z-index:999;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(2,8,23,0.04);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;border-radius:8px;box-shadow:0 8px 20px rgba(2,8,23,0.05)}
.brand h1{font-size:1.05rem;color:var(--brand);font-weight:700;margin:0}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px;border-radius:8px}
.nav a:hover{color:var(--brand-dark)}

/* generic buttons */
.btn {
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-block;
  font-weight:600;
  transition: transform .18s ease, box-shadow .18s;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,199,118,0.12); }

/* utility */
.meta { color: var(--muted); font-weight:600; }
.card { background:var(--card); border-radius:12px; box-shadow:var(--shadow-1); overflow:hidden; }

/* responsive grid helpers */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}

/* hero */
.hero {
  margin-top:72px;
  border-radius: 0 0 20px 20px;
  overflow:hidden;
  position:relative;
}

/* fade-in */
.fade-in { opacity:0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.fade-in.visible { opacity:1; transform:none; }

/* small screens */
@media (max-width: 880px){
  .header-inner { padding:12px 14px; }
  .container { padding:14px; }
}