/******************** COLOR TOKENS ********************/
:root{
  --pink:#fe36a1;--purple:#583dff;--green:#5ee100;--coral:#ff715f;
  --surface:#ffffff;--surface-alt:#f7f7f7;--text:#0f0f0f;--border:#e5e5e5;
  --field-h: clamp(36px, 2.0rem, 52px);
  --dial-btn-w: clamp(72px, calc(4.5ch + 28px), 90px);
 }
[data-theme="dark"]{
  --surface:#0f0f0f;--surface-alt:#181818;--text:#ffffff;--border:#303030;
}
 
 /******************** RESET ********************/
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);scroll-behavior:smooth;transition:background .3s,color .3s;}
h1,h2,h3{font-family:'Days One',sans-serif;margin:0 0 .5em;line-height:1.25;}
 
/******************** LAYOUT ********************/
section{padding:6rem 1rem;border-bottom:1px solid var(--border);scroll-margin-top:80px;}
section:nth-of-type(even){background:var(--surface-alt);} 
.container{width:90%;max-width:1200px;margin:0 auto;}
 
/******************** NAV ********************/
nav{position:fixed;top:0;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;z-index:1000;transition:background .3s,border-color .3s;}
nav ul{list-style:none;display:flex;gap:2.25rem;margin:0;padding:0;margin-left:auto;}
nav a{text-decoration:none;color:var(--text);font-weight:500;position:relative;}
nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:3px;background:var(--pink);transition:width .3s;}
nav a:hover::after,nav a.active::after{width:100%;}
nav a.nav-btn{background:var(--pink);color:#fff;padding:.45rem 1.1rem;border-radius:999px;margin-right:.75rem;}
nav a.nav-btn {
 max-width: 140px;
 min-width: 100px;
 flex-shrink: 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
nav a.nav-btn::after{display:none;}
 
/* --- NAV alignment tweaks --- */
.logo{
   display:flex;
   align-items:center; 
   gap:.5rem;
   white-space:nowrap;
 }
 .logo img{
   height:48px;        
   width:auto;
   object-fit:contain;
 }
 
 .burger{
   width:36px;
   height:36px;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   gap:4px;
   margin:0;  
   display:none;
   cursor:pointer;            
 }
 .burger span{
   width:24px;
   height:3px;
   background:var(--text);
   border-radius:2px;
 }
 /***** THEME TOGGLE BUTTON *****/
 #themeToggle{
  background:none;border:2px solid var(--pink);color:var(--text);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;padding:0;cursor:pointer;
  user-select:none; 
  transition:background .3s,color .3s,border-color .3s;
 }
 #themeToggle:hover{background:var(--pink);color:#fff;border-color:var(--pink);}
 a {
   color: var(--pink);  
 }
 
 /******************** HERO ********************/
 .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);padding-top:6rem;}
 .hero h1{font-size:clamp(2rem,5vw,4rem);} .hero p{max-width:640px;margin:1rem auto 2rem;}
 .btn{display:inline-block;padding:.45rem 1.1rem;border-radius:999px;background:var(--pink);color:#fff;font-weight:600;text-decoration:none;transition:transform .2s;} .btn:hover{transform:scale(1.05);} 
 
 /******************** SERVICES ********************/
 .services-grid{
     
     display:flex;
     flex-wrap:wrap;          
     gap:2rem;                
     justify-content:center;  
     margin-top:2.5rem;
     direction: ltr;
   }
   
   .service-card{
     
     flex:0 1 320px;
     background:var(--surface);
     border-radius:1.25rem;
     padding:2rem;
     text-align:center;
     box-shadow:0 2px 8px rgba(0,0,0,.05);
     transition:transform .2s;
   }
   
   [data-theme="dark"] .service-card{
     background:var(--surface-alt);
   }
 .service-card:hover{transform:translateY(-4px);} 
 .icon-square{width:88px;height:88px;border-radius:24px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff;}
 .icon-square svg{width:44px;height:44px;}
 .bg-purple{background:var(--purple);} .bg-green{background:var(--green);} .bg-coral{background:var(--coral);} 
 [data-theme="dark"] .icon-square img{
     filter:brightness(0) invert(1);
   }
 
 /******************** STATS ********************/
 .stats{display:flex;flex-wrap:wrap;justify-content:space-around;gap:2rem;}
 .stat{text-align:center;max-width:220px;}
 .stat-icon{color:var(--pink);margin-bottom:.5rem;}
 .stat-icon svg{width:32px;height:32px;}
 .stat .number{font-size:2.25rem;font-family:'Days One',sans-serif;}
 
 /******************** CONTACT ********************/
 .contact-form{display:grid;gap:1.75rem;max-width:600px;margin:0 auto;}
 .contact-form input,.contact-form textarea{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1px solid var(--border);background:var(--surface);color:var(--text);} 
 .contact-form button{background:var(--pink);color:#fff;border:none;padding:.9rem 1.5rem;border-radius:.75rem;font-family:'Days One',sans-serif;cursor:pointer;}
 
 /******************** FOOTER ********************/
 footer{background:var(--surface-alt);padding:3rem 2rem;color:var(--text);font-size:.95rem;}
 .footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;max-width:1200px;margin:0 auto;}
 .footer-links {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 .footer-links p {
   margin: 0;
   font-size: 0.95rem;
   color: var(--text);
 }
 .footer-links a{text-decoration:none;color:var(--pink);margin-right:1.25rem;position:relative;}
 .footer-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--pink);transition:width .25s;}
 .footer-links a:hover::after{width:100%;}
 .footer-contact p{margin:.25rem 0;}
 .footer-contact a{color:var(--pink);text-decoration:none;} .footer-contact a:hover{color:var(--purple);} 
 
 /******************** MOBILE NAV & FLOATING CTA ********************/
 .contact-fab{display:none;}
 @media (max-width:768px){
   
   .burger{display:flex;position:fixed;top:12px;right:16px;z-index:1200;}
   #themeToggle{position:fixed;top:12px;right:56px;z-index:1200;}
 
   
   nav ul{position:fixed;top:64px;right:-100%;width:220px;flex-direction:column;gap:1rem;padding:1rem;background:var(--surface);border-left:1px solid var(--border);box-shadow:-2px 0 8px rgba(0,0,0,.08);transition:right .3s,opacity .3s;opacity:0;pointer-events:none;}
   nav ul.open{right:0;opacity:1;pointer-events:auto;}
 
   
   .contact-fab{display:inline-block;position:fixed;bottom:20px;right:16px;min-width:120px;text-align:center;background:var(--pink);color:#fff;padding:.6rem 1.4rem;border-radius:999px;font-family:'Days One',sans-serif;text-decoration:none;z-index:1100;}
 
   
   .hero{padding-top:7rem;}
   .stats {
     flex-direction: column;
     align-items: center;
   }
   
     .nav-controls {
       position: fixed;
       top: 12px;
       right: 100px; 
       z-index: 1200;
       background: var(--surface);
       padding: 0;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(0,0,0,0.1);
       font-family: 'Days One', sans-serif;
       direction: ltr;
      }
     nav a.nav-btn {
       display: none;
     }
     .contact-fab {
       display: inline-block;
     }
   
     .burger {
       right: 16px;
     }
  
   
 
   .stat {
     max-width: 100%;
   }
   section h2 {
     text-align: center;
     margin-bottom: 3rem; 
   }
 }
 
 /******************** INTERACTION – no text cursor on tap ********************/
 body{-webkit-tap-highlight-color:transparent;}
 a,button,input,textarea{user-select:text;}
 .iti__country,
 .iti__selected-country {
   background-color: white !important;
   color: black !important;
   border: 1px solid #ccc !important;
   box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
   border-radius: 8px !important;
 }
 

 
 
 .iti__arrow {
   border-top: 6px solid black !important;
   margin-left: 6px;
 }
 
 .iti__flag-container,
 .iti__country-list {
   background-color: white !important;
 }
 
 
 .stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }
 
 .stat-top {
   display: flex;
   align-items: flex-end;
   gap: 12px;
 }
 
 .stat-icon {
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .stat-icon svg {
   width: 100%;
   height: 100%;
   display: inline-block;
   vertical-align: middle; 
 }
 
 /* ============ 2. CSS ============ */
 /* Стек для поля и сообщения об ошибке */
.phone-field{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;          
}

 .phone-field .iti{width:100%;}
 .phone-field .iti__selected-dial-code{
  font-size: .80rem;
  line-height: 1; 
}


.phone-field .iti,
.phone-field .iti__tel-input{
  height: var(--field-h) !important;
  min-height: var(--field-h) !important;
  box-sizing: border-box;
}
.phone-field .iti__tel-input{
  display:block;
  height:var(--field-h);
  line-height:calc(var(--field-h) - 2px); 
  box-sizing:border-box;
}
.phone-field .phone-error-msg,
.phone-field #phoneError{
  display:block; 
  width:100%;
}
 

