/* ----------------------------------------------------------------------------------------
Template Base : Nextmind - AI Agency & Technology HTML Template
Custom CSS : FINAL rebuilt + consistent spacing + AI Agent Hero video (in-player overlay)
---------------------------------------------------------------------------------------- */

/************************************/
/*** 01. Global Variables        ***/
/************************************/
:root{
	--primary-color             : #FFFFFF;
	--white-color               : #FFFFFF;
	--secondary-color           : #1B1B1B66;
	--text-color                : #A7AABB;
	--bg-color                  : #060606;
	--accent-color              : #A93E17;
	--accent-secondary-color    : #15399A;
	--divider-color             : #FFFFFF0F;
	--dark-divider-color        : #FFFFFF1A;
	--error-color               : rgb(230, 87, 87);
	--default-font              : "Manrope", sans-serif;

	/* UI helpers */
	--radius-xl                 : 20px;
	--radius-lg                 : 16px;
	--radius-md                 : 12px;
	--shadow-soft               : 0 20px 60px rgba(0,0,0,0.45);
	--glass-blur                : saturate(180%) blur(40px);
}

/************************************/
/*** 02. General css            ***/
/************************************/
html{ scroll-behavior:smooth; }
html, body{
	width:100%;
	overflow-x:hidden;
	overflow-x: clip;
}

body{
	position:relative;
	font-family:var(--default-font);
	font-size:16px;
	font-weight:400;
	line-height:1.5em; /* FIX: plus respirant */
	color:var(--text-color);
	background:var(--bg-color);
}

p{ line-height:1.65em; margin-bottom:1.4em; }

h1,h2,h3,h4,h5,h6{
	margin:0;
	font-weight:700;
	line-height:1.15em;
	color:var(--primary-color);
}

img{ max-width:100%; height:auto; }
a{ text-decoration:none; }
a:hover,a:focus{ text-decoration:none; outline:0; }

::selection{
	color:var(--primary-color);
	background-color:var(--accent-color);
	filter:invert(1);
}

/* Scrollbar */
::-webkit-scrollbar{ width:7px; background-color:var(--primary-color); }
::-webkit-scrollbar-track{
	background-color:var(--primary-color);
	border-left:1px solid var(--primary-color);
}
::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);
}

/* Layout helpers */
.container{ max-width:1300px; }
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
	position:relative;
	padding-right:15px;
	padding-left:15px;
	z-index:1;
}
.row{ margin-right:-15px; margin-left:-15px; }
.row > *{ padding-right:15px; padding-left:15px; }

/************************************/
/*** 03. Buttons                 ***/
/************************************/
.btn-default{
	position:relative;
	display:inline-block;
	background:linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size:200% auto;
	border-radius:100px;
	color:var(--primary-color);
	font-size:16px;
	font-weight:700;
	line-height:1em;
	border:none;
	outline:none;
	padding:17px 30px;
	transition:all 0.35s ease-in-out;
	overflow:hidden;
	z-index:0;
}

.btn-default:hover{ background-position:right center; }

/* Secondary button */
.btn-default.btn-secondary{
	background:rgba(255,255,255,0.03);
	border:1px solid var(--dark-divider-color);
	color:var(--primary-color);
}
.btn-default.btn-secondary:hover{
	border-color:rgba(255,255,255,0.35);
	background:rgba(255,255,255,0.06);
}

/************************************/
/*** 04. Section titles          ***/
/************************************/
.section-row{ margin-bottom:80px; }
.section-title{ margin-bottom:40px; }
.section-title.section-title-center{
	width:100%;
	max-width:700px;
	text-align:center;
	margin:0 auto;
}

.section-title h3{
	display:inline-block;
	position:relative;
	font-size:14px;
	font-weight:500;
	line-height:1.2em;
	letter-spacing:0.2em;
	text-transform:uppercase;
	color:var(--text-color);
	background:var(--divider-color);
	border:1px solid var(--divider-color);
	border-radius:100px;
	padding:10px 50px;
	margin-bottom:20px;
}

