/* ============================
   DS — Modern Luxury One-Page
   Pure HTML + CSS (no JS)
   ============================ */

/* --------- Variables (tweak here) --------- */
:root{
  --bg-1: #050409;
  --bg-2: #13061a;
  --gold-1: #f7d080;
  --gold-2: #f3b849;
  --muted: rgba(255,255,255,0.86);
  --muted-soft: rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.015);
  --accent: #8be9e9;
  --container: 1150px;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(0,0,0,0.65);
  --ease: cubic-bezier(.15,.9,.2,1);
  --reveal-duration: .9s;
}

/* --------- Base reset & fonts --------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--muted);
  background:
    radial-gradient(900px 400px at 10% 10%, rgba(179,89,190,0.06), transparent),
    radial-gradient(800px 350px at 85% 75%, rgba(243,184,73,0.03), transparent),
    linear-gradient(180deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* soft background motion */
.bg-glow{position:fixed;inset:0;z-index:-3;filter:blur(36px);opacity:0.85;pointer-events:none}
.bg-texture{position:fixed;inset:0;z-index:-4;pointer-events:none;background-image:
  radial-gradient(1px 1px at 8% 30%, rgba(255,255,255,0.06) 60%, transparent 61%),
  radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.05) 60%, transparent 61%);opacity:0.12}

/* page wrapper */
.page{position:relative;min-height:100vh}

/* --------- Header / Nav --------- */
.site-header{
  position:fixed;top:18px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;z-index:60;max-width:var(--container);margin:0 auto;width:calc(100% - 56px);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius:14px;box-shadow:var(--shadow);backdrop-filter: blur(8px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .monogram{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03)}
.brand-text{font-family:"Playfair Display", serif;font-weight:700;letter-spacing:2px;color:var(--muted-soft)}
.monogram .d,.monogram .s{position:absolute;font-family:"Playfair Display",serif;font-weight:800;color:var(--gold-1)}
.monogram .d{left:8px;top:6px;font-size:20px}
.monogram .s{right:8px;bottom:6px;font-size:20px;transform:rotate(-6deg)}

/* Nav links */
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;transition:all .22s var(--ease)}
.nav a:hover{color:var(--gold-1);transform:translateY(-4px)}

/* --------- Section & snap container --------- */
.snap-container{scroll-snap-type:y mandatory}
.section{min-height:80vh;display:grid;align-items:center;padding:120px 20px;scroll-snap-align:start}
.container{max-width:var(--container);margin:0 auto}

/* --------- Reveal helper (CSS-only entrance) --------- */
.reveal{opacity:0;transform:translateY(14px);animation-fill-mode:both}
.reveal[data-delay="0"]{animation:fadeUp var(--reveal-duration) var(--ease) .06s both}
.reveal[data-delay="100"]{animation:fadeUp var(--reveal-duration) var(--ease) .12s both}
.reveal[data-delay="200"]{animation:fadeUp var(--reveal-duration) var(--ease) .18s both}
.reveal[data-delay="300"]{animation:fadeUp var(--reveal-duration) var(--ease) .24s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* --------- HERO --------- */
.hero{display:grid;place-items:center;text-align:center;padding-top:140px;padding-bottom:80px}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:18px}

/* monogram large centerpiece */
.monogram-large{position:relative;display:inline-grid;place-items:center;width:220px;height:220px;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.03);box-shadow:0 30px 90px rgba(0,0,0,0.6);overflow:visible}
.monogram-large .d,.monogram-large .s{
  font-family:"Playfair Display", serif;font-weight:800;font-size:110px;line-height:.82;
  position:absolute;-webkit-text-stroke:1px rgba(0,0,0,0.45);
  text-shadow:0 8px 36px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;mix-blend-mode:screen;
}
.monogram-large .d{left:24px;top:14px;transform:rotate(-6deg) scale(1.02)}
.monogram-large .s{right:24px;bottom:8px;transform:rotate(6deg) scale(0.98)}

/* shining sweep */
.monogram-large .shine{position:absolute;inset:0;border-radius:50%;
  pointer-events:none;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.4), rgba(255,255,255,0.02));
  transform:translateX(-140%);filter:blur(18px);opacity:0.7;animation:shinesweep 3.6s linear infinite}
@keyframes shinesweep{0%{transform:translateX(-140%)}50%{transform:translateX(40%)}100%{transform:translateX(140%)}}

/* byline */
.brand-name{font-family:"Playfair Display",serif;font-size:28px;font-weight:700;color:var(--gold-1);letter-spacing:2px}
.tag{color:var(--muted-soft);font-weight:400}

/* cta buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:700;transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.btn.primary{background:linear-gradient(90deg,var(--gold-1),var(--gold-2));color:#12060a;box-shadow:0 18px 60px rgba(243,184,73,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn:hover{transform:translateY(-6px)}

/* --------- About cards --------- */
.section-title{text-align:center;font-family:"Playfair Display",serif;font-size:30px;color:var(--gold-1);margin-bottom:12px}
.lead{text-align:center;color:var(--muted-soft);max-width:780px;margin:0 auto 28px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:22px}
.glass-card{background:var(--glass);border-radius:14px;padding:20px;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 22px 70px rgba(0,0,0,0.55);backdrop-filter:blur(8px);transition:transform .28s var(--ease),box-shadow .28s}
.glass-card:hover{transform:translateY(-10px);box-shadow:0 36px 110px rgba(0,0,0,0.6)}

/* --------- Work / projects --------- */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:18px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow);transition:transform .28s var(--ease),box-shadow .28s}
.project-card h4{font-family:"Playfair Display",serif;color:var(--gold-1);margin-bottom:8px}
.project-card p{color:var(--muted-soft);margin-bottom:14px}
.card-cta{display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);border:1px solid rgba(255,255,255,0.04)}
.project-card:hover{transform:translateY(-10px);box-shadow:0 40px 120px rgba(0,0,0,0.65)}

/* --------- Contact form --------- */
.contact-form{max-width:820px;margin:18px auto 0;display:flex;flex-direction:column;gap:14px}
.form-row{display:flex;gap:12px}
.contact-form input,.contact-form textarea{flex:1;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.01);color:var(--muted);outline:none;transition:box-shadow .18s}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:0 12px 40px rgba(0,0,0,0.45);border-color:rgba(243,184,73,0.22)}
.form-actions{display:flex;gap:12px}

/* --------- Footer --------- */
.footer{padding:40px 20px;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));margin-top:40px}
.footer-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-brand{display:flex;align-items:center;gap:12px}
.monogram.small{width:44px;height:44px;font-size:16px}
.footer .name{color:var(--muted-soft)}

/* --------- Responsive --------- */
@media (max-width:980px){
  .nav{display:none}
  .site-header{padding:8px 18px;width:calc(100% - 36px)}
  .monogram-large{width:160px;height:160px}
  .monogram-large .d,.monogram-large .s{font-size:78px}
  .hero{padding-top:100px}
}
@media (max-width:560px){
  .site-header{left:12px;right:12px}
  .brand-text{display:none}
  .monogram-large{width:130px;height:130px}
  .monogram-large .d,.monogram-large .s{font-size:60px}
  .form-row{flex-direction:column}
  .section{padding:80px 16px}
}