/* =========================
   GLOBAL RESET
========================= */
html{
   overflow-x:hidden;
   overflow-y:auto;
   }

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
   }
   
   :root{
   --primary:#4f46e5;
   --primary-light:#6366f1;
   --light-blue:#cfe9ff;
   --light-blue-2:#eaf5ff;
   --teal-accent:#25787b;
   --teal-accent-soft:#5fa8ab;
   --dark:#0f172a;
   --dark-bg:#020b1f;
   --dark-soft:#1f2937;
   --light:#f8fafc;
   --gray:#64748b;
   --icon-accent:var(--teal-accent);
   --icon-accent-2:var(--teal-accent-soft);
   --transition:0.4s cubic-bezier(.4,0,.2,1);
   }
   
   body{
   font-family:'Space Grotesk',sans-serif;
   background:var(--light-blue-2);
   color:#0f172a;
   line-height:1.6;
   overflow-x:hidden;
   overflow-y:auto;
   scroll-behavior:smooth;
   }

   body::before{
   content:"";
   position:fixed;
   inset:0;
   background:rgba(2,11,31,0.55);
   opacity:0;
   visibility:hidden;
   transition:var(--transition);
   z-index:1200;
   pointer-events:none;
   }

   body.menu-open::before{
   background:rgba(2,11,31,0.4);
   opacity:1;
   visibility:visible;
   }
   
   h1,h2,h3{
   font-weight:600;
   }
   
   h2{
   font-size:36px;
   margin-bottom:10px;
   }
   
   .section-subtitle{
   margin-bottom:60px;
   font-size:18px;
   color:inherit;
   opacity:0.8;
   }

   .light-section .section-subtitle{
   color:var(--primary);
   opacity:1;
   }

   #zasto-mi{
   background:linear-gradient(180deg,#0f1f38,#122946);
   }

   #zasto-mi h2,
   #zasto-mi .section-subtitle{
   color:#ffffff;
   opacity:1;
   }

   #rjesenja{
   background:linear-gradient(180deg,#0f1f38,#122946);
   }

   #rjesenja h2,
   #rjesenja .section-subtitle{
   color:#ffffff;
   opacity:1;
   }

   #projekti{
   background:linear-gradient(180deg,#2b8f93,#25787b);
   color:#ffffff;
   }

   #projekti h2,
   #projekti .section-subtitle{
   color:#ffffff;
   opacity:1;
   }

   #konsultacije .section-subtitle{
   color:#000000;
   font-weight:500;
   font-size:19px;
   letter-spacing:0.2px;
   }

   .booking-card{
   max-width:760px;
   margin:0 auto;
   padding:32px 28px;
   border-radius:16px;
   background:linear-gradient(180deg,#10233f,#17345b);
   border:1px solid rgba(219,238,255,0.22);
   box-shadow:0 10px 24px rgba(2,11,31,0.28);
   color:#f8fbff;
   }

   .booking-lead{
   margin-bottom:24px;
   color:#e2e8f0;
   font-size:17px;
   }

   .booking-days{
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:10px;
   margin-bottom:24px;
   }

   .booking-day{
   min-width:78px;
   padding:10px 12px;
   border-radius:12px;
   border:1px solid rgba(95,168,171,0.45);
   background:rgba(255,255,255,0.06);
   color:#f8fbff;
   font-family:inherit;
   cursor:pointer;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:2px;
   transition:var(--transition);
   }

   .booking-day span{
   font-size:13px;
   opacity:0.8;
   }

   .booking-day strong{
   font-size:16px;
   }

   .booking-day:hover{
   border-color:var(--icon-accent-2);
   }

   .booking-day.is-active{
   background:var(--teal-accent);
   border-color:var(--icon-accent-2);
   }

   .booking-slots{
   display:grid;
   grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
   gap:10px;
   margin-bottom:22px;
   }

   .booking-slot{
   padding:12px 10px;
   border-radius:999px;
   border:1px solid rgba(95,168,171,0.45);
   background:rgba(37,120,123,0.22);
   color:#f8fbff;
   font-family:inherit;
   font-size:15px;
   font-weight:600;
   cursor:pointer;
   transition:var(--transition);
   }

   .booking-slot:hover{
   background:rgba(37,120,123,0.5);
   }

   .booking-slot.is-selected{
   background:#ffffff;
   border-color:#ffffff;
   color:#0f1f38;
   }

   .booking-slot.is-taken{
   opacity:0.4;
   cursor:not-allowed;
   text-decoration:line-through;
   background:transparent;
   }

   .booking-message{
   grid-column:1 / -1;
   color:#e2e8f0;
   }

   #booking-confirm:disabled{
   opacity:0.55;
   cursor:not-allowed;
   transform:none;
   box-shadow:none;
   }

   .modal.booking-modal{
   z-index:1700;
   }

   .booking-modal [hidden]{
   display:none !important;
   }

   .booking-modal-card{
   width:min(560px,94vw);
   max-height:92vh;
   overflow-y:auto;
   text-align:left;
   }

   .booking-modal-card h3{
   text-align:center;
   font-size:26px;
   }

   .booking-modal-card p.booking-modal-slot{
   text-align:center;
   font-size:17px;
   font-weight:600;
   color:#25787b;
   margin-bottom:18px;
   }

   #booking-form{
   display:flex;
   flex-direction:column;
   gap:12px;
   }

   #booking-form input,
   #booking-form textarea{
   border:1px solid rgba(15,31,56,0.14);
   background:rgba(255,255,255,0.8);
   color:#0f172a;
   }

   #booking-form input::placeholder,
   #booking-form textarea::placeholder{
   color:#64748b;
   }

   #booking-form input:focus,
   #booking-form textarea:focus{
   border-color:#25787b;
   box-shadow:0 0 0 3px rgba(37,120,123,0.18);
   background:#ffffff;
   }

   #booking-form textarea{
   min-height:90px;
   }

   .booking-modal-card p.booking-form-error{
   min-height:0;
   margin:0;
   font-size:15px;
   font-weight:600;
   color:#b42318;
   }

   #booking-submit,
   #booking-success-ok{
   width:100%;
   background:linear-gradient(135deg,#1a3c63,#23507f);
   }

   #booking-submit:disabled{
   opacity:0.7;
   cursor:wait;
   }

   #booking-success-view{
   text-align:center;
   }

   #booking-success-view p{
   font-size:17px;
   margin-bottom:14px;
   }

   .booking-success-link{
   display:block;
   margin-bottom:20px;
   color:#1a3c63;
   font-weight:600;
   word-break:break-all;
   }

   .booking-summary{
   min-height:26px;
   margin-bottom:18px;
   color:#ffffff;
   font-weight:600;
   }

   .booking-note{
   margin-top:18px;
   color:#cbd5e1;
   font-size:14px;
   }

   #kontakt{
   background:linear-gradient(180deg,#2b8f93,#25787b);
   color:#ffffff;
   }

   #kontakt h2,
   #kontakt .section-subtitle{
   color:#ffffff;
   opacity:1;
   }

   #kontakt input,
   #kontakt textarea{
   border:1px solid rgba(15,31,56,0.14);
   background:rgba(255,255,255,0.72);
   color:#0f172a;
   }

   #kontakt input::placeholder,
   #kontakt textarea::placeholder{
   color:#64748b;
   }

   #kontakt input:focus,
   #kontakt textarea:focus{
   border-color:#25787b;
   box-shadow:0 0 0 3px rgba(37,120,123,0.18);
   background:#ffffff;
   }

   #kontakt form{
   border:1px solid rgba(15,31,56,0.16);
   border-radius:16px;
   padding:28px;
   background:linear-gradient(180deg,#d5e9ef,#c1dde6);
   box-shadow:0 10px 26px rgba(15,31,56,0.18);
   }

   #kontakt form .btn.primary{
   width:100%;
   background:linear-gradient(135deg,#1a3c63,#23507f);
   color:#ffffff;
   border:1px solid rgba(255,255,255,0.22);
   box-shadow:0 10px 22px rgba(15,31,56,0.24);
   letter-spacing:0.3px;
   }

   #kontakt form .btn.primary:hover{
   background:linear-gradient(135deg,#23507f,#2b679f);
   transform:translateY(-2px);
   box-shadow:0 14px 28px rgba(15,31,56,0.3);
   }
   
   /* =========================
      HEADER
   ========================= */
   
   header{
   position:fixed !important;
   top:0 !important;
   left:0 !important;
   width:100% !important;
   max-width:100vw !important;
   display:flex;
   justify-content:space-between;
   align-items:center;
   padding:16px 8%;
   background:rgba(10,16,30,0.9);
   z-index:1400 !important;
   box-shadow:0 2px 20px rgba(0,0,0,0.1);
   overflow:hidden;
   }
   
   .brand{
   display:flex;
   align-items:center;
   gap:0;
   text-decoration:none;
   overflow:visible;
   flex-shrink:0;
   flex:0 0 auto;
   position:relative;
   z-index:1;
   }

   .brand-logo{
   width:58px;
   height:58px;
   object-fit:contain;
   transform:scale(1.61);
   transform-origin:left center;
   display:block;
   will-change:transform;
   flex-shrink:0;
   }
   
   nav ul{
   display:flex;
   gap:40px;
   list-style:none;
   }
   
   nav a{
   text-decoration:none;
   color:white;
   font-weight:500;
   transition:var(--transition);
   position:relative;
   }
   
   nav a::after{
   content:"";
   position:absolute;
   bottom:-6px;
   left:0;
   width:0;
   height:2px;
   background:var(--icon-accent);
   transition:var(--transition);
   }
   
   nav a:hover::after{
   width:100%;
   }
   
   .hamburger{
   display:none;
   width:44px;
   height:44px;
   background:transparent;
   border:none;
   cursor:pointer;
   padding:8px;
   align-items:center;
   justify-content:center;
   flex-direction:column;
   gap:6px;
   z-index:1602;
   flex-shrink:0;
   flex:0 0 44px;
   position:relative;
   -webkit-tap-highlight-color:transparent;
   }

   .hamburger span{
   width:100%;
   height:3px;
   border-radius:10px;
   background:white;
   transition:var(--transition);
   transform-origin:center;
   }

   .hamburger.is-open span{
   background:#ffffff;
   box-shadow:0 0 10px rgba(255,255,255,0.35);
   }

   .hamburger.is-open span:nth-child(1){
   transform:translateY(9px) rotate(45deg);
   }

   .hamburger.is-open span:nth-child(2){
   opacity:0;
   }

   .hamburger.is-open span:nth-child(3){
   transform:translateY(-9px) rotate(-45deg);
   }
   
   /* =========================
      HERO + SLIDER
   ========================= */
   
   .hero{
   min-height:100vh;
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:center;
   padding:120px 20px 40px;
   overflow:hidden;
   width:100%;
   max-width:100vw;
   }
   
   .hero-slider{
   position:absolute;
   inset:0;
   z-index:0;
   }
   
   .slide{
   position:absolute;
   inset:0;
   background-size:cover;
   background-position:center;
   opacity:0;
   transform:scale(1);
   transition:opacity 1s ease-in-out, transform 7s linear;
   }
   
   .slide.active{
   opacity:1;
   transform:scale(1.06);
   }
   
   .hero::before{
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(130deg,rgba(15,23,42,0.9),rgba(31,41,55,0.78) 55%,rgba(79,124,255,0.24));
   z-index:1;
   }

   .hero::after{
   content:"";
   position:absolute;
   inset:0;
   background:
   radial-gradient(circle at 20% 18%,rgba(169,199,255,0.35),transparent 38%),
   radial-gradient(circle at 82% 68%,rgba(79,124,255,0.28),transparent 42%);
   z-index:1;
   pointer-events:none;
   }
   
   .hero-content{
   position:relative;
   z-index:2;
   max-width:900px;
   padding:34px 28px;
   border-radius:20px;
   background:rgba(2,11,31,0.24);
   border:1px solid rgba(219,238,255,0.2);
   }
   
   .hero-badge{
   display:inline-block;
   background:rgba(79,124,255,0.2);
   padding:6px 16px;
   border-radius:50px;
   margin-bottom:20px;
   font-size:14px;
   color:#dbeeff;
   }
   
   .hero h1{
   font-size:52px;
   margin-bottom:20px;
   line-height:1.2;
   color:#f8fbff;
   text-shadow:0 6px 30px rgba(2,11,31,0.5);
   }
   
   .hero p{
   color:#e2e8f0;
   margin-bottom:30px;
   font-size:18px;
   text-shadow:0 3px 16px rgba(2,11,31,0.45);
   }
   
   .hero-cta{
   display:flex;
   justify-content:center;
   gap:20px;
   flex-wrap:wrap;
   }
   
   /* =========================
      BUTTONS
   ========================= */
   
   .btn{
   padding:14px 32px;
   border-radius:8px;
   border:none;
   cursor:pointer;
   font-weight:600;
   transition:var(--transition);
   text-decoration:none;
   display:inline-block;
   }
   
   .btn.primary{
   background:var(--primary);
   color:white;
   }
   
   .btn.primary:hover{
   background:var(--primary-light);
   transform:translateY(-3px);
   box-shadow:0 10px 25px rgba(79,70,229,0.4);
   }
   
   .btn.ghost{
   background:rgba(219,238,255,0.08);
   border:1px solid rgba(219,238,255,0.5);
   color:#dbeeff;
   }
   
   .btn.ghost:hover{
   background:rgba(79,124,255,0.32);
   color:#ffffff;
   }
   
   /* =========================
      SVIJETLO PLAVA SEKCIJA
   ========================= */
   
   .light-section{
   padding:120px 8%;
   text-align:center;
   background:linear-gradient(180deg,var(--light-blue),var(--light-blue-2));
   border-top:1px solid rgba(120,174,255,0.25);
   border-bottom:1px solid rgba(120,174,255,0.25);
   color:#0f172a;
   overflow-x:hidden;
   }
   
   .light-section h2{
   color:#0f172a;
   }
   
   /* =========================
      TAMNA SEKCIJA
   ========================= */
   
   .dark-section{
   padding:120px 8%;
   text-align:center;
   background:linear-gradient(180deg,#101827,#1f2937);
   color:var(--light);
   overflow-x:hidden;
   }
   
   .dark-section h2{
   color:var(--light);
   }
   
   /* =========================
      KARTICE - ZIG ZAG LAYOUT
   ========================= */
   
   .cards{
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:40px;
   max-width:1400px;
   margin:0 auto;
   width:100%;
   }
   
   /* ZIG ZAG EFEKT ZA KARTICE */
   .zigzag .card:nth-child(odd){
   animation:slideInLeft 0.6s ease-out;
   }
   
   .zigzag .card:nth-child(even){
   animation:slideInRight 0.6s ease-out;
   }
   
   @keyframes slideInLeft{
   from{
   opacity:0;
   transform:translateX(-30px);
   }
   to{
   opacity:1;
   transform:translateX(0);
   }
   }
   
   @keyframes slideInRight{
   from{
   opacity:0;
   transform:translateX(30px);
   }
   to{
   opacity:1;
   transform:translateX(0);
   }
   }
   
   /* TAMNE KARTICE (za svijetlo plavu sekciju) */
   .dark-card{
   background:linear-gradient(180deg,#10233f,#17345b);
   padding:40px 30px;
   border-radius:16px;
   border:1px solid rgba(219,238,255,0.22);
   transition:var(--transition);
   box-shadow:0 10px 24px rgba(2,11,31,0.28);
   color:var(--light);
   min-height:280px;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   }
   
   .dark-card:hover{
   transform:translateY(-12px);
   box-shadow:0 20px 50px rgba(2,11,31,0.5);
   border-color:var(--icon-accent);
   }
   
   .dark-card h3{
   color:var(--light);
   margin-bottom:10px;
   font-size:20px;
   }
   
   .dark-card p{
   color:#cbd5e1;
   font-size:15px;
   }
   
   /* IKONE ZA TAMNE KARTICE (svijetlo plave) */
   .dark-card .card-icon{
   width:60px;
   height:60px;
   margin:0 auto 20px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:12px;
   background:rgba(37,120,123,0.18);
   color:var(--icon-accent-2);
   box-shadow:0 0 0 1px rgba(95,168,171,0.38);
   transition:var(--transition);
   }
   
   .dark-card:hover .card-icon{
   background:var(--icon-accent);
   color:#eaf1ff;
   transform:scale(1.08);
   }
   
   .dark-card .card-icon.small{
   width:50px;
   height:50px;
   }
   
   /* SVIJETLE KARTICE (za tamnu sekciju) */
   .light-card{
   background:linear-gradient(180deg,#ffffff,#f4f7ff);
   padding:40px 30px;
   border-radius:16px;
   border:1px solid rgba(255,255,255,0.45);
   transition:var(--transition);
   box-shadow:0 10px 30px rgba(0,0,0,0.1);
   color:#0f172a;
   }
   
   .light-card:hover{
   transform:translateY(-12px);
   box-shadow:0 20px 50px rgba(0,0,0,0.2);
   border-color:var(--icon-accent);
   }
   
   .light-card h3{
   color:#0f172a;
   margin-bottom:10px;
   font-size:20px;
   }
   
   .light-card p{
   color:#475569;
   font-size:15px;
   }
   
   /* IKONE ZA SVIJETLE KARTICE (tamne) */
   .light-card .card-icon{
   width:60px;
   height:60px;
   margin:0 auto 20px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:12px;
   background:rgba(79,70,229,0.15);
   color:var(--primary);
   box-shadow:0 0 0 1px rgba(79,70,229,0.28);
   transition:var(--transition);
   }
   
   .light-card:hover .card-icon{
   background:var(--icon-accent);
   color:#eaf1ff;
   transform:scale(1.08);
   }
   
   /* =========================
      PROJEKTI SEKCIJA
   ========================= */
   
   .projects-grid{
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:40px;
   max-width:1400px;
   margin:0 auto;
   width:100%;
   }
   
   .project-card{
   background:linear-gradient(180deg,#0b1220,#121d30);
   border-radius:16px;
   overflow:hidden;
   border:1px solid rgba(219,238,255,0.22);
   box-shadow:0 12px 34px rgba(2,11,31,0.38);
   transition:var(--transition);
   }
   
   .project-card:hover{
   transform:translateY(-10px);
   box-shadow:0 20px 50px rgba(2,11,31,0.5);
   border-color:var(--icon-accent);
   }
   
   .project-video{
   position:relative;
   width:100%;
   padding-bottom:56.25%; /* 16:9 aspect ratio */
   height:0;
   overflow:hidden;
   background:#000;
   }

   .project-video iframe,
   .project-video video{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   border:none;
   }

   .project-video img{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   object-fit:cover;
   background:#eef6ff;
   transition:transform 0.45s ease, filter 0.45s ease;
   }

   .project-video a{
   position:absolute;
   inset:0;
   display:block;
   overflow:hidden;
   z-index:1;
   }

   #projekti .project-video a::before{
   content:"";
   position:absolute;
   inset:0;
   background:rgba(8,18,34,0.12);
   opacity:0;
   transition:opacity 0.35s ease;
   z-index:2;
   }

   #projekti .project-video a::after{
   content:"";
   position:absolute;
   top:50%;
   left:50%;
   width:68px;
   height:68px;
   transform:translate(-50%,-50%) scale(0.82);
   background-image:url("images/logo-s-white.png");
   background-repeat:no-repeat;
   background-position:center;
   background-size:contain;
   opacity:0;
   transition:opacity 0.35s ease, transform 0.35s ease;
   z-index:3;
   pointer-events:none;
   }

   #projekti .project-card:hover .project-video img{
   transform:scale(1.04);
   filter:brightness(0.72);
   }

   #projekti .project-card:hover .project-video a::before{
   opacity:1;
   }

   #projekti .project-card:hover .project-video a::after{
   opacity:1;
   transform:translate(-50%,-50%) scale(1);
   }
   
   .project-info{
   padding:30px;
   min-height:140px;
   }
   
   .project-info h3{
   color:var(--light);
   margin-bottom:10px;
   font-size:22px;
   }
   
   .project-info p{
   color:#cbd5e1;
   font-size:15px;
   }

   #projekti .project-card{
   background:linear-gradient(180deg,#d5e9ef,#c1dde6);
   border:1px solid rgba(15,31,56,0.16);
   box-shadow:0 10px 26px rgba(15,31,56,0.18);
   }

   #projekti .project-info h3{
   color:#0f172a;
   }

   #projekti .project-info p{
   color:#475569;
   }

   #rjesenja .dark-card,
   #zasto-mi .dark-card{
   background:linear-gradient(180deg,#1a3c63,#23507f);
   border:1px solid rgba(169,199,255,0.3);
   box-shadow:0 10px 24px rgba(2,11,31,0.24);
   }
   
   /* =========================
      KONTAKT FORMA
   ========================= */
   
   .contact{
   overflow-x:hidden;
   }

   .contact form{
   max-width:600px;
   margin:50px auto 0;
   display:flex;
   flex-direction:column;
   gap:20px;
   width:100%;
   }

   .form-status{
   min-height:24px;
   margin-top:14px;
   font-weight:600;
   }

   .form-status.success{
   color:#d9ffe9;
   }

   .form-status.error{
   color:#ffe4e4;
   }

   .hp-field{
   position:absolute;
   left:-9999px;
   opacity:0;
   pointer-events:none;
   }

   .modal{
   position:fixed;
   inset:0;
   display:none;
   align-items:center;
   justify-content:center;
   padding:20px;
   background:rgba(2,11,31,0.62);
   z-index:1200;
   }

   .modal.show{
   display:flex;
   }

   .modal-card{
   width:min(520px,92vw);
   background:linear-gradient(180deg,#d5e9ef,#c1dde6);
   border:1px solid rgba(15,31,56,0.16);
   border-radius:18px;
   padding:28px 24px 24px;
   text-align:center;
   box-shadow:0 18px 38px rgba(2,11,31,0.28);
   position:relative;
   }

   .modal-card h3{
   color:#0f1f38;
   font-size:30px;
   margin-bottom:10px;
   }

   .modal-card p{
   color:#334155;
   margin-bottom:22px;
   font-size:19px;
   }

   .modal-close{
   position:absolute;
   top:10px;
   right:12px;
   width:36px;
   height:36px;
   border:none;
   border-radius:50%;
   cursor:pointer;
   background:rgba(15,31,56,0.12);
   color:#0f1f38;
   font-size:26px;
   line-height:1;
   }
   
   input,textarea{
   padding:16px;
   border-radius:8px;
   border:1px solid rgba(255,255,255,0.1);
   background:rgba(255,255,255,0.05);
   color:var(--light);
   font-family:inherit;
   transition:var(--transition);
   }
   
   input::placeholder,
   textarea::placeholder{
   color:rgba(255,255,255,0.5);
   }
   
   input:focus,textarea:focus{
   outline:none;
   border-color:var(--primary);
   box-shadow:0 0 0 3px rgba(79,70,229,0.2);
   background:rgba(255,255,255,0.08);
   }
   
   textarea{
   min-height:120px;
   resize:vertical;
   }
   
   /* =========================
      FOOTER
   ========================= */
   
   footer{
   padding:56px 8% 34px;
   background:linear-gradient(180deg,#0f1f38,#122946);
   color:#ffffff;
   text-align:center;
   border-top:1px solid rgba(255,255,255,0.18);
   overflow-x:hidden;
   }

   .footer-content{
   max-width:1100px;
   margin:0 auto;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:28px;
   }

   .footer-brand{
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:12px;
   max-width:680px;
   }

   .footer-logo{
   width:84px;
   height:84px;
   object-fit:contain;
   padding:0;
   border-radius:0;
   background:transparent;
   border:none;
   }

   .footer-brand p{
   color:#f8fcff;
   font-size:17px;
   }

   .footer-socials{
   display:flex;
   align-items:center;
   justify-content:center;
   gap:14px;
   flex-wrap:wrap;
   }

   .footer-socials a{
   width:56px;
   height:56px;
   border-radius:14px;
   display:flex;
   align-items:center;
   justify-content:center;
   color:#ffffff;
   background:rgba(255,255,255,0.14);
   border:1px solid rgba(255,255,255,0.34);
   transition:var(--transition);
   text-decoration:none;
   }

   .footer-socials a:hover{
   transform:translateY(-4px);
   background:#ffffff;
   color:#25787b;
   box-shadow:0 14px 28px rgba(14,60,62,0.34);
   }

   .footer-socials svg{
   width:24px;
   height:24px;
   }

   .footer-copy{
   margin-top:28px;
   color:#e8f8ff;
   }
   
   /* =========================
      RESPONSIVE
   ========================= */
   
   @media(max-width:992px){
   header{
   position:fixed !important;
   top:0 !important;
   left:0 !important;
   padding:12px 16px;
   padding-right:60px;
   justify-content:flex-start;
   align-items:center;
   gap:12px;
   overflow:visible;
   }

   .brand{
   flex-shrink:1;
   flex:0 1 auto;
   min-width:0;
   max-width:calc(100% - 56px);
   overflow:hidden;
   position:relative;
   z-index:1;
   }

   .brand-logo{
   width:50px;
   height:50px;
   transform:scale(1.43);
   }

   nav{
   position:fixed;
   top:0;
   right:-100%;
   width:min(360px,86vw);
   max-width:100vw;
   height:100vh;
   background:linear-gradient(180deg,#123560,#1a4e86);
   border-left:1px solid rgba(120,156,214,0.22);
   padding:104px 28px 32px;
   box-shadow:0 22px 46px rgba(2,11,31,0.32);
   transition:var(--transition);
   z-index:1600;
   overflow-y:auto;
   overflow-x:hidden;
   }

   nav ul{
   flex-direction:column;
   align-items:flex-start;
   gap:24px;
   }

   nav a{
   font-size:22px;
   color:#ffffff !important;
   text-shadow:none;
   font-weight:700;
   letter-spacing:0.2px;
   text-shadow:0 0 10px rgba(255,255,255,0.24);
   }

   nav a:visited{
   color:#ffffff !important;
   opacity:1;
   }

   nav.active a,
   nav.active a:visited{
   color:#ffffff !important;
   opacity:1 !important;
   -webkit-text-fill-color:#ffffff;
   text-shadow:0 0 12px rgba(255,255,255,0.28);
   }

   nav a::after{
   background:rgba(95,168,171,0.95);
   }

   nav.active{
   right:0;
   }

   .hamburger{
   display:flex !important;
   position:absolute !important;
   top:50% !important;
   right:16px !important;
   transform:translateY(-50%) !important;
   flex-shrink:0;
   width:44px !important;
   height:44px !important;
   min-width:44px !important;
   max-width:44px !important;
   margin:0 !important;
   z-index:1602 !important;
   }
   }

   @media(max-width:900px){
   .hero h1{
   font-size:38px;
   }

   .hero-content{
   padding:28px 22px;
   }
   
   h2{
   font-size:28px;
   }
   
   .cards,
   .projects-grid{
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:30px;
   }
   }
   
   @media(max-width:768px){
   header{
   position:fixed !important;
   top:0 !important;
   left:0 !important;
   padding:10px 12px;
   padding-right:56px;
   gap:10px;
   }

   .brand{
   max-width:calc(100% - 54px);
   overflow:hidden;
   }

   .hamburger{
   position:absolute !important;
   top:50% !important;
   right:12px !important;
   transform:translateY(-50%) !important;
   }

   .brand-logo{
   width:46px;
   height:46px;
   transform:scale(1.33);
   }
   
   .hero{
   padding-top:80px;
   }
   
   .hero h1{
   font-size:32px;
   }
   
   .hero p{
   font-size:16px;
   }
   
   .light-section,
   .dark-section,
   .contact{
   padding:80px 5%;
   }
   
   .cards,
   .projects-grid{
   grid-template-columns:1fr;
   gap:25px;
   }
   
   .project-video{
   padding-bottom:56.25%;
   }
   
   .section-subtitle{
   font-size:16px;
   margin-bottom:40px;
   }

   footer{
   padding:46px 5% 30px;
   }

   .footer-brand p{
   font-size:16px;
   }
   }
   
   @media(max-width:480px){
   header{
   position:fixed !important;
   top:0 !important;
   left:0 !important;
   padding:10px 12px;
   padding-right:56px;
   gap:8px;
   }

   .brand{
   max-width:calc(100% - 52px);
   flex-shrink:1;
   overflow:hidden;
   }

   .brand-logo{
   width:40px;
   height:40px;
   transform:scale(1.24);
   }

   nav{
   width:100%;
   }

   .hamburger{
   position:absolute !important;
   top:50% !important;
   right:12px !important;
   transform:translateY(-50%) !important;
   width:44px !important;
   height:44px !important;
   padding:8px;
   }

   nav a{
   font-size:20px;
   color:#ffffff !important;
   }

   nav a:visited{
   color:#ffffff !important;
   }

   .hero-content{
   padding:22px 16px;
   }

   .hero h1{
   font-size:28px;
   }
   
   h2{
   font-size:24px;
   }
   
   .btn{
   padding:12px 24px;
   font-size:14px;
   }
   
   .hero-cta{
   flex-direction:column;
   gap:15px;
   }
   
   .hero-cta .btn{
   width:100%;
   }

   .footer-logo{
   width:72px;
   height:72px;
   }

   .footer-socials a{
   width:50px;
   height:50px;
   }
   }