/* ==========================================
           ROOT
        =========================================== */

        :root {

            --navy: #062b68;
            --navy-light: #0b3d91;
            --gold: #b88755;

            --background: #ffffff;
            --section: #f8fafc;

            --text: #1e293b;
            --muted: #64748b;

            --line: #e8edf5;

            --shadow: 0 20px 55px rgba(6, 43, 104, .08);

        }
		.nav > .btn {
			margin-left: auto;
		}

        /* ==========================================
           RESET
        =========================================== */

        * {

            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        html {

            scroll-behavior: smooth;

        }

        body {

            font-family: "Inter", sans-serif;

            background: var(--background);

            color: var(--text);

            line-height: 1.65;

            overflow-x: hidden;

        }

        img {

            display: block;

            max-width: 100%;

        }

        a {

            color: inherit;

            text-decoration: none;

        }
		.first-section{
			margin-top: 90px;
		}
		.hero-card{
			background:rgba(255,255,255,.65);
			backdrop-filter:blur(14px);
			-webkit-backdrop-filter:blur(14px);

			border:1px solid rgba(255,255,255,.35);
			border-radius:28px;
			padding:34px;

			box-shadow:0 20px 60px rgba(6,43,104,.18);
		}
		.cards {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  gap: 26px;
		}

        /* ==========================================
           CONTAINER
        =========================================== */
		.container{
			width:92%;
			max-width:1700px;
			margin:0 auto;
		}
        /* ==========================================
           NAVBAR
        =========================================== */

        .topbar {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            z-index: 999;

            backdrop-filter: blur(16px);

            background: rgba(255, 255, 255, .80);

            transition: .3s;
			overflow:visible;

        }

        .nav {

            display: flex;

            align-items: center;

            height: 118px;

        }
		.logo{

			display:flex;

			align-items:center;

			justify-content:center;

			width:auto;

			flex-shrink:0;

			margin-right:60px;

		}

		.logo img{

			display:block;

			height:220px;

			width:auto;

			pointer-events:auto;

		}

        .menu {

            display: flex;

            gap: 34px;

            margin-right: auto;

            font-size: 14px;

            font-weight: 800;

            color: var(--navy);

        }

        .menu a {

            transition: .25s;

        }

        .menu a:hover {

            color: var(--gold);

        }

        .buy-online-link {

            color: var(--gold);

        }

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			border: 0;
			border-radius: 10px;
			background: var(--navy);
			color: #ffffff;
			font-weight: 900;
			padding: 16px 26px;
			box-shadow: 0 12px 26px rgba(6,43,104,.22);
			transition: .2s ease;
			cursor: pointer;
		}

		.btn:hover{

			transform:translateY(-2px);

			background:var(--navy-light);

			color:#fff;

			box-shadow:0 16px 30px rgba(6,43,104,.28);

		}
		
			footer {
			background: var(--navy);
			color: #ffffff;
			padding: 24px 0;
		}
		.footer-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 100%;
		}
		/* ==========================================
		   FAQ
		========================================== */

		.faq-wrap{
			display:grid;
			gap:14px;
		}

		details.faq{
			background:#fff;
			border:1px solid var(--line);
			border-radius:18px;
			padding:18px 22px;
			box-shadow:0 10px 28px rgba(6,43,104,.05);
			transition:.25s ease;
		}

		details.faq:hover{
			border-color:rgba(184,135,85,.35);
			box-shadow:0 16px 40px rgba(6,43,104,.08);
		}

		details.faq summary{
			cursor:pointer;
			list-style:none;
			font-weight:800;
			color:var(--navy);
			font-size:17px;
			display:flex;
			justify-content:space-between;
			align-items:center;
		}

		details.faq summary::-webkit-details-marker{
			display:none;
		}

		details.faq summary::after{
			content:"+";
			font-size:24px;
			font-weight:400;
			color:var(--gold);
			transition:.25s ease;
		}

		details.faq[open] summary::after{
			transform:rotate(45deg);
		}

		details.faq p{
			margin-top:14px;
			color:var(--muted);
			line-height:1.7;
}
		/*====MOBILE=====*/
		
		.hamburger{
			display:none;
		}
		
		    .hamburger span{
        width:22px;
        height:2px;
        background:#fff;
        border-radius:99px;
		}