.section-title h3::before,
.section-title h3::after{
	content:'';
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	background:url('../images/icon-sparkle.svg') no-repeat;
	background-size:cover;
	width:16px;
	height:16px;
}
.section-title h3::before{ left:24px; background-position:left center; }
.section-title h3::after{ right:24px; background-position:right center; }

.section-title h1{
	font-size:72px;
	line-height:1.06em;
	font-weight:600;
	letter-spacing:-0.02em;
	margin-bottom:0;
}
.section-title h2{
	font-size:48px;
	font-weight:300;
	margin-bottom:0;
}

.section-title h1 span,
.section-title h2 span{
	font-weight:700;
	background:linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size:200% auto;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	transition:all 0.35s ease-in-out;
}
.section-title h1:hover span,
.section-title h2:hover span{ background-position:right center; }

.section-title p{ margin-top:18px; margin-bottom:0; }

/************************************/
/*** 05. Header                  ***/
/************************************/
header.main-header{
	position:absolute;
	top:0;
	width:100%;
	z-index:100;
}

header.main-header .header-sticky.active{
	position:fixed;
	top:0; left:0; right:0;
	background:rgba(6,6,6,0.85);
	border-bottom:1px solid var(--divider-color);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	transform:translateY(0);
}

.navbar{ padding:30px 0; align-items:center; }
.navbar-brand{ padding:0; margin:0; }

.main-menu .nav-menu-wrapper{ flex:1; text-align:center; margin:0 20px; }
.main-menu .nav-menu-wrapper .navbar-nav{
	border:1px solid var(--dark-divider-color);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-radius:30px;
	padding:0 10px;
}
.main-menu .nav-menu-wrapper > ul{
	align-items:center;
	display:inline-flex;
}
.main-menu ul li{ margin:0; position:relative; }
.main-menu ul li a{
	font-size:16px;
	font-weight:400;
	padding:13px 20px !important;
	border-radius:100px;
	color:var(--primary-color);
	text-transform:capitalize;
	transition:all 0.25s ease-in-out;
}
.main-menu ul li a:hover,
.main-menu ul li a:focus{ color:var(--accent-color); }

/************************************/
/*** 06. AI Agent Hero Section   ***/
/************************************/
.ai-agent-hero{
	position:relative;
	padding:150px 0 85px; /* mieux aligné avec le header */
}

.ai-agent-hero::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		radial-gradient(900px 420px at 18% 8%, rgba(169,62,23,0.18), rgba(0,0,0,0)),
		radial-gradient(820px 420px at 82% 10%, rgba(21,57,154,0.14), rgba(0,0,0,0)),
		linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.00) 100%);
	pointer-events:none;
	z-index:0;
}

.ai-agent-hero .container{ position:relative; z-index:1; }

/* Video block */
.ai-agent-video-wrap{
	position:relative;
	width:100%;
	max-width:520px; /* desktop: plus pro */
	margin:0 auto;
}

.ai-agent-video-frame{
	position:relative;
	width:100%;
	border-radius:var(--radius-xl);
	overflow:hidden;
	border:1px solid var(--dark-divider-color);
	background:rgba(255,255,255,0.03);
	box-shadow: var(--shadow-soft);
}

/* Ratio portrait stable */
.ai-agent-video-frame::before{
	content:"";
	display:block;
	padding-top:165%;
}

/* Video fills the frame */
.ai-agent-video-player{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:0;
	background:#000;
}

/* Overlay play (in-player) */
.ai-agent-video-overlay{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	background: radial-gradient(circle at 50% 50%,
		rgba(0,0,0,0.52) 0%,
		rgba(0,0,0,0.24) 55%,
		rgba(0,0,0,0.00) 100%);
	border:0;
	cursor:pointer;
	padding:18px;
	transition:0.22s ease;
}

.ai-agent-video-overlay:hover{
	background: radial-gradient(circle at 50% 50%,
		rgba(0,0,0,0.64) 0%,
		rgba(0,0,0,0.26) 55%,
		rgba(0,0,0,0.00) 100%);
}

.ai-agent-video-overlay.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.ai-agent-video-overlay-icon{
	width:58px;
	height:58px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border:1px solid rgba(255,255,255,0.18);
	color:var(--primary-color);
	font-size:22px;
	line-height:1;
	transition:transform 0.22s ease, background 0.22s ease;
}

