@charset "UTF-8";
/*
Theme Name: zmianagry-start
Theme URI: https://trifectamarketing.pl/
Author: Sebastian Szydlowski
Author URI: https://trifectamarketing.pl/
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nz-theme
*/



:root {
      
      --bg-dark: #111827;
      --accent-gold: #c5a059;
      --accent-red: #b91c1c;
      --text-white: #ffffff;
      --text-muted: #9ca3af;
      --card-bg: rgba(255, 255, 255, 0.05);
      --font:'Inter', sans-serif;
  }



@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; /
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/inter-v20-latin_latin-ext-800.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/inter-v20-latin_latin-ext-900.woff2') format('woff2'); 
}


/*************************************
******************SETUP***************
**************************************/
html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;font-size:100%;scroll-behavior:smooth}
*{box-sizing:border-box;}
*::before,*::after{box-sizing:inherit;}

body{
  height:100%;
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--bg-dark);
  color: var(--text-white);
  line-height: 1.6;
}

main,
video,
iframe,
figure,
article,
svg,
img,
picture,
details,
figcaption,
.wp-caption-text {display:block}

div, 
section{border:0;outline:0}

body,
figure,
div, 
section{margin:0px;padding:0px}

svg,img,picture{max-width:100%;height:auto;margin:0;}
iframe{width:100%}
p,blockquote,address,big,cite,code,em,font,small,strike,sub,sup,li,ol,ul,fieldset,form,label,legend,button,table,caption,tr,th,td {border:none;padding:0;margin:0;overflow-wrap:break-word;word-break:break-word}
hr{width:auto;text-align:center;border-top:8px dotted #000;margin-top: 1rem;margin-bottom: 1rem;}

section { padding: 80px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }


/****************************/
/*********LIST**************/
/***************************/
ul,ol{margin:0 0 2rem 1rem}
ul{list-style:disc}
ul ul{list-style:circle}
ul ul ul{list-style: square}
ol{list-style:decimal}
ol ol{list-style:lower-alpha}
ol ol ol {list-style:lower-roman}
li{line-height:1.5;margin: 0.5rem 0 0 1rem;font-family:var(--font)}
li > ul,li > ol{margin:1rem 0 0 1rem}
dt, dd{line-height:1.5}
dt{font-weight:700}
dt + dd{margin-top:0.5rem}
dd + dt{margin-top:0rem}

/************************
**********MEDIA**********
*************************/
iframe{max-width:100%}

figcaption,
.wp-caption-text{color:#6d6d6d;font-size:1.5rem;font-weight:500;line-height:1.2;margin-top:1.5rem}
figcaption a,
.wp-caption-text a{color:inherit}
/**********************************
********Text-level semantics*******
***********************************/
b,strong,bold {font-weight:700}

code,kbd,pre,samp{font-family:monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
summary{display:list-item}
blockquote {background:#f9f9f9;border-left:10px solid #ccc;margin:6% auto;padding:0.5em 10px;quotes:"\201C""\201D""\2018""\2019";width:73%}
blockquote:before {color:#ccc;content:open-quote;font-size:4em;line-height:0.1em;margin-right:0.25em;vertical-align:-0.4em}
blockquote p {display:inline;font-weight:900;font-size:calc(2.26937rem + .2325vw);line-height:1.8}
blockquote span{display:flex;justify-content:flex-end}

/****************************/
/*****HEADINGS**************/
/***************************/

h1, h2{ text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.6; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; text-align: center; }
h2 { font-size: 1.9rem font-weight: 800; text-align: center; margin-bottom: 50px; }

/*******************************************
****************button and link*************
*******************************************/
a {text-decoration:none;color: var(--accent-gold)}
a:hover{transition:0}


button{
  text-transform:uppercase;
  font-family:var(--font);
  cursor:pointer
}

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  object-fit: cover;
}


.top-logo{margin: 0 auto;width: 20%}
.logo-top-bar{ background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


.description, .form-container p{font-size:0.8rem}
.content-wrapper{max-width:1920px;margin:auto;}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.gold-text { color: var(--accent-gold); }


.hero { background: radial-gradient(circle at center, #1e293b 0%, #111827 100%); padding-top: 100px; }
.hero-eyebrow {display:block;text-align: center;font-size: 0.9rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 15px; text-transform: uppercase;}
.hero-sub { text-align: center; color: var(--text-muted); max-width: 850px; margin: 25px auto 45px; font-size: 1.15rem; }

.ps-row { background: var(--card-bg); padding: 25px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid var(--accent-gold); }
.ps-label { font-size: 0.75rem; font-weight: 800; opacity: 0.6; display: block; margin-bottom: 5px; }
.ps-content { font-size: 1rem; font-weight: 600; }

.expert-card { text-align: center; background: var(--card-bg); padding: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s ease; }
.expert-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.08); }
.expert-img img,
.expert-big-img img { width: 90px; height: 90px; background: #374151; border-radius: 50%; margin: 0 auto 15px; border: 2px solid var(--accent-gold); }
.expert-big-img img{width: 180px; height: 180px}
.expert-name { font-weight: 800; font-size: 0.95rem; margin-bottom: 5px; }
.expert-role { font-size: 0.75rem; color: var(--accent-gold); text-transform: uppercase; font-weight: 600; }


.video-box { background: #000; border: 1px solid rgba(197, 160, 89, 0.3); padding: 30px; border-radius: 12px; position: relative; }
.video-tag { position: absolute; top: -15px; right: 20px; background: var(--accent-red); padding: 5px 15px; font-weight: 800; font-size: 0.7rem; border-radius: 4px; }

.bonus-box {border:2px solid var(--accent-gold); padding:clamp(5px, 5vw, 2rem); border-radius: 16px; background: rgba(197, 160, 89, 0.03); position: relative; }
.hard-data-bar {text-align: center; margin-bottom: 30px; font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; }

.form-container{background: #1f2937;padding:clamp(2rem, 5vw, 4rem);border-radius:12px;border:1px solid #374151; max-width: 500px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

input { width: 100%; padding: 15px; margin-bottom: 15px; background: #111827; border: 1px solid #374151; color: white; border-radius: 4px; font-size: 1rem; }

.btn-submit {
  padding: 20px; 
  background: var(--accent-red); 
  color: white; border: none; 
  font-weight: 900; 
  text-transform: uppercase; 
  cursor: pointer; 
  border-radius: 4px; 
  font-size: 1.1rem; 
  transition: 0.3s;
  display: inline-block
}


.btn-submit:hover { background: #991b1b; transform: scale(1.02); }

.footer {padding: 40px 0;
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-muted);
            background: #0a0f1a;
        }


.video-hero{text-align: center;padding: 80px 0 40px;background: radial-gradient(circle at center, #1e293b 0%, #111827 100%);}

.video-hero h1{
  font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.video-card h3 {
            padding: 30px 20px 10px 20px;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--accent-gold);
            text-transform: uppercase;
            margin: 0;
        }

.video-card p {
            color: var(--text-muted);
            font-size: 1rem;
            margin: 10px 0 0;
        }

        .cta-section {
            background-color: rgba(255, 255, 255, 0.02);
            border-top: 1px solid rgba(255,255,255,0.05);
            text-align: center;
            padding: 100px 20px;
        }




.contact-footer-section {padding: 80px 0;text-align: center;border-top: 1px solid rgba(255,255,255,0.05);}
.contact-hint {font-size: 1.1rem;color: var(--text-muted);margin-bottom: 40px;}
.contact-hint a {color: var(--accent-gold);text-decoration: none;font-weight: 700;border-bottom: 1px solid var(--accent-gold);}
.video-section {padding: 60px 0 100px;}
.video-list {display: flex;flex-direction: column;gap: 80px;}
.video-card {background: var(--card-bg);border-radius: 12px;overflow: hidden;text-align: center;
            padding-bottom: 40px;
            border: 1px solid rgba(255,255,255,0.05);
            border-bottom: 4px solid var(--accent-gold);
            width: 100%;
        }



@media (max-width: 767px) {
 
 .expert-card {margin-bottom: 20px}
  h1 { font-size: 2.2rem; }
  .hard-data-bar { font-size: 1rem; }
  .video-box{margin-bottom: 2rem}
  
}


@media (min-width: 768px) {

  h2{font-size: 2.2rem }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

}