/* DATRA GROUP — layout, components and responsive styles */
:root{
  --navy:#0b1833;
  --ink:#102647;
  --muted:#57677c;
  --teal:#007f7a;
  --mint:#24dec2;
  --line:#dce4eb;
  --light:#f4f7fa;
  --white:#fff
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:white;
  font-size:16px;
  line-height:1.65
}
a{
  color:inherit;
  text-decoration:none
}
button,input,select,textarea{
  font:inherit
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:5px
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--teal);
  outline-offset:2px
}
.wrap{
  max-width:1240px;
  margin:auto;
  padding:0 40px
}
.skip{
  position:fixed;
  top:-100px;
  left:16px;
  background:white;
  padding:12px;
  z-index:50
}
.skip:focus{
  top:10px
}
.header{
  height:88px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  gap:32px
}
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-shrink:0;
  height:56px;
  width:auto;
}
.brand img{
  height:56px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  display:block;
}
.navlinks{
  display:flex;
  align-items:center;
  gap:29px;
  font-size:14px;
  font-weight:600
}
.navlinks a:not(.btn):hover,.navlinks a.active{
  color:var(--teal)
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:12px 23px;
  border:1px solid transparent;
  border-radius:5px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  transition:background .2s,transform .2s
}
.btn:hover{
  transform:translateY(-2px)
}
.btn-dark{
  background:var(--ink);
  color:#fff
}
.btn-dark:hover{
  background:#20416c
}
.btn-mint{
  background:var(--mint);
  color:#082c33
}
.btn-mint:hover{
  background:#6becd9
}
.btn-outline{
  border-color:#69758b;
  color:white;
  background:transparent
}
.btn-outline:hover{
  background:#ffffff12
}
.menu{
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:4px;
  color:var(--ink)
}
.hero{
  background:var(--navy);
  color:white;
  position:relative;
  overflow:hidden
}
.hero:after{
  content:'';
  position:absolute;
  width:700px;
  height:700px;
  border-radius:50%;
  background:radial-gradient(circle,#008f8722,transparent 65%);
  right:-160px;
  top:-70px;
  pointer-events:none
}
.hero-grid{
  min-height:652px;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:35px;
  align-items:center;
  position:relative;
  z-index:1;
  padding-top:63px;
  padding-bottom:60px
}
.eyebrow{
  font-size:12px;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:2.5px;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px
}
.eyebrow:before{
  content:'';
  height:2px;
  width:25px;
  background:var(--teal)
}
.hero .eyebrow{
  color:#aabbd2
}
.hero .eyebrow:before{
  background:var(--mint)
}
h1,h2,h3,p{
  margin-top:0
}
h1{
  font-size:clamp(44px,4.4vw,64px);
  line-height:1.08;
  letter-spacing:-2.8px;
  font-weight:600;
  margin-bottom:26px
}
h1 em{
  font-style:normal;
  color:var(--mint)
}
.intro{
  font-size:17px;
  color:#b8c7da;
  max-width:495px;
  line-height:1.8;
  margin-bottom:30px
}
.actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap
}
.hero-note{
  font-size:12px;
  color:#aabbd2;
  margin:24px 0 0
}
.hero-note span{
  color:var(--mint);
  margin:0 10px
}
.network{
  height:455px;
  position:relative
}
.network canvas{
  width:100%;
  height:100%;
  display:block
}
.network-label{
  position:absolute;
  padding:11px 17px;
  border:1px solid #364963;
  border-radius:5px;
  background:#142440e8;
  box-shadow:0 15px 30px #0002;
  font-size:13px;
  color:#d7e0ec;
  display:flex;
  gap:12px;
  align-items:center
}
.network-label b{
  font-size:12px;
  color:var(--mint);
  font-weight:400
}
.network-label.one{
  left:8%;
  top:15%
}
.network-label.two{
  right:0;
  top:62%
}
.network-label.three{
  left:12%;
  bottom:12%
}
.core{
  position:absolute;
  top:45%;
  left:43%;
  text-align:center;
  color:white;
  font-size:25px;
  letter-spacing:1px;
  font-weight:700;
  text-shadow:0 2px 15px var(--navy)
}
.core small{
  display:block;
  font-weight:400;
  font-size:10px;
  letter-spacing:4px;
  color:#a5bacf
}
.visual-caption{
  position:absolute;
  bottom:0;
  right:0;
  color:#829ab6;
  letter-spacing:2px;
  font-size:10px
}
.hero-bottom{
  border-top:1px solid #ffffff20;
  position:relative;
  z-index:1
}
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-top:23px;
  padding-bottom:23px;
  gap:35px
}
.principles div{
  display:flex;
  gap:16px;
  align-items:center
}
.principles span{
  color:var(--mint);
  font-size:12px
}
.principles strong{
  font-size:14px;
  font-weight:500
}
.principles small{
  display:block;
  color:#91a4bd;
  font-size:12px;
  margin-top:1px
}
.section{
  padding:94px 0
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:65px;
  margin-bottom:44px
}
.section-head h2{
  max-width:660px;
  margin-bottom:0
}
h2{
  font-size:clamp(32px,3.1vw,43px);
  line-height:1.18;
  letter-spacing:-1.5px;
  font-weight:600
}
h3{
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.5px
}
.section-head>p{
  color:var(--muted);
  max-width:330px;
  font-size:15px;
  margin:0
}
.eyebrow.light{
  color:var(--teal)
}
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.service{
  padding:32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:background .2s
}
.service:hover{
  background:#f3f9f9
}
.service-top{
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:center;
  margin-bottom:27px
}
.service-top svg{
  height:30px;
  width:30px;
  fill:none;
  stroke:var(--teal);
  stroke-width:1.4
}
.number{
  font-size:12px;
  color:#8290a1
}
.service h3{
  max-width:270px
}
.service p{
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  margin-bottom:25px
}
.service a{
  margin-top:auto;
  color:var(--teal);
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid #aacdc9;
  padding-bottom:3px
}
.squad{
  background:var(--light)
}
.squad-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.squad-copy>p{
  color:var(--muted)
}
.checklist{
  list-style:none;
  margin:27px 0;
  padding:0
}
.checklist li{
  margin:12px 0;
  font-size:14px;
  display:flex;
  gap:12px
}
.checklist li:before{
  content:'✓';
  color:var(--teal);
  font-weight:700
}
.squad-board{
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:30px;
  box-shadow:0 15px 40px #17365409
}
.board-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:1.6px;
  font-weight:700
}
.board-top span{
  background:#e7f6f3;
  color:#006c61;
  border-radius:4px;
  padding:4px 8px;
  letter-spacing:0;
  font-size:11px
}
.role{
  display:flex;
  align-items:flex-start;
  gap:17px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.role-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:#edf3fa;
  color:#1a507a;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
  flex-shrink:0
}
.role:last-of-type .role-icon{
  color:#007c73;
  background:#e9f7f4
}
.role h3{
  font-size:17px;
  margin-bottom:5px
}
.role p{
  font-size:13px;
  color:var(--muted);
  margin-bottom:0
}
.board-bottom{
  text-align:center;
  font-size:13px;
  padding-top:21px;
  color:var(--muted)
}
.board-bottom strong{
  color:var(--ink)
}
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:53px
}
.step{
  border-top:1px solid #b4c4d2;
  padding-top:23px;
  position:relative
}
.step:before{
  content:'';
  position:absolute;
  left:0;
  top:-4px;
  background:var(--teal);
  width:7px;
  height:7px;
  border-radius:50%
}
.step-number{
  color:var(--teal);
  font-size:13px;
  margin-bottom:24px
}
.step h3{
  font-size:20px
}
.step p{
  font-size:14px;
  color:var(--muted)
}
.about{
  background:var(--navy);
  color:white
}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}
.about .eyebrow{
  color:var(--mint)
}
.about .eyebrow:before{
  background:var(--mint)
}
.about h2{
  font-size:42px
}
.about p{
  color:#b8c7da
}
.values{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.value{
  border-top:1px solid #40516a;
  padding-top:20px
}
.value h3{
  font-size:18px
}
.value p{
  font-size:14px;
  margin:0
}
.sectors{
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid #40516a;
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap
}
.sectors small{
  font-size:12px;
  color:#91a4bd;
  max-width:110px
}
.sectors span{
  font-size:14px;
  color:#d7e0ec
}
.contact{
  background:#f4f7fa
}
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px
}
.contact-copy>p{
  color:var(--muted);
  max-width:380px
}
.contact-email{
  display:inline-block;
  font-size:18px;
  border-bottom:1px solid #b7c7d1;
  margin:15px 0 10px
}
.contact-copy small{
  display:block;
  color:var(--muted);
  font-size:13px
}
.form{
  padding:32px;
  background:white;
  border:1px solid var(--line);
  border-radius:8px
}
.form h3{
  font-size:22px;
  margin-bottom:6px
}
.form-intro{
  font-size:13px;
  color:var(--muted);
  margin-bottom:24px
}
.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.field.full{
  grid-column:1/-1
}
label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px
}
input,select,textarea{
  width:100%;
  background:#fff;
  border:1px solid #cbd5df;
  padding:11px 12px;
  border-radius:4px;
  font-size:14px;
  color:var(--ink);
  min-width:0
}
textarea{
  min-height:115px;
  resize:vertical
}
input::placeholder,textarea::placeholder{
  color:#768497
}
.form .btn{
  margin-top:20px;
  width:100%
}
.form-note{
  font-size:12px;
  color:var(--muted);
  margin:13px 0 0;
  line-height:1.6
}
.form-status{
  font-size:13px;
  color:#076f65;
  margin-top:14px
}
.form-status:empty{
  display:none
}
.faq{
  margin-top:65px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px
}
.faq h3{
  font-size:25px
}
details{
  border-top:1px solid #cad4df;
  padding:18px 0
}
details:last-child{
  border-bottom:1px solid #cad4df
}
summary{
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  list-style:none;
  padding-right:30px;
  position:relative
}
summary::-webkit-details-marker{
  display:none
}
summary:after{
  content:'+';
  position:absolute;
  right:3px;
  font-size:22px;
  top:-6px;
  color:var(--teal)
}
details[open] summary:after{
  content:'−'
}
details p{
  font-size:14px;
  color:var(--muted);
  margin:14px 0 0
}
footer{
  padding:30px 0
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}
.footer-inner p{
  font-size:12px;
  color:var(--muted);
  margin:0
}
.footer-inner a{
  font-size:13px
}
.footer-brand{
  display:flex;
  align-items:center;
  font-size:19px;
  font-weight:800;
  letter-spacing:1px
}
.footer-brand span{
  font-weight:400
}
.toplink{
  color:var(--teal)
}
@media(min-width:1500px){
  .hero-grid{
    min-height:710px
  }
}
@media(max-width:1000px){
  .wrap{
    padding-left:28px;
    padding-right:28px
  }
  .navlinks{
    gap:18px
  }
  .navlinks .btn{
    padding:11px 14px
  }
  .hero-grid{
    gap:10px
  }
  .network-label{
    padding:9px 12px;
    font-size:11px
  }
  .core{
    left:39%
  }
  .squad-grid,.about-grid,.contact-grid,.faq{
    gap:40px
  }
  .service{
    padding:25px
  }
  .section-head{
    gap:30px
  }
}
@media(max-width:760px){
  .header{
    height:76px
  }
  .wrap{
    padding-left:22px;
    padding-right:22px
  }
  .brand{
    height:46px;
    width:auto;
  }
  .brand img{
    height:46px;
    width:auto;
    max-width:170px;
  }
  .menu{
    display:block
  }
  .navlinks{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    flex-direction:column;
    align-items:stretch;
    background:white;
    padding:22px;
    box-shadow:0 20px 25px #10264715;
    gap:0
  }
  .navlinks.open{
    display:flex
  }
  .navlinks a{
    padding:12px
  }
  .navlinks .btn{
    margin-top:10px
  }
  .hero-grid{
    grid-template-columns:1fr;
    padding-top:45px;
    padding-bottom:30px
  }
  .hero h1{
    font-size:49px;
    max-width:550px;
    letter-spacing:-2px
  }
  .intro{
    font-size:16px
  }
  .network{
    height:335px;
    max-width:500px;
    width:100%;
    margin:5px auto 0
  }
  .network-label{
    font-size:12px
  }
  .network-label.one{
    top:10%;
    left:4%
  }
  .network-label.two{
    right:0
  }
  .core{
    top:44%;
    left:43%;
    font-size:22px
  }
  .visual-caption{
    font-size:9px
  }
  .hero-note{
    font-size:11px
  }
  .principles{
    gap:20px;
    grid-template-columns:1fr
  }
  .principles small{
    display:inline;
    margin-left:6px
  }
  .section{
    padding:65px 0
  }
  .section-head{
    display:block;
    margin-bottom:30px
  }
  .section-head>p{
    margin-top:20px;
    max-width:520px
  }
  .services{
    grid-template-columns:1fr 1fr
  }
  .service{
    padding:23px
  }
  .squad-grid,.about-grid,.contact-grid,.faq{
    grid-template-columns:1fr;
    gap:30px
  }
  .squad-board{
    padding:25px
  }
  .process{
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .step-number{
    margin-bottom:15px
  }
  .about h2{
    font-size:36px
  }
  .sectors{
    gap:20px
  }
  .sectors small{
    max-width:none;
    width:100%
  }
  .contact-copy h2{
    max-width:510px
  }
  .faq{
    margin-top:45px;
    gap:5px
  }
  .footer-inner{
    flex-wrap:wrap
  }
  .footer-inner p{
    order:3;
    width:100%
  }
  .form{
    padding:25px
  }
}
@media(max-width:440px){
  h1,.hero h1{
    font-size:42px
  }
  .services{
    grid-template-columns:1fr
  }
  .service h3{
    max-width:none
  }
  .service-top{
    margin-bottom:20px
  }
  .fields{
    grid-template-columns:1fr
  }
  .field.full{
    grid-column:auto
  }
  .values{
    gap:22px
  }
  .principles small{
    display:block;
    margin-left:0
  }
  .hero .actions .btn{
    padding:12px 18px
  }
  .eyebrow{
    font-size:10px;
    letter-spacing:2px
  }
  .network{
    height:310px
  }
  .network-label{
    font-size:11px
  }
  .core{
    left:40%
  }
  .form{
    padding:22px
  }
  .contact-email{
    font-size:17px
  }
  .process{
    gap:22px
  }
  .step h3{
    font-size:18px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}

/* Language selector: remains visible on mobile, outside the collapsed menu. */
.nav { gap: 20px; }
.navlinks { margin-left: auto; gap: 20px; }
.language-control { order: 3; flex-shrink: 0; }
.language-control select {
  width: 110px;
  min-height: 42px;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 761px) and (max-width: 1120px) {
  .nav { gap: 12px; }
  .navlinks { gap: 12px; font-size: 12px; }
  .navlinks .btn { padding: 10px; font-size: 12px; }
  .brand { width: auto; height: 50px; }
  .brand img { height: 50px; width: auto; max-width: 180px; }
}
@media (max-width: 1100px) {
  .header { height: 76px; }
  .menu { display: block; order: 4; }
  .navlinks {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    flex-direction: column;
    align-items: stretch;
    background: white;
    padding: 22px;
    box-shadow: 0 20px 25px #10264715;
    gap: 0;
  }
  .navlinks.open { display: flex; }
  .navlinks a { padding: 12px; }
  .navlinks .btn { margin-top: 10px; }
  .language-control { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .brand { width: auto; height: 40px; }
  .brand img { height: 40px; width: auto; max-width: 140px; }
  .language-control select { width: 96px; font-size: 12px; }
  .menu { font-size: 12px; padding: 7px; min-height: 42px; }
  .network-label { font-size: 10px; }
}



/* Opening overlay */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.opening.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.opening-logo-container {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.opening-logo-effect {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--mint) 50%, transparent 100%);
  animation: opening-spin 2s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.opening-logo {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
@keyframes opening-spin {
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .opening-logo-effect {
    animation: none;
    background: var(--mint);
    inset: -2px;
  }
}