.ai-agent-video-overlay:hover .ai-agent-video-overlay-icon{
	transform:scale(1.06);
	background:rgba(0,0,0,0.65);
}

.ai-agent-video-overlay-text{
	font-size:14px;
	font-weight:650;
	padding:10px 14px;
	border-radius:999px;
	background:rgba(0,0,0,0.40);
	border:1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color:rgba(255,255,255,0.92);
}

.ai-agent-video-note{
	font-size:13px;
	line-height:1.5em;
	color:rgba(255,255,255,0.55);
	margin:12px 0 0;
	text-align:center;
}

/* Text block right */
.ai-agent-hero-content .section-title{
	margin-bottom:22px;
}

.ai-agent-hero-content .section-title h1{
	font-size:64px;
	line-height:1.05em;
	font-weight:650;
	letter-spacing:-0.02em;
	margin-bottom:12px;
}

.ai-agent-hero-content .section-title p{
	font-size:18px;
	color:rgba(255,255,255,0.88);
	max-width:720px;
}

.ai-agent-hero-text h2{
	font-size:28px;
	font-weight:650;
	margin:24px 0 10px;
}

.ai-agent-hero-points{
	margin:18px 0 26px;
	padding-left:18px;
}

.ai-agent-hero-points li{
	margin:8px 0;
	line-height:1.55em;
	color:rgba(255,255,255,0.82);
}

.ai-agent-hero-cta{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:16px;
}

/************************************/
/*** 07. Hero                    ***/
/************************************/
.hero{
	position:relative;
	padding:115px 0 95px;
}

.hero::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		linear-gradient(1deg, rgba(0,0,0,0.00) 20.46%, #000 99.49%),
		linear-gradient(179deg, rgba(0,0,0,0.00) 0.44%, #000 119.12%);
	z-index:1;
}

.hero .container{ position:relative; z-index:2; }
.hero .hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; }
.hero .hero-bg-video video{ width:100%; height:100%; object-fit:cover; }

.hero-content .section-title p{ font-size:18px; color:var(--primary-color); }
.hero-content-btn{ display:flex; flex-wrap:wrap; gap:40px; }

/************************************/
/*** 08. Scrolling ticker        ***/
/************************************/
.our-scrolling-ticker{
	background:linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	padding:30px 0;
}
.scrolling-ticker-box{
	--gap:60px;
	display:flex;
	overflow:hidden;
	user-select:none;
	gap:var(--gap);
	align-items:center;
}
.scrolling-content{
	flex-shrink:0;
	display:flex;
	gap:var(--gap);
	min-width:100%;
	animation:scroll 30s linear infinite;
}
@keyframes scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(calc(-100% - var(--gap))); }
}
.scrolling-ticker-box p{
	font-size:30px;
	color:#fff;
	margin-bottom:0;
}

/************************************/
/*** 09. About, Services, Feature ***/
/************************************/
.about-us{ padding:160px 0 80px; }
.our-services{ padding:80px 0; }
.our-feature{ padding:80px 0 50px; }

/************************************/
/*** 10. How it work             ***/
/************************************/
.how-it-work{ padding:80px 0 50px; }

.how-work-step-box{
	position:relative;
	background:var(--secondary-color) url('../images/work-step-box-bg.png') no-repeat;
	background-position:top left;
	border:1px solid var(--dark-divider-color);
	backdrop-filter:blur(100px);
	-webkit-backdrop-filter:blur(100px);
	border-radius:20px;
	margin-bottom:30px;
	padding:40px;
	overflow:hidden;
}

.work-step-no{ margin-bottom:40px; }
.work-step-no h3{
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:0.13em;
	color:var(--primary-color);
	display:inline-block;
	background:linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size:200% auto;
	border-radius:10px;
	padding:10px 20px;
	transition:all 0.35s ease-in-out;
}
.how-work-step-box:hover .work-step-no h3{ background-position:right center; }

