*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --gold:#c9a84c;
  --gold-soft:#f1d78a;
  --ink:#0a0a0a;
  --paper:#f8f3e9;
  --paper-2:#eee5d5;
  --line:#d8ccba;
  --muted:#6f665b;
  --dark:#0f0d0a;
}
body{
  min-height:100vh;
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,#fbf7ef 0%,#f1e8d8 100%);
  color:var(--ink);
  padding:0 clamp(14px,2.2vw,34px) 72px;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.page-shell{width:min(1780px,100%);margin:0 auto}
.contact-hero{
  margin:48px 0 0;
  min-height:calc(100vh - 132px);
  display:grid;
  grid-template-columns:minmax(520px,.88fr) minmax(620px,1.12fr);
  background:var(--paper);
  border:1px solid rgba(10,10,10,.08);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 26px 64px rgba(36,28,15,.12);
}
.contact-main{
  padding:70px clamp(28px,4vw,70px) 58px;
  display:flex;
  align-items:center;
}
.contact-inner{width:100%;max-width:690px;margin:0 auto}
.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:28px;
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#8a6f31;
}
.eyebrow{
  display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;
  background:rgba(201,168,76,.13);border:1px solid rgba(201,168,76,.28);color:#765c1d;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:16px;
}
body.needs-shared-chrome .page-shell .contact-main h1{
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:clamp(2.35rem,3.9vw,3.85rem);
  line-height:.98;
  letter-spacing:0;
  margin-bottom:14px;
  color:var(--ink)!important;
}
body.needs-shared-chrome .page-shell .contact-main .lead{max-width:620px;color:var(--muted)!important;font-size:1rem;line-height:1.72;margin-bottom:34px}
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:.86rem;font-weight:850;letter-spacing:0;color:#18130d}
input,select,textarea{
  width:100%;
  min-height:48px;
  border:1.5px solid rgba(10,10,10,.38);
  border-radius:8px;
  background:rgba(255,253,246,.68);
  color:#12100c;
  font:inherit;
  font-size:.95rem;
  padding:0 13px;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
textarea{min-height:110px;padding:13px;resize:vertical;line-height:1.5}
select{appearance:auto;color:#4f473d}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);
  background:#fffdf8;
  box-shadow:0 0 0 4px rgba(201,168,76,.16);
}
.submit-row{grid-column:1/-1;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.submit-btn{
  width:100%;
  min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid rgba(10,10,10,.16);
  border-radius:10px;
  background:linear-gradient(180deg,#171717 0%,#060606 100%);
  color:#fff;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 38px rgba(0,0,0,.18);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(0,0,0,.22);filter:brightness(1.04)}
.submit-btn:disabled{cursor:not-allowed;opacity:.54;transform:none;box-shadow:none}
.submit-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-status{
  min-height:22px;
  color:#635847;
  font-size:.86rem;
  line-height:1.55;
}
.form-status.ok{color:#276749;font-weight:750}
.form-status.warn{color:#8a5b00;font-weight:750}
.contact-side{
  position:relative;
  min-height:720px;
  background:linear-gradient(160deg,#191714 0%,#11100e 48%,#0a0908 100%);
  color:#fff;
  padding:42px clamp(34px,4.2vw,70px);
  display:grid;
  align-items:start;
  justify-items:center;
  overflow:hidden;
}
.product-showcase{
  position:relative;
  z-index:1;
  width:min(100%,760px);
  min-height:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:24px 0 18px;
}
.showcase-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:2.15rem;
  font-weight:900;
  letter-spacing:0;
  margin-bottom:10px;
}
.showcase-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 7px;
  border-radius:14px;
  background:#f6efe3;
  color:#141210;
  font-size:1.08rem;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.showcase-brand img{width:34px;height:34px;border-radius:9px;display:block}
.product-showcase h2{
  max-width:720px;
  margin:0 auto 18px;
  text-align:center;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:clamp(2rem,2.42vw,2.95rem);
  line-height:1.03;
  letter-spacing:0;
  color:#fff8ed;
}
.showcase-stage{
  position:relative;
  width:min(100%,720px);
  min-height:468px;
  margin-top:8px;
}
.app-shot{
  position:absolute;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.48);
}
.app-shot-main{
  left:-16px;
  right:-16px;
  bottom:18px;
  height:390px;
  transform:rotate(-1.5deg);
}
.app-mockup{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:9px;
  padding:10px;
  background:
    radial-gradient(circle at 10% 16%,rgba(214,174,56,.11),transparent 22%),
    linear-gradient(145deg,#101116,#07080c 58%,#030407);
  color:#f9f5ea;
  box-shadow:0 34px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.04) inset;
}
.mock-sidebar{
  border-radius:13px;
  padding:11px 8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    radial-gradient(circle at 50% 0,rgba(255,255,255,.08),transparent 38%);
  border:1px solid rgba(255,255,255,.075);
}
.mock-logo{display:flex;align-items:center;gap:7px;margin-bottom:28px}
.mock-logo span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  background:#050507;
  color:#d8ad2d;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:1.25rem;
  font-weight:900;
}
.mock-logo strong{font-size:.88rem;line-height:1}
.mock-nav{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  margin:7px 0;
  padding:0 6px;
  border-radius:8px;
  color:rgba(249,245,234,.62);
  font-size:.55rem;
  font-weight:800;
}
.mock-nav span{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
}
.mock-nav.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(214,174,56,.38),rgba(214,174,56,.10));
  box-shadow:0 0 0 1px rgba(214,174,56,.42) inset;
}
.mock-workspace{
  min-width:0;
  border-radius:13px;
  padding:12px;
  background:rgba(7,8,12,.7);
  border:1px solid rgba(255,255,255,.08);
}
.mock-template-rail{
  display:grid;
  grid-template-columns:repeat(5,minmax(56px,1fr)) repeat(3,minmax(48px,.9fr));
  gap:7px;
  margin-bottom:7px;
}
.mock-template,.mock-empty{
  min-height:44px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
}
.mock-template{
  padding:7px 7px 0;
  overflow:hidden;
}
.mock-template i{
  display:block;
  width:15px;
  height:15px;
  border-radius:5px;
  margin-bottom:5px;
  border:1px solid currentColor;
  opacity:.95;
}
.mock-template strong{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  color:#fff;
  font-size:.52rem;
  font-weight:900;
}
.mock-template.done{color:#c9dc4a;background:rgba(138,159,45,.20);border-color:rgba(203,226,83,.42)}
.mock-template.gold{color:#d6a935;background:rgba(207,163,45,.20);border-color:rgba(232,192,79,.46)}
.mock-template.green{color:#45d9aa;background:rgba(36,150,112,.20);border-color:rgba(74,218,169,.38)}
.mock-template.blue{color:#66a1ef;background:rgba(55,101,175,.20);border-color:rgba(96,150,235,.38)}
.mock-template.purple{color:#d376df;background:rgba(126,58,139,.20);border-color:rgba(200,110,219,.38)}
.mock-empty{
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.25);
  font-size:1rem;
  border-style:dashed;
}
.mock-keys{display:grid;grid-template-columns:.86fr repeat(9,1fr);gap:7px;margin-bottom:16px}
.mock-keys span{
  display:grid;
  place-items:center;
  min-height:32px;
  border-radius:8px;
  background:linear-gradient(180deg,#20212b,#101118);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.82);
  font-size:.7rem;
  font-weight:900;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.mock-keys .on{
  color:#151006;
  background:linear-gradient(180deg,#f1d572,#c79d22);
  border-color:rgba(255,234,141,.76);
}
.mock-grid{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(150px,1fr);gap:14px}
.mock-note,.mock-team{
  border-radius:12px;
  background:rgba(5,6,10,.74);
  border:1px solid rgba(255,255,255,.085);
}
.mock-note{position:relative;overflow:hidden;border-color:rgba(207,163,45,.22)}
.mock-chip{
  position:absolute;
  top:13px;
  left:14px;
  min-width:34px;
  padding:4px 7px;
  border-radius:5px;
  color:#d9b84b;
  background:rgba(214,174,56,.16);
  border:1px solid rgba(214,174,56,.34);
  font-size:.46rem;
  font-weight:900;
}
.mock-note-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:42px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mock-doc{
  flex:0 0 auto;
  width:31px;
  height:31px;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(150,62,162,.62),rgba(67,29,75,.9));
  border:1px solid rgba(219,134,233,.42);
}
.mock-note-head div{min-width:0;margin-right:auto}
.mock-note-head strong{display:block;font-size:.98rem;line-height:1.05}
.mock-note-head p{margin:5px 0 0;color:rgba(246,239,227,.66);font-size:.56rem;line-height:1.35}
.mock-note-head button{
  flex:0 0 auto;
  min-height:28px;
  padding:0 10px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:#fff;
  font:800 .5rem/1 system-ui,sans-serif;
}
.mock-note-head button:first-of-type{width:28px;padding:0;color:transparent}
.mock-note-head em{
  flex:0 0 auto;
  width:8px;
  height:10px;
  border-radius:2px;
  background:#ff4e57;
  opacity:.9;
}
.mock-note-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:122px;
  margin:13px 14px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  overflow:hidden;
}
.mock-note-body p,.mock-note-body ul{
  margin:0;
  padding:14px;
  color:#fff;
  font-size:.54rem;
  line-height:1.75;
}
.mock-note-body p{font-style:italic;color:rgba(255,246,229,.88)}
.mock-note-body ul{
  border-left:1px solid rgba(255,255,255,.08);
  list-style:none;
}
.mock-team{padding:0;overflow:hidden}
.mock-team>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mock-team>div strong{font-size:.64rem}
.mock-team>div span{color:rgba(246,239,227,.48);font-size:.58rem}
.mock-team p{
  margin:0;
  padding:13px 14px 12px 38px;
  color:rgba(246,239,227,.78);
  font-size:.54rem;
  line-height:1.35;
  position:relative;
}
.mock-team p b{
  position:absolute;
  left:17px;
  top:16px;
  width:11px;
  height:11px;
  border-radius:4px;
  border:1px solid rgba(72,225,172,.75);
  background:rgba(72,225,172,.14);
}
.mock-team p strong{display:block;color:#fff;font-size:.56rem;margin-bottom:3px}
.mock-team p small{display:block;color:rgba(246,239,227,.55);font-size:.48rem;line-height:1.4}
.floating-card{
  position:absolute;
  border-radius:18px;
  border:1px solid rgba(239,199,86,.42);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,226,123,.26),transparent 38%),
    linear-gradient(145deg,rgba(25,22,15,.96),rgba(83,67,29,.92));
  color:#fff7df;
  box-shadow:0 24px 70px rgba(0,0,0,.46),0 0 36px rgba(205,162,45,.18);
  backdrop-filter:blur(14px);
}
.card-kicker{
  display:block;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f3cd63;
}
.score-card{
  top:-4px;
  left:50%;
  width:214px;
  min-height:132px;
  padding:16px 17px;
  transform:translateX(-50%) rotate(1.5deg);
  text-align:center;
}
.score-card strong{
  display:block;
  margin:9px 0 5px;
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-size:3.35rem;
  line-height:.85;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 8px 28px rgba(239,199,86,.35);
}
.score-card p{font-size:.84rem;line-height:1.4;color:rgba(255,247,223,.78)}
@media(max-width:1180px){
  .contact-hero{grid-template-columns:minmax(0,1fr) minmax(420px,.9fr)}
  .product-showcase h2{font-size:clamp(1.9rem,3.2vw,2.45rem)}
  .showcase-stage{width:min(100%,620px);min-height:420px}
  .app-shot-main{left:-10px;right:-10px;height:350px}
  .app-mockup{grid-template-columns:108px minmax(0,1fr);gap:10px}
  .mock-grid{grid-template-columns:1fr}
  .mock-team{display:none}
}
@media(max-width:980px){
  body{padding:0 18px 56px}
  .contact-hero{grid-template-columns:1fr;min-height:auto}
  .contact-main{padding:58px 26px 42px}
  .contact-side{min-height:560px;padding:34px}
  .product-showcase{min-height:500px;padding-top:36px}
  .showcase-stage{min-height:390px}
  .app-shot-main{height:330px}
}
@media(max-width:640px){
  body{padding:0 12px 48px}
  .contact-hero{margin-top:36px;border-radius:22px}
  .contact-main{padding:42px 18px 34px}
  .contact-form{grid-template-columns:1fr;gap:15px}
  .contact-side{padding:24px;min-height:520px}
  .product-showcase{min-height:470px;padding:8px 0}
  .showcase-head{font-size:1.65rem}
  .showcase-brand{font-size:.95rem}
  .product-showcase h2{font-size:2rem}
  .showcase-stage{min-height:350px}
  .app-shot-main{left:-10px;right:-10px;height:295px}
  .app-mockup{grid-template-columns:86px minmax(0,1fr);padding:8px;gap:8px}
  .mock-sidebar{padding:10px 7px}
  .mock-logo strong,.mock-nav:not(.active),.mock-team{display:none}
  .mock-logo{margin-bottom:12px}
  .mock-template-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mock-template:nth-child(n+4),.mock-empty{display:none}
  .mock-keys{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mock-keys span:nth-child(n+5){display:none}
  .mock-note-body{grid-template-columns:1fr}
  .mock-note-body ul{display:none}
  .mock-note-head{padding:12px}
  .mock-note-body p{padding:12px}
  .score-card{width:210px}
}