/* /contact: copy of the Framer page (computed values read Oct 28, 2026). Uses legacy.css. */

/* Inter: only the form uses it (Framer's form fields). Files from Framer's Google Fonts copy. */
@font-face{font-family:'Lg Inter';src:url(../fonts/Inter-Regular-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lg Inter';src:url(../fonts/Inter-Regular-latinext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lg Inter';src:url(../fonts/Inter-Medium-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lg Inter';src:url(../fonts/Inter-SemiBold-latin.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--lg-inter:'Lg Inter',sans-serif}

/* ---------- Hero: intro + form ---------- */
.ct-hero{display:flex;flex-direction:column;align-items:center;overflow:clip}
.ct-hero-in{width:1312px;flex:none;display:flex;align-items:center;justify-content:center;gap:96px;padding:120px 64px;overflow:clip}
.ct-hero-in::after{border-left-width:.5px;border-right-width:.5px}
.ct-intro{width:520px;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.ct-intro h1{font:400 55px/66px var(--lg-serif);color:#0e1c19;white-space:nowrap}
.ct-intro-body{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ct-intro-body p{width:100%;font:400 16px/28px var(--lg-buch);color:#757f7d}

/* Form */
.ct-form{width:568px;flex:none;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:40px;background:#fff;border-radius:10px;overflow:hidden}
.ct-form::after{content:"";position:absolute;inset:0;border:.5px solid rgba(48,48,48,.2);border-radius:10px;pointer-events:none}
.ct-f{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ct-f>span{font:500 12px/14.4px var(--lg-inter);color:#888;white-space:nowrap}
.ct-box{width:100%;height:40px;position:relative;display:flex;align-items:center;padding:12px;background:rgba(187,187,187,.15);border-radius:10px;overflow:hidden}
.ct-box::after{content:"";position:absolute;inset:0;border:1px solid rgba(136,136,136,.1);border-radius:10px;pointer-events:none;transition:border-color .2s ease}
.ct-box:focus-within::after{border-color:#09f}
.ct-box input,.ct-box select,.ct-box textarea{width:100%;margin:0;border:0;border-radius:0;background:transparent;outline:none;font:400 14px/16.8px var(--lg-inter);color:#0f1c19;-webkit-appearance:none;appearance:none}
.ct-box input{height:16.8px;padding:0}
.ct-box input::placeholder,.ct-box textarea::placeholder{color:#999;opacity:1}
.ct-box--select{display:block;padding:0 12px 0 0}
.ct-box--select select{height:40px;padding:12px;cursor:pointer}
.ct-box--select select:invalid{color:#999}  /* "Select…" is showing */
.ct-box--select option{color:#0f1c19}
.ct-box--select::before{content:"";position:absolute;inset:0 0 0 auto;width:38px;background:#999;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M 3.5 6 L 8 10.5 L 12.5 6' fill='transparent' stroke-width='1.5' stroke='%23999' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 10px 50%/16px auto no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M 3.5 6 L 8 10.5 L 12.5 6' fill='transparent' stroke-width='1.5' stroke='%23999' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 10px 50%/16px auto no-repeat}
.ct-box--area{height:auto;padding:0}
.ct-box--area textarea{display:block;height:100px;min-height:40px;padding:12px;resize:vertical;overflow:hidden auto}
.ct-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}

/* Submit button and its states (Framer's variants: Default, Hover, Loading, Success, Error) */
.ct-submit{width:100%;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:#333;cursor:pointer;
  font:600 14px/16.8px var(--lg-inter);color:#fff;text-align:center;transition:background-color .2s ease,color .2s ease,opacity .2s ease}
.ct-submit:hover{background:rgba(51,51,51,.85)}
.ct-submit:focus-visible{outline:2px solid #09f;outline-offset:2px}
.ct-submit .ct-spin{display:none;width:20px;height:20px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,0),#fff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:ct-spin 1s linear infinite}
@keyframes ct-spin{to{transform:rotate(360deg)}}
.ct-form[data-state="loading"] .ct-submit{cursor:default}
.ct-form[data-state="loading"] .ct-submit .ct-spin{display:block}
.ct-form[data-state="loading"] .ct-submit .ct-lbl{display:none}
.ct-form[data-state="success"] .ct-submit{cursor:default}
.ct-form[data-state="error"] .ct-submit{background:rgba(255,34,68,.15);color:#f24}
@media (prefers-reduced-motion:reduce){.ct-submit .ct-spin{animation-duration:3s}}

/* ---------- "Start building" + developer APIs ---------- */
.ct-grid{display:flex;align-items:center;justify-content:center;overflow:clip}
.ct-grid::after{border-top-width:.5px}
.ct-grid-in{width:1312px;flex:none;display:flex;align-items:center;justify-content:center;gap:64px;padding:96px 64px;overflow:clip}
.ct-grid-in::after{border-left-width:.5px;border-right-width:.5px}
.ct-start{width:560px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.ct-start-txt{width:100%;display:flex;flex-direction:column;gap:18px}
.ct-start-txt h2{font:400 48px/66px var(--lg-serif);color:var(--lg-ink)}
.ct-start-txt p{font:400 16px/28px var(--lg-buch);color:rgba(15,28,25,.6)}
.ct-apply{height:32px;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-radius:10px;background:#fff;position:relative;overflow:hidden;
  font:400 13px/15.6px var(--lg-buch);color:#666e6b;text-align:center;white-space:nowrap;box-shadow:0 1px 2px -.5px rgba(22,25,29,.04),inset 0 -.5px 0 0 rgba(22,25,29,.12)}
.ct-apply::after{content:"";position:absolute;inset:0;border:.5px solid rgba(48,48,48,.2);border-radius:10px;pointer-events:none}
.ct-dev{width:560px;flex:none;display:flex;flex-direction:column;align-items:center;gap:30px;overflow:clip}
.ct-dev-top{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:30px;padding-bottom:30px}
.ct-dev-top>svg{width:20px;height:20px;flex:none}
.ct-dev-body{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ct-dev-body p{font:380 16px/24px var(--lg-saans);color:rgba(15,28,25,.6)}
.ct-doc{height:32px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#040706;white-space:nowrap;
  font:570 13px/15.6px var(--lg-saans);color:#fff;box-shadow:inset 0 -.5px 0 0 rgba(22,25,29,.12),0 1px 2px -.5px rgba(22,25,29,.04);transition:background-color .2s ease}
.ct-doc:hover{background:#0d1714}
.ct-dev-sp{width:100%;height:32px}

/* =====================================================================
   Tablet: 810 - 1311px
   ===================================================================== */
@media (max-width:1311.98px){
  .ct-hero-in{width:100%;flex-direction:column;gap:48px;padding:100px 64px}
  .ct-form{width:520px}
  .ct-grid-in{width:100%;flex-direction:column;gap:60px;padding:60px}
  .ct-start,.ct-dev{width:100%}
}

/* =====================================================================
   Phone: up to 809px
   ===================================================================== */
@media (max-width:809.98px){
  .ct-hero-in{gap:32px;padding:30px}
  .ct-intro{width:100%;gap:18px}
  .ct-intro h1{font-size:36px;line-height:36px}
  .ct-form{width:100%}
  .ct-grid-in{gap:30px;padding:30px}
  .ct-start-txt{gap:24px}
  .ct-start-txt h2{font-size:36px;line-height:36px}
  .ct-dev-body p{line-height:30px}
}