.iti--separate-dial-code .iti__flag-container{
  width: var(--dial-btn-w) !important;
  height: var(--field-h);
}


.iti--separate-dial-code .iti__selected-country{  
  height: var(--field-h);
  padding-inline: 6px;
  gap: 4px;}
.iti--separate-dial-code .iti__selected-dial-code{ 
  font-size: 0.80rem;
  line-height: 1; 
}

.iti--separate-dial-code .iti__tel-input{
  height: var(--field-h);
  line-height: calc(var(--field-h) - 2px);  
  box-sizing: border-box;
  font-size: 16px;                          
  padding-inline-start: calc(var(--dial-btn-w) + 8px) !important;
}
.iti .iti__tel-input.invalid,
.iti .iti__tel-input[aria-invalid="true"],
.iti .iti__tel-input:invalid{
  border-color:#ff3b3b !important;
  outline:0;
}

 input.invalid        { border:1px solid #ff3b3b; }

.phone-field .iti__tel-input.invalid,
.phone-field .iti__tel-input[aria-invalid="true"],
.phone-field .iti__tel-input:invalid{
  border-color:#ff3b3b !important;
  outline:0;
}
.phone-field .iti{
  --iti-spacer-horizontal: 0px !important; /
}

 .phone-error-msg     { color:#ff3b3b; font-size:14px; margin-top:4px;  }
 #phone-error, #phoneError{
  font-size:.875rem;
  line-height:1.3;
  color:#ff3b3b;
  clear:both;
}


html[dir="rtl"] #phone-error,
html[dir="rtl"] #phoneError{ text-align:right; }
 
 
 
 .nav-controls {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   font-family: inherit;
   direction: ltr;
 }
 nav {
   direction: ltr;
 }
 
 .nav-controls select,.nav-controls button { height:2rem; padding:0 .6rem; border-radius:.5rem }
 
 #langSelect {
   padding: 0.35rem 0.75rem;
   border-radius: 999px;
   border: 2px solid var(--pink);
   font-family: 'Days One', sans-serif;
   font-size: 0.9rem;
   cursor: pointer;
   appearance: none;
   background-color: var(--surface); 
   color: var(--pink);
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fe36a1' d='M70 90L20 40h100z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 10px;
   padding-right: 2rem;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
 }
 
 #langSelect:hover,
 #langSelect:focus {
   background-color: var(--surface);
   color: var(--pink);
   border-color: var(--pink);
 }
 
 footer {
   direction: ltr;
 }
 
 :lang(ar) {
   font-family: 'Tajawal', sans-serif;
   
 }
 .block-line {
   text-align: inherit; 
 }
 
 .consent {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: start;
   column-gap: 0.5rem;
   font-size: 0.9rem;
   line-height: 1.4;
 }
 
 .consent input[type="checkbox"] {
   margin-top: 0.2em; 
 }
 
 .consent label {
   display: block;
 }
 
 .consent a {
   color: var(--pink);
   text-decoration: underline;
 }
 
 .back-home { display:inline-block; margin:1rem 0; text-decoration:none }
 .back-home:hover { text-decoration:underline }
 
 
 .site-toolbar{
   direction: ltr; 
   position: fixed; top:0; left:0; right:0; z-index:1100;
   height: 56px; padding: 0 16px;
   display:flex; align-items:center; justify-content:space-between; gap:12px;
   background: var(--surface); border-bottom:1px solid var(--border);
   box-shadow: 0 2px 8px rgba(0,0,0,.04);
   font-size: 16px;        
   line-height: 1;  
 }
 [dir="rtl"] .site-toolbar{ direction:ltr; } /* страховка */
 .site-toolbar .nav-controls{ display:flex; gap:.5rem; align-items:center; }

 body.has-toolbar{ padding-top:56px; }
 .nav-controls select{ border-color: var(--pink); }
 body.legal :is(h1,h2,h3,h4,h5,h6){ color: var(--text) !important; }
 
 .site-toolbar #themeToggle{
   width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 999px; border: 2px solid var(--pink);
   background: transparent;
   line-height: 1;
 }
 .site-toolbar #langSelect{
   height: 36px; min-height: 36px;
   padding: 0 12px;
   border-radius: 999px; border: 2px solid var(--pink);
   background: transparent;
   font-size: inherit; line-height: 1;
 
 }


