@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg:#050505;
  --charcoal:#0d0c0a;
  --panel:#11100d;
  --cream:#f4eee5;
  --muted:#b9b0a4;
  --gold:#d8bd78;
  --line:rgba(216,189,120,.23);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 72% 0%, rgba(216,189,120,.12), transparent 33rem),
    radial-gradient(circle at 10% 30%, rgba(216,189,120,.055), transparent 28rem),
    linear-gradient(180deg,#050505 0%,#0b0a08 48%,#050505 100%);
  color:var(--cream);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 5px;
}
a{color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin:0 auto;position:relative;z-index:2}

.site-header{
  height:92px;
  padding:0 clamp(24px,5vw,76px);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none}
.brand img{width:142px;height:58px;object-fit:contain;display:block}
.brand span{font-size:.86rem;letter-spacing:.32em;white-space:nowrap}
nav{display:flex;gap:36px;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem}
nav a{text-decoration:none;color:var(--muted)}
.header-cta{
  text-decoration:none;border:1px solid var(--gold);color:var(--gold);
  padding:12px 18px;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:800;
}

.hero{min-height:calc(100vh - 92px);display:flex;align-items:center;padding:96px 0}
.hero-layout{display:grid;grid-template-columns:1fr 390px;gap:72px;align-items:end}
.eyebrow{margin:0 0 22px;color:var(--gold);letter-spacing:.34em;text-transform:uppercase;font-size:.76rem;font-weight:800}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;text-transform:uppercase;color:#fffaf1;font-weight:600;margin:0}
h1{font-size:clamp(4.2rem,7.7vw,7.4rem);line-height:.92;letter-spacing:.058em;max-width:930px}
.hero-copy>p:not(.eyebrow){max-width:680px;color:var(--muted);line-height:1.78;font-size:1.16rem;margin:32px 0 0}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:42px}
.btn{
  min-height:58px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-transform:uppercase;letter-spacing:.21em;font-size:.74rem;font-weight:900;
}
.btn-primary{border:1px solid var(--gold);color:var(--gold);background:rgba(216,189,120,.04)}
.btn-outline{border:1px solid rgba(244,238,229,.2);color:var(--cream)}
.hero-dashboard{display:grid;gap:16px}
.panel,.mini-grid>div,.service-stack article,.why-grid div,.case-card,.pricing-card,.review-grid article,.process-list div,details,form,.cta-panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
.panel{padding:28px}
.panel span,.mini-grid span{display:block;color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;margin-bottom:12px}
.panel strong,.mini-grid strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:2.4rem;line-height:1;color:#fffaf1;text-transform:uppercase}
.panel p{color:var(--muted);line-height:1.65;margin-bottom:0}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-grid>div{padding:24px}
.status-line{color:var(--cream);padding:9px 0;border-bottom:1px solid rgba(216,189,120,.12)}
.status-line:last-child{border-bottom:0}
.status-line span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:10px}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.015);position:relative;z-index:2}
.ticker-track{display:flex;gap:42px;padding:18px 24px;justify-content:center;flex-wrap:wrap;color:var(--gold);letter-spacing:.24em;text-transform:uppercase;font-size:.72rem}

.section{padding:108px 0;position:relative}
.split-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:48px}
h2{font-size:clamp(2.8rem,5.4vw,5.3rem);line-height:.94;letter-spacing:.052em}
.split-heading>p,.pricing-layout>div>p,.contact-layout>div>p{color:var(--muted);line-height:1.75}
.service-stack{display:grid;gap:14px}
.service-stack article{display:grid;grid-template-columns:90px 1fr 110px;gap:26px;align-items:center;padding:28px}
.service-num,.tag{color:var(--gold);letter-spacing:.24em;text-transform:uppercase;font-size:.75rem}
.service-stack h3{font-size:2.4rem;letter-spacing:.06em}
.service-stack p{color:var(--muted);line-height:1.65;margin:10px 0 0}
.service-stack article>span{color:var(--gold);text-align:right;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem}