/************************************/
/*** 11. Contact form            ***/
/************************************/
.contact-us-form{
	position:relative;
	height:100%;
	background:var(--secondary-color) url('../images/contact-us-form-bg.png') no-repeat center center;
	background-size:cover;
	border:1px solid var(--divider-color);
	border-radius:20px;
	backdrop-filter:blur(240px);
	-webkit-backdrop-filter:blur(240px);
	align-content:center;
	padding:50px;
}

.contact-us-form .form-label{
	font-size:18px;
	font-weight:500;
	line-height:normal;
	text-transform:capitalize;
	color:var(--primary-color);
	margin-bottom:20px;
}

.contact-us-form .form-control{
	font-size:16px;
	font-weight:400;
	line-height:1.4em;
	color:var(--primary-color);
	background:var(--secondary-color);
	border:1px solid var(--divider-color);
	border-radius:10px;
	padding:18px 20px;
	box-shadow:none;
	outline:none;
}

.contact-us-form .form-control::placeholder{
	color:var(--primary-color);
	opacity:0.2;
}

#msgSubmit{ margin-top:15px !important; color:#FFFFFF !important; }
#msgSubmit.text-success{ color:#FFFFFF !important; }
#msgSubmit.text-danger{ color:#FFFFFF !important; }

/************************************/
/*** 12. Responsive              ***/
/************************************/
@media only screen and (max-width: 991px){
	.navbar{ padding:20px 0; }

	.section-row{ margin-bottom:40px; }
	.section-title{ margin-bottom:30px; }

	.section-title h1{ font-size:50px; }
	.section-title h2{ font-size:38px; }

	.ai-agent-hero{
		padding:130px 0 60px;
	}

	.ai-agent-video-wrap{
		max-width:440px;
		margin-bottom:26px;
	}

	.ai-agent-hero-content .section-title h1{
		font-size:44px;
	}

	.ai-agent-hero-text h2{
		font-size:22px;
	}

	.hero{
		padding:140px 0 80px;
	}

	.our-scrolling-ticker{ padding:15px 0; }
	.scrolling-ticker-box{ --gap:40px; }

	.about-us{ padding:80px 0 40px; }
	.our-services{ padding:40px 0; }
	.our-feature{ padding:40px 0 10px; }
	.how-it-work{ padding:40px 0 10px; }

	.contact-us-form{ padding:30px; }
}

@media only screen and (max-width: 767px){
	.section-title h1{ font-size:30px; }
	.section-title h2{ font-size:26px; }

	.ai-agent-hero{
		padding:115px 0 45px;
	}

	/* Mobile: vidéo moins énorme + ratio un peu moins haut */
	.ai-agent-video-wrap{
		max-width:320px;
	}

	.ai-agent-video-frame::before{
		padding-top:155%;
	}

	.ai-agent-video-overlay-icon{
		width:50px;
		height:50px;
		font-size:20px;
	}

	.ai-agent-video-overlay-text{
		font-size:13px;
		padding:8px 12px;
	}

	.ai-agent-hero-content .section-title h1{
		font-size:34px;
		line-height:1.08em;
	}

	.ai-agent-hero-content .section-title p{
		font-size:16px;
	}

	.hero-content-btn{ gap:15px; }

	.scrolling-ticker-box p{ font-size:18px; }

	.how-work-step-box{ padding:20px; }
	.contact-us-form{ padding:20px; }
}

/* ================================
   AI AGENT VIDEO SIZE FIX
   ================================ */

/* limite la largeur globale */
.ai-agent-video-wrap{
  width:100%;
  max-width:380px;
  margin:0 auto;
}

/* cadre portrait */
.ai-agent-video-frame{
  position:relative;
  width:100%;
  max-height:680px;
}

/* ratio portrait réel */
.ai-agent-video-frame::before{
  content:"";
  display:block;
  padding-top:177.78%;
}

/* video bien proportionnée */
.ai-agent-video-player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* MOBILE */
@media (max-width: 767px){

  .ai-agent-video-wrap{
    max-width:320px;
  }

  .ai-agent-video-frame{
    max-height:60vh;
    aspect-ratio:9/16;
  }

  .ai-agent-video-frame::before{
    display:none;
  }
}


/************************************/
/*** 13. Cleanup old duplicates  ***/
/************************************/
.video-play-button{ display:none !important; }
.video-wrapper{ display:contents; }