:root{
  --ink:#172a36;
  --muted:#667085;
  --line:#d7e0e7;
  --soft:#f4f7f9;
  --brand:#115571;
  --brand-2:#1c7898;
  --green:#2eb872;
  --danger:#d92d20;
  --shadow:0 22px 60px rgba(17,40,55,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fbfcfd;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px clamp(20px,4vw,64px);
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(215,224,231,.7);
  backdrop-filter:blur(18px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:850;
  font-size:1.25rem;
}
.brand img{
  width:42px;
  height:42px;
  border-radius:9px;
}
nav{
  display:flex;
  gap:22px;
  color:#475467;
  font-weight:700;
}
.header-link{
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--brand);
  font-weight:800;
}
.hero{
  min-height:calc(100vh - 80px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
  gap:44px;
  align-items:center;
  padding:64px clamp(20px,5vw,84px) 78px;
  overflow:hidden;
  background:
    linear-gradient(125deg, rgba(17,85,113,.08), transparent 38%),
    radial-gradient(circle at 78% 18%, rgba(46,184,114,.16), transparent 30%),
    #fbfcfd;
}
.eyebrow{
  margin:0 0 12px;
  color:var(--brand);
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
}
h1,h2,h3,p{margin-top:0}
h1{
  max-width:760px;
  margin-bottom:20px;
  font-size:clamp(3rem,6.4vw,6.8rem);
  line-height:.92;
  letter-spacing:-.04em;
}
h2{
  font-size:clamp(2rem,4vw,4rem);
  line-height:1;
  letter-spacing:-.035em;
  margin-bottom:16px;
}
.hero-text{
  max-width:680px;
  color:#475467;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.5;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:850;
}
.btn.primary{
  background:var(--brand);
  color:white;
  box-shadow:0 14px 30px rgba(17,85,113,.24);
}
.btn.secondary{
  background:white;
  color:var(--brand);
  border-color:var(--line);
}
.hero-visual{
  position:relative;
  min-height:650px;
}
.phone-shot{
  position:absolute;
  width:min(330px,42vw);
  border-radius:28px;
  box-shadow:var(--shadow);
  background:#fff;
}
.shot-main{
  right:8%;
  top:0;
  transform:rotate(3deg);
}
.shot-back{
  left:0;
  top:130px;
  opacity:.86;
  transform:rotate(-7deg) scale(.9);
}
.section,.showcase,.contact-section{
  padding:82px clamp(20px,5vw,84px);
}
.section-head{
  max-width:820px;
  margin-bottom:34px;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.feature-grid article{
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  box-shadow:0 10px 35px rgba(17,40,55,.06);
}
.feature-icon{
  display:inline-flex;
  margin-bottom:26px;
  color:var(--brand);
  font-weight:900;
}
.feature-grid h3{
  margin-bottom:10px;
  font-size:1.2rem;
}
.feature-grid p,.showcase-copy p,.contact-copy p{
  color:var(--muted);
  line-height:1.55;
}
.showcase{
  background:#eef3f6;
}
.showcase-copy{
  max-width:760px;
  margin-bottom:32px;
}
.screens{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.screen-card{
  margin:0;
  padding:14px;
  border:1px solid rgba(215,224,231,.82);
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
}
.screen-card img{
  display:block;
  width:100%;
  border-radius:18px;
}
.screen-card figcaption{
  padding:12px 4px 2px;
  color:#344054;
  font-weight:850;
}
.phone-card{
  grid-column:span 3;
}
.watch-card{
  grid-column:span 3;
  align-self:center;
}
.watch-card img{
  max-width:260px;
  margin:0 auto;
}
.tablet-card{
  grid-column:span 6;
}
.contact-section{
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:48px;
  align-items:start;
}
.contact-copy{
  position:sticky;
  top:120px;
}
.contact-notice{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid #b7ebc6;
  border-radius:8px;
  background:#effaf3;
  color:#1f7a3f;
  font-weight:850;
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  box-shadow:var(--shadow);
}
.contact-form label{
  display:grid;
  gap:8px;
  color:#344054;
  font-weight:800;
}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;
  padding:13px 14px;
  border:1px solid #cfd7df;
  border-radius:8px;
  font:inherit;
  color:var(--ink);
  background:#fff;
}
.contact-form select{
  min-height:52px;
  padding-right:42px;
  appearance:none;
  background:
    linear-gradient(45deg, transparent 50%, #667085 50%) calc(100% - 22px) 50% / 8px 8px no-repeat,
    linear-gradient(135deg, #667085 50%, transparent 50%) calc(100% - 16px) 50% / 8px 8px no-repeat,
    #fff;
}
.contact-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid rgba(28,120,152,.2);
  border-color:var(--brand-2);
}
.contact-form textarea{
  resize:vertical;
  min-height:130px;
}
.full{grid-column:1 / -1}
.privacy{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:flex-start;
  gap:10px!important;
  font-weight:650!important;
  color:#475467!important;
}
.privacy input{
  width:auto;
  margin-top:3px;
}
.privacy a{
  color:var(--brand);
  font-weight:850;
}
.hp{
  position:absolute;
  left:-9999px;
  width:1px!important;
  height:1px!important;
  opacity:0;
}
.alert{
  grid-column:1 / -1;
  padding:12px 14px;
  border-radius:8px;
  font-weight:800;
}
.alert.error{
  background:#fff1f0;
  border:1px solid #ffccc7;
  color:#a8071a;
}
.alert.success{
  background:#effaf3;
  border:1px solid #b7ebc6;
  color:#1f7a3f;
}
footer{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between;
  padding:28px clamp(20px,5vw,84px);
  border-top:1px solid var(--line);
  color:#667085;
  font-weight:700;
}
.legal-page{
  padding:64px clamp(20px,5vw,84px) 88px;
  background:#f5f8fa;
}
.legal-card{
  max-width:920px;
  margin:0 auto;
  padding:clamp(24px,4vw,52px);
  border:1px solid var(--line);
  border-radius:18px;
  background:white;
  box-shadow:var(--shadow);
}
.legal-card h1{
  max-width:none;
  font-size:clamp(2.6rem,5vw,4.8rem);
  line-height:.98;
  letter-spacing:-.04em;
}
.legal-card h2{
  margin-top:30px;
  font-size:1.45rem;
  letter-spacing:-.02em;
}
.legal-card p{
  color:#475467;
  line-height:1.65;
}
.legal-card a{
  color:var(--brand);
  font-weight:800;
}
.support-page{
  background:#f5f8fa;
}
.support-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.46fr);
  gap:36px;
  align-items:end;
  padding:82px clamp(20px,5vw,84px) 42px;
}
.support-hero h1{
  max-width:860px;
  margin-bottom:20px;
  font-size:clamp(3rem,6vw,6.2rem);
  line-height:.93;
}
.support-panel{
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:white;
  box-shadow:var(--shadow);
}
.support-panel h2{
  font-size:1.55rem;
  letter-spacing:-.02em;
}
.support-panel ul{
  margin:0;
  padding-left:20px;
  color:#475467;
  line-height:1.65;
}
.support-contact{
  padding-top:34px;
}
@media (max-width:980px){
  nav{display:none}
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-visual{
    min-height:540px;
  }
  .phone-shot{width:min(300px,58vw)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .screens{grid-template-columns:1fr 1fr}
  .phone-card,.watch-card,.tablet-card{grid-column:auto}
  .tablet-card{grid-column:1 / -1}
  .contact-section{grid-template-columns:1fr}
  .contact-copy{position:static}
  .support-hero{grid-template-columns:1fr}
}
@media (max-width:620px){
  .site-header{padding:14px 16px}
  .header-link{display:none}
  h1{font-size:3.2rem}
  .hero,.section,.showcase,.contact-section{padding-left:18px;padding-right:18px}
  .hero-visual{min-height:430px}
  .shot-main{right:0}
  .shot-back{left:-12px;top:88px}
  .feature-grid,.screens,.contact-form{grid-template-columns:1fr}
  .tablet-card{grid-column:auto}
  .contact-form{padding:18px}
}