.why-section,.work-section,.reviews-section,.faq-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.014)}
.section-title-center{text-align:center;max-width:900px;margin:0 auto 44px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.why-grid div{min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.why-grid b{color:var(--gold);font-size:1.4rem}
.why-grid span{line-height:1.45;font-weight:600}

.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.case-card{overflow:hidden}
.case-visual{
  min-height:250px;padding:24px;position:relative;
  background:radial-gradient(circle at 70% 20%, rgba(216,189,120,.18), transparent 18rem), #090806;
  border-bottom:1px solid var(--line);
}
.photo-visual{background:radial-gradient(circle at 25% 20%, rgba(216,189,122,.16), transparent 18rem), #0b0a08}
.fake-browser{display:flex;gap:8px;margin-bottom:54px}
.fake-browser div{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.7}
.case-visual h4{font-size:3.2rem;letter-spacing:.08em}
.case-visual p{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
.case-content{padding:34px}
.case-content h3{font-size:3.3rem;letter-spacing:.06em;margin:18px 0}
.case-content p{color:var(--muted);line-height:1.68}
.case-meta{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.case-meta span{border:1px solid rgba(216,189,120,.18);padding:8px 10px;color:var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.case-content a{color:var(--gold);text-decoration:none;letter-spacing:.12em}

.pricing-layout{display:grid;grid-template-columns:1fr 410px;gap:72px;align-items:center}
.pricing-layout>div>p{max-width:620px}
.pricing-card{padding:34px}
.pricing-top span{color:var(--gold);text-transform:uppercase;letter-spacing:.24em;font-size:.72rem}
.pricing-top strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:4.2rem;line-height:.9;color:#fffaf1;margin-top:14px}
.pricing-card p{color:var(--muted);line-height:1.6}
.pricing-card ul{list-style:none;padding:0;margin:22px 0}
.pricing-card li{padding:9px 0;border-bottom:1px solid rgba(216,189,120,.14);font-size:.94rem}
.pricing-card li:before{content:"✓";color:var(--gold);margin-right:10px}
.pricing-card .btn{width:100%}

.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.review-grid article{padding:36px}
.stars{color:var(--gold);letter-spacing:.16em;margin-bottom:18px}
.review-grid p{font-size:1.12rem;line-height:1.7;font-style:italic}
.review-grid span{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem}

.process-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}
.process-list{display:grid;gap:16px}
.process-list div{padding:28px}
.process-list span{color:var(--gold);letter-spacing:.22em}
.process-list h3{font-size:2.2rem;margin:12px 0}
.process-list p{color:var(--muted);line-height:1.65;margin:0}

.faq-list{display:grid;gap:14px}
details{padding:24px 28px}
summary{cursor:pointer;font-family:"Cormorant Garamond",Georgia,serif;text-transform:uppercase;font-size:1.8rem;letter-spacing:.05em}
details p{color:var(--muted);line-height:1.7;margin-bottom:0}

.cta-panel{text-align:center;padding:clamp(50px,8vw,84px) clamp(24px,5vw,70px);background:radial-gradient(circle at 50% 0%, rgba(216,189,120,.12), transparent 25rem),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006))}
.cta-panel h2{max-width:850px;margin:0 auto}
.cta-panel p:not(.eyebrow){color:var(--muted);max-width:620px;line-height:1.75;margin:24px auto 34px}

.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px}
.email-link{display:inline-block;color:var(--gold);text-decoration:none;margin-top:24px;letter-spacing:.08em}
form{padding:36px}
label{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:.73rem;font-weight:900;margin-bottom:24px}
input,textarea{width:100%;margin-top:12px;padding:18px;background:rgba(0,0,0,.34);border:1px solid rgba(216,189,120,.25);color:var(--cream);font:inherit;outline:none}
button{width:100%;min-height:58px;border:0;background:linear-gradient(135deg,#fff8ea,#d8bd78);color:#050505;text-transform:uppercase;letter-spacing:.22em;font-weight:900}

footer{text-align:center;padding:90px 24px 44px;border-top:1px solid var(--line)}
footer img{width:170px;height:auto;object-fit:contain}
footer h2{font-size:clamp(2.8rem,5vw,4.8rem);margin-top:18px}
footer p{color:var(--muted)}
footer small{color:rgba(244,238,229,.44);letter-spacing:.32em}

@media(max-width:950px){
  nav,.header-cta{display:none}
  .site-header{height:92px;padding:0 24px}
  .brand img{width:128px;height:54px}
  .brand span{font-size:.72rem;letter-spacing:.2em}
  .hero-layout,.split-heading,.pricing-layout,.process-layout,.contact-layout{grid-template-columns:1fr;gap:34px}
  .hero{padding:82px 0}
  h1{font-size:clamp(3.35rem,11.5vw,5rem);max-width:10.6ch;line-height:.96}
  h2{font-size:clamp(2.55rem,10vw,4rem)}
  .hero-dashboard{display:none}
  .service-stack article{grid-template-columns:1fr;gap:14px}
  .service-stack article>span{text-align:left}
  .why-grid,.case-grid,.review-grid{grid-template-columns:1fr}
  .why-grid div{min-height:auto}
  .pricing-card{max-width:100%}
  .ticker-track{justify-content:flex-start}
  .case-visual{min-height:210px}
}
@media(max-width:480px){
  .container{width:calc(100% - 40px)}
  .brand img{width:112px;height:50px}
  .brand span{font-size:.66rem;letter-spacing:.16em}
  h1{font-size:clamp(3rem,11vw,4rem)}
  .btn{width:100%;padding:0 18px}
  .case-content,.pricing-card,form,.review-grid article,.process-list div,details{padding:24px}
  .case-content h3{font-size:2.7rem}
  .pricing-top strong{font-size:3.2rem}
}


/* PORTFOLIO MOBILE FIT FIX */
.case-card {
  overflow: hidden !important;
}

.case-visual,
.case-content {
  overflow: hidden !important;
}

.case-visual h4,
.case-content h3 {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 950px) {
  .case-grid {
    gap: 20px !important;
  }

  .case-visual {
    min-height: 190px !important;
    padding: 24px !important;
  }

  .case-visual h4 {
    font-size: clamp(2.45rem, 10.5vw, 4.1rem) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.06em !important;
  }

  .case-visual p {
    font-size: 0.68rem !important;
    letter-spacing: 0.16em !important;
  }

  .case-content h3 {
    font-size: clamp(2.35rem, 10vw, 3.9rem) !important;
    line-height: 0.96 !important;
    letter-spacing: 0.055em !important;
  }

  .case-content p {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  .case-card {
    width: 100% !important;
  }

  .case-visual {
    min-height: 170px !important;
    padding: 22px !important;
  }

  .case-visual h4 {
    font-size: clamp(2rem, 8.8vw, 3.15rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
  }

  .case-content {
    padding: 24px !important;
  }

  .case-content h3 {
    font-size: clamp(2.15rem, 9vw, 3.25rem) !important;
    line-height: 1 !important;
  }

  .case-meta {
    gap: 8px !important;
  }

  .case-meta span {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    padding: 7px 8px !important;
  }

  .case-content a {
    font-size: 0.82rem !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 390px) {
  .case-visual h4,
  .case-content h3 {
    font-size: 2.05rem !important;
  }
}