/*=======FORMULARZ========*/
	.contact{

	padding:
	36px 0 60px;

	background:
	#fff;

	}

	.contact .container{

	max-width:
	1180px;

	}

	.contact-wrap{

	position:
	relative;

	overflow:
	hidden;

	display:
	grid;

	grid-template-columns:
	.92fr 1.08fr;

	gap:
	54px;

	align-items:
	center;

	padding:
	54px;

	border:
	1px solid rgba(226,232,240,.95);

	border-radius:
	30px;

	background:

	linear-gradient(
	90deg,

	rgba(255,255,255,.95) 0%,

	rgba(255,255,255,.90) 30%,

	rgba(255,255,255,.50) 58%,

	rgba(6,43,104,.08) 100%
	),

	url("../zdjecia/formularz.png");

	background-size:
	auto 100%;

	background-repeat:
	no-repeat;

	background-position:
	clamp(-50%, 125vw, 170%)
	bottom;

	box-shadow:
	0 30px 90px rgba(6,43,104,.10);

	}


    .contact-copy p {
      color: #475569;
      font-size: 18px;
      margin: 20px 0 28px;
    }
	
	.contact-copy{

	max-width:
	540px;

	position:
	relative;

	z-index:
	2;

	}

	.contact-copy h2{

	font-size:
	clamp(44px,5vw,74px);

	line-height:
	1.05;

	margin-bottom:
	26px;

	}

	.contact-copy .contact-list{

	margin-top:
	48px;

	gap:
	28px;

	}

	.contact-copy .contact-list div{

	display:
	flex;

	align-items:
	center;

	gap:
	16px;

	font-size:
	18px;

	font-weight:
	800;

	}
	.cards-2x2{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:26px;
	}
    .contact-list {
      display: grid;
      gap: 14px;
      font-weight: 800;
      color: #334155;
    }

	.form {
	  background: white;
	  border-radius: 18px;
	  box-shadow: var(--shadow);
	  padding: 30px;
	  border: 1px solid var(--line);

	  transition:
		box-shadow .25s ease,
		border-color .25s ease;
	}

	.form:hover {
	  border-color: rgba(184,135,85,.35);
	  box-shadow: 0 28px 70px rgba(6,43,104,.16);
	}

    .form-grid {
      display: grid;
      gap: 14px;
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid #dbe2ee;
      border-radius: 9px;
      padding: 15px 16px;
      font-family: inherit;
      font-size: 15px;
      outline: none;
      background: white;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--navy);
      box-shadow: 0 0 0 4px rgba(6,43,104,.08);
    }

    .form button {
      width: 100%;
      border-radius: 9px;
    }

    .consent {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: start;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
    }

    .consent input {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      accent-color: var(--navy);
    }

    .consent label {
      font-size: 12px;
      line-height: 1.55;
      color: #475569;
      font-weight: 600;
    }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .8s ease, transform .8s ease;
    }

    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

	.contact-benefits{

	display:grid;

	gap:26px;

	margin-top:42px;

	}

	.contact-benefit{

	display:grid;

	grid-template-columns:
	58px 1fr;

	gap:18px;

	align-items:center;

	}

	.benefit-icon{

	width:auto;

	height:auto;

	background:
	transparent;

	border-radius:
	0;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:34px;

	}

	.contact-benefit strong{

	display:block;

	font-size:18px;

	color:
	var(--navy);

	margin-bottom:6px;

	}

	.contact-benefit span{

	color:
	#64748b;

	line-height:
	1.7;

	}
	
	.upload-box{

	display:grid;

	gap:10px;

	}
	.upload-box label{

	font-size:14px;

	font-weight:800;

	color:var(--navy);

	}

	.upload-box span{

	color:#64748b;

	}

	.upload-box input{

	padding:12px;

	background:#f8fafc;

	}
	
	@media (max-width:980px){

		.eyebrow{
			margin-top:0;
			margin-bottom:9px;
		}

		.nav{
			height:82px;
			justify-content:space-between;
		}

		.logo{
			margin-right:0;
		}

		.logo img{
			height:150px;
		}

		.btn{
			display:none;
		}

		.hamburger{
			display:flex;
			width:44px;
			height:44px;
			border:none;
			border-radius:10px;
			background:var(--navy);
			cursor:pointer;
			align-items:center;
			justify-content:center;
			flex-direction:column;
			gap:5px;
		}

		.menu{
			display:none;
			position:absolute;
			top:82px;
			left:20px;
			right:20px;
			background:#fff;
			border-radius:18px;
			box-shadow:0 18px 45px rgba(6,43,104,.14);
			padding:12px;
			flex-direction:column;
			gap:0;
			z-index:999;
		}

		.menu.open{
			display:flex;
		}

		.menu a{
			padding:14px 16px;
			border-radius:12px;
		}

		.menu a:hover{
			background:#f4f7fb;
		}

		.hero-grid,
		.split,
		.contact-wrap{
			grid-template-columns:1fr;
		}

		.hero-stats{
			grid-template-columns:1fr;
		}

			.cards,
			.benefits-grid,
			.audience-grid,
			.faq-grid,
			.steps{
				display:grid;
				grid-template-columns:1fr !important;
			}
		.hero-card{
			width:100%;
			max-width:100%;
		}

		.hero-grid > *{
			width:100%;
		}

	}

	@media (max-width:620px){

		.hero{
			padding:140px 0;
			background-position:center;
		}

		.hero-actions{
			display:grid;
			width:100%;
			align-items:stretch;
		}

		.steps{
			grid-template-columns:1fr;
		}

		.section{
			padding:68px 0;
		}

		.hero-card{
			padding:26px;
		}

		.section-head p,
		.lead,
		.contact-copy p,
		.cta-banner p{
			font-size:16px;
		}

	
		.hero-grid{
			gap:32px;
		}

		h1{
			font-size:48px;
		}

		.lead{
			max-width:100%;
		}

		.hero-stats{
			display:grid;
			grid-template-columns:1fr;
			max-width:100%;
		}

		.stat{
			width:100%;
		}

		.stat{
			padding:16px;
		}

		.hero{
			background-position:70% center;
		}
		.hero{
			padding:120px 0 60px;
		}

		.hero-grid{
			gap:24px;
		}

		.hero-card{
			margin-top:0;
			padding:24px;
		}

		.hero-stats{
			display:grid;
			grid-template-columns:1fr;
			gap:14px;
			max-width:100%;
		}

		.hero-actions{
			display:grid;
			grid-template-columns:1fr;
			gap:12px;
		}

		.hero-actions .btn{
			display:flex;
			width:100%;
		}

		h1{
			font-size:clamp(40px,10vw,54px);
		}

		.lead{
			max-width:100%;
		}
		.hero-grid{
			display:block !important;
		}

		.hero-card{
			display:block !important;
			width:100% !important;
			max-width:100% !important;
			margin-top:30px !important;
		}
		.cards-2x2{
			grid-template-columns:1fr;
		}

	}
	}