html[dir="rtl"] .iti {
  position: relative;
  direction: ltr !important;
  --dial-btn-w: 96px; /* при необходимости увеличь*/
}


html[dir="rtl"] .iti .iti__selected-country {
  position: absolute;
  left: 0 !important;
  right: auto !important;
  width: var(--dial-btn-w);
  
}


html[dir="rtl"] .iti .iti__flag-container {
  left: 0 !important;
  right: auto !important;
  width: var(--dial-btn-w);
}
html[dir="rtl"] .iti .iti__country-list,
html[dir="rtl"] .iti .iti__country-container {
  left: 0 !important;
  right: auto !important;
}


html[dir="rtl"] .iti .iti__tel-input {
  direction: ltr !important;
  padding-left: calc(var(--dial-btn-w) + 10px) !important;
  padding-right: 12px !important;
  text-align: left !important; 
}


html[dir="rtl"] #phone:placeholder-shown {
  text-align: right !important;
}

html[dir="rtl"] #services .services-grid,
html[dir="rtl"] #stats .stats { direction: ltr !important; }


.site-toolbar .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;              
  height: 36px;
  min-height: 36px;
  padding: 0 16px;          
  border-radius: 999px;
  line-height: 1;
  font-size: inherit;
}
body.legal { padding: 72px 1rem 4rem; }
body.legal > :not(.site-toolbar) { max-width: 900px; margin: 0 auto; }
html[dir="rtl"] .phone-field .iti__selected-dial-code{
  font-family: 'Days One',sans-serif;
}