:root {
 --green: #00d9a8;
 --green-dark: #00a97a;
 --navy: #031522;
 --navy-2: #062333;
 --text: #102438;
 --muted: #657487;
 --soft: #f5fafb;
 --border: #e3edf0;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: "Inter", sans-serif;
	color: var(--text);
	background: #fff;
	line-height: 1.55;
}
a {
	text-decoration: none;
}
.container {
	max-width: 1180px;
}
.navbar {
	background: var(--navy);
	padding: 16px 0;
}
.navbar-brand {
	color: #fff !important;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.7px;
}
.brand-mark {
	width: 27px;
	height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--green);
	font-size: 26px;
	margin-right: 7px;
}
.navbar .nav-link {
	color: #fff !important;
	font-size: 15px;
	font-weight: 500;
	padding: 9px 13px !important;
}
.navbar .nav-link:hover {
	color: var(--green) !important;
}
.btn-green {
	background: var(--green);
	color: #03251e;
	border: 1px solid var(--green);
	font-weight: 700;
	border-radius: 8px;
	padding: 11px 18px;
	font-size: 16px;
	transition: .25s ease;
}
.btn-green:hover {
	background: #36f2b1;
	color: #03251e;
	transform: translateY(-1px);
}
.btn-outline-light-green {
	color: #fff;
	border: 1px solid #74cbbb;
	background: transparent;
	border-radius: 8px;
	padding: 10px 17px;
	font-size: 16px;
	font-weight: 600;
}
.hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: radial-gradient(circle at 72% 45%, rgba(0, 237, 174, .18), transparent 25%),  radial-gradient(circle at 90% 15%, rgba(0, 177, 255, .13), transparent 25%),  linear-gradient(115deg, #041b27 0%, #032331 52%, #00131d 100%);
	padding: 15px 0 25px;
}
.hero-art {
	display: flex;
	align-items: center;
	justify-content: center;
}
.heroimg {
	width: 100%;
	max-width: 600px;
	height: auto;
	animation: floatingHero 3.5s ease-in-out infinite;
	will-change: transform;
}
 @keyframes floatingHero {
 0% {
 transform: translateY(0);
}
 50% {
 transform: translateY(-18px);
}
 100% {
 transform: translateY(0);
}
}
.hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0,255,194,.04) 1px, transparent 1px),  linear-gradient(90deg, rgba(0,255,194,.04) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(to right, transparent 0%, black 55%, transparent 100%);
	pointer-events: none;
}
.hero-content {
	position: relative;
	z-index: 2;
}
.eyebrow {
	display: inline-block;
	color: var(--green);
	background: rgba(16, 230, 155, .12);
	border: 1px solid rgba(16, 230, 155, .3);
	border-radius: 30px;
	padding: 6px 13px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}
.hero h1 {
	font-size: clamp(42px, 5vw, 55px);
	line-height: .98;
	font-weight: 800;
	margin: 18px 0;
	max-width: 650px;
}
.hero h1 span {
	color: var(--green);
}
.hero p {
	color: #c1d2d9;
	max-width: 560px;
	font-size: 17px;
}
.hero-visual {
	min-height: 365px;
	position: relative;
}
.cube {
	position: absolute;
	width: 108px;
	height: 108px;
	transform: rotate(30deg) skewY(-7deg);
	border: 1px solid rgba(36,255,200,.75);
	background: linear-gradient(135deg, rgba(16,230,155,.2), rgba(19,73,105,.2));
	box-shadow: 0 0 45px rgba(0,245,189,.18), inset 0 0 35px rgba(0,245,189,.1);
}
.cube:before, .cube:after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(91,255,220,.45);
}
.cube.big {
	width: 160px;
	height: 160px;
	left: 42%;
	top: 29%;
	box-shadow: 0 0 75px rgba(0,245,189,.28), inset 0 0 45px rgba(0,245,189,.12);
}
.cube.one {
	left: 28%;
	top: 13%;
}
.cube.two {
	right: 4%;
	top: 22%;
	width: 82px;
	height: 82px;
}
.cube.three {
	left: 20%;
	bottom: 10%;
	width: 82px;
	height: 82px;
}
.cube.four {
	right: 23%;
	bottom: 4%;
	width: 76px;
	height: 76px;
}
.float-label {
	position: absolute;
	border: 1px solid rgba(16,230,155,.65);
	background: rgba(2, 26, 39, .72);
	color: #fff;
	padding: 7px 13px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	backdrop-filter: blur(7px);
}
.label-defi {
	left: 20%;
	top: 36%;
}
.label-nft {
	right: 26%;
	top: 5%;
}
.label-wallet {
	right: 0;
	top: 43%;
}
.label-dex {
	left: 22%;
	bottom: 25%;
}
.impact {
	position: absolute;
	right: 1%;
	bottom: 4%;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}
.stats {
	margin-top: 27px;
}
.stat-number {
	color: var(--green);
	font-size: 24px;
	font-weight: 800;
}
.stat-label {
	font-size: 12px;
	color: #b9cbd1;
}
section {
	padding:35px 0px 40px;
}
.section-soft {
	background: #e8efff;
}
.section-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0px;
	margin-bottom: 7px;
}
.section-desc {
	color: var(--muted);
	font-size: 15px;
	max-width: 620px;
}
.section-head {
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 15px;
}
.outline-btn {
	border: 1px solid #9eb2ba;
	color: #203744;
	background: var(--green);
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.outline-btn:hover {
	background: var(--green);
}
.chains {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-top: 25px;
}
.chain {
	min-width: 85px;
	text-align: center;
	color: #667786;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid #d2d8eb;
	padding: 5px;
	border-radius: 10px;
}
.chain-icon {
	width: 39px;
	height: 39px;
	border-radius: 50%;
	margin: 0 auto 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef5ff;
	color: #4079dd;
	font-size: 18px;
}
.service-card,  .project-card,  .trust-card,  .testimonial-card {
	height: 100%;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 14px 30px rgba(8, 48, 64, .1);
	transition: .25s ease;
}
.service-card:hover,  .project-card:hover,  .trust-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(8, 48, 64, .1);
}
.service-card {
	padding: 20px;
}
.service-icon {
	width: 50px;
	height: 50px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #00d6a1, #10b6e8);
	margin-bottom: 14px;
	font-size: 26px;
}
.service-card h5 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 8px;
}
.service-card p,  .project-card p,  .trust-card p,  .testimonial-card p {
	color: var(--muted);
	font-size: 15px;
	margin-bottom: 12px;
}
.learn {
	color: #16cd50;
	font-size: 14px;
	font-weight: 500;
}
.project-img {
	height: 185px;
	object-fit: cover;
	width: 100%;
	border-radius: 10px 10px 0 0;
}
.project-body {
	padding: 16px;
}
.project-body h5 {
	font-size: 20px;
	font-weight: 700;
}
.trust-card {
	padding: 20px;
	text-align: center;
}
.trust-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e7fbf4;
	color: #00a97a;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}
.trust-card h6 {
	font-size: 12px;
	font-weight: 800;
}
.process-wrap {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 35px;
}
.process-wrap:before {
	content: "";
	position: absolute;
	left: 9%;
	right: 9%;
	top: 35px;
	height: 1px;
	background: #cce0e5;
}
.process {
	position: relative;
	z-index: 2;
	width: 20%;
	text-align: center;
}
.process-number {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #aaf9c6;
	border: 5px solid #fff;
	box-shadow: 0 0 0 1px #bde1e6;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	font-size: 22px;
}
.process h6 {
	font-size: 20px;
	font-weight: 800;
}
.process p {
	font-size: 16px;
	color: var(--muted);
}
.testimonial-card {
	padding: 22px;
}
.quote {
	color: #10b98c;
	font-size: 45px;
	line-height: 22px;
}
.avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: cover;
}
.stars {
	color: #ffb900;
	font-size: 20px;
}
.developer-cta {
	padding: 55px 0;
	color: #fff;
	background: linear-gradient(90deg, rgba(0,25,34,.96), rgba(0,57,64,.83)),  url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1600&q=85") center/cover;
}
.developer-cta h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.05;
}
.check-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.check-list li {
	font-size: 18px;
	margin: 10px 0;
	color: #dcecef;
}
.check-list i {
	color: var(--green);
	margin-right: 8px;
}
.final-cta {
	background: linear-gradient(90deg, #f0ffff, #fff);
	overflow: hidden;
}
.final-visual {
	height: 180px;
	position: relative;
	background: radial-gradient(circle at 55% 50%, rgba(16,230,155,.3), transparent 20%),  linear-gradient(135deg, transparent, rgba(25,193,255,.08));
}
.final-cube {
	position: absolute;
	width: 78px;
	height: 78px;
	right: 22%;
	top: 45px;
	transform: rotate(30deg);
	border: 1px solid #3ccde5;
	background: linear-gradient(135deg, rgba(0,217,164,.3), rgba(55,96,255,.15));
	box-shadow: 0 0 35px rgba(0,210,180,.25);
}
footer {
	color: #b7c9cf;
	background: #031521;
	padding: 48px 0 18px;
}
footer .brand {
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}
footer h6 {
	color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 15px;
}
footer a {
	display: block;
	color: #9fb4bb;
	font-size: 14px;
	margin: 7px 0;
}
footer a:hover {
	color: var(--green);
}
.about-copy .vs-icon{stroke: rgb(9 64 41) !important;}
.values .vs-icon{stroke: rgb(9 64 41) !important;}
.btn .vs-icon{stroke: rgb(9 64 41) !important;}
.launchpad-btn-primary .vs-icon{stroke: rgb(255 255 255) !important;}
.wallet-btn-primary .vs-icon{stroke: rgb(255 255 255) !important;}
.token-btn-primary .vs-icon{stroke: rgb(255 255 255) !important;}
.token-cta-box .vs-icon{stroke: rgb(255 255 255) !important;}
.nft-buttons .vs-icon{stroke: rgb(255 255 255) !important;}
.nft-creator-btn .vs-icon{stroke: rgb(255 255 255) !important;}
.socials a {
	display: inline-flex;
	width: 33px;
	height: 33px;
	border:2px solid #34505c;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
	color: var(--green);
}
.newsletter {
	display: flex;
	border: 1px solid #34505c;
	border-radius: 7px;
	overflow: hidden;
	max-width: 280px;
}
.newsletter input {
	width: 100%;
	min-width: 0;
	background: #092432;
	border: 0;
	outline: 0;
	color: #fff;
	padding: 10px;
	font-size: 14px;
}
.newsletter button {
	width: 43px;
	border: 0;
	background: var(--green);
	color: #02271f;
}
.copyright {
	border-top: 1px solid #1c3642;
	margin-top: 35px;
	padding-top: 15px;
	font-size: 13px;
}
/* ===== UPDATED MATCHING SECTIONS ===== */
.hero-art {
	position: relative;
	width: 100%;
	min-height: 390px;
	background: radial-gradient(circle at 50% 50%, rgba(14,236,174,.20), transparent 18%),  radial-gradient(circle at 65% 30%, rgba(34,159,255,.13), transparent 32%);
	overflow: hidden;
}
.hero-art:before {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(30deg);
	border: 1px solid rgba(33,238,191,.42);
	box-shadow: 0 0 90px rgba(0,238,184,.18), inset 0 0 70px rgba(0,238,184,.06);
}
.hero-center-cube {
	position: absolute;
	width: 135px;
	height: 135px;
	left: 50%;
	top: 47%;
	transform: translate(-50%, -50%) rotate(30deg);
	background: linear-gradient(135deg, rgba(19,255,202,.76), rgba(25,109,135,.26));
	border: 1px solid rgba(113,255,226,.9);
	box-shadow: 0 0 55px rgba(20,244,189,.58), inset 0 0 35px rgba(255,255,255,.22);
}
.hero-center-cube:before {
	content: "";
	position: absolute;
	inset: 25px;
	border: 1px solid rgba(190,255,241,.75);
	background: rgba(31,255,204,.13);
}
.mini-cube {
	position: absolute;
	width: 65px;
	height: 65px;
	transform: rotate(30deg);
	border: 1px solid rgba(53,240,202,.65);
	background: linear-gradient(135deg, rgba(31,255,205,.48), rgba(30,77,110,.25));
	box-shadow: 0 0 28px rgba(15,234,180,.25);
}
.mini-1 {
	left: 20%;
	top: 52%
}
.mini-2 {
	right: 12%;
	top: 42%;
	width: 58px;
	height: 58px
}
.mini-3 {
	left: 35%;
	bottom: 11%;
	width: 55px;
	height: 55px
}
.mini-4 {
	right: 30%;
	bottom: 9%;
	width: 50px;
	height: 50px
}
.hero-line {
	position: absolute;
	height: 1px;
	background: linear-gradient(90deg, transparent, #27f0c4, transparent);
	transform-origin: left center;
	opacity: .8
}
.hl1 {
	width: 145px;
	left: 16%;
	top: 45%;
	transform: rotate(22deg)
}
.hl2 {
	width: 145px;
	left: 54%;
	top: 52%;
	transform: rotate(-22deg)
}
.hl3 {
	width: 130px;
	left: 34%;
	bottom: 20%;
	transform: rotate(-27deg)
}
.hero-tag {
	position: absolute;
	padding: 7px 13px;
	border: 1px solid rgba(91,245,214,.5);
	border-radius: 6px;
	background: rgba(4,30,43,.78);
	color: #dffefa;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(0,0,0,.15)
}
.ht1 {
	left: 8%;
	top: 36%
}
.ht2 {
	right: 24%;
	top: 10%
}
.ht3 {
	right: 0;
	top: 37%
}
.ht4 {
	left: 12%;
	bottom: 25%
}
.hero-idea {
	position: absolute;
	right: 0;
	bottom: 9%;
	font-size: 11px;
	color: #d7eeee;
	text-align: center
}
.hero-idea b {
	display: block;
	font-size: 14px
}
.chain-logo-img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	border-radius: 50%;
	padding: 5px;
	background: #f6f9fb;
	box-shadow: 0 5px 14px rgba(17,60,80,.07)
}
.chain .chain-icon {
	background: transparent;
	width: 42px;
	height: 42px;
	margin-bottom: 8px
}
.project-img {
	height: 205px;
	background: #071a27
}
.project-img.project-echo {
	object-position: center
}
.project-img.project-wallet {
	object-position: center
}
.partner-grid-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 22px;
	height: 100%;
	box-shadow: 0 8px 22px rgba(8,48,64,.05);
	display: flex;
	align-items: flex-start;
	gap: 14px
}
.partner-grid-icon {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #aaf9c6;
	color: #000;
	font-size: 20px
}
.partner-grid-card h6 {
	font-size: 22px;
	font-weight: 700;
	margin: 2px 0 7px;
}
.partner-grid-card p {
	font-size: 14px;
	color: var(--muted);
	margin: 0
}
 @media (max-width: 991px) {
.hero {
	padding-top: 45px;
}
.hero-visual {
	min-height: 310px;
	margin-top: 20px;
}
.chains {
	justify-content: flex-start;
}
.process-wrap {
	flex-wrap: wrap;
}
.process {
	width: 30%;
	margin-bottom: 20px;
}
.process-wrap:before {
	display: none;
}
}
 @media (max-width: 767px) {
section {
	padding: 42px 0;
}
.hero h1 {
	font-size: 43px;
	letter-spacing: -2px;
}
.hero-visual {
	min-height: 270px;
}
.cube.big {
	width: 120px;
	height: 120px;
	left: 38%;
}
.cube.one {
	left: 20%;
}
.section-head {
	align-items: flex-start;
	flex-direction: column;
}
.chains {
	gap: 12px;
}
.chain {
	min-width: 62px;
}
.process {
	width: 100%;
}
.developer-cta h2 {
	font-size: 29px;
}
.project-img {
	height: 210px;
}
}
.heroimg {
	width: 100%;
}
.vicon {
	width: 200px;
	float: right;
}
/* ================= INNER PAGE SYSTEM ================= */
.inner-hero {
	    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 80% 30%, rgb(0 255 166 / 50%), transparent 28%), linear-gradient(115deg, #0b2d4c, #006657 55%, #00131d);
    color: #fff;
    padding: 40px 0 32px;
}
.inner-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0,255,194,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,194,.035) 1px, transparent 1px);
	background-size: 42px 42px;
	pointer-events: none
}
.inner-hero .container {
	position: relative;
	z-index: 2
}
.inner-hero h1 {
	font-size: clamp(38px, 5vw, 40px);
	font-weight: 800;
	line-height: 1.05;
	margin: 14px 0px 5px;
}
.inner-hero h1 span {
	color: var(--green)
}
.inner-hero p {
	max-width: 720px;
	color: #fff;
	font-size: 16px
}
.crumb {
	font-size: 12px;
	color: #ffffff;
  margin-bottom: 15px;
}
.crumb a {
	color: var(--green)
}
.page-section {
	padding:50px 0
}
.page-section.soft {
	background: #e4efff;
}
.page-title {
	font-size: clamp(29px, 4vw, 43px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--text);
	margin-bottom: 12px
}
.page-desc {
	color: var(--muted);
	font-size: 16px;
}
.eyebrow-dark {
	display: inline-block;
	color:#0ac198;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	margin-bottom: 9px
}
.inner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px
}
.inner-grid.two {
	grid-template-columns: repeat(2, 1fr)
}
.info-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 26px;
	box-shadow: 0 12px 30px rgba(10,50,70,.06);
	transition: .25s
}
.info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 38px rgba(10,50,70,.1)
}
.info-card .ic {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: var(--green-dark);
	background: #e6faf3;
	margin-bottom: 17px;
	font-size: 18px
}
.info-card h3 {
	font-size: 17px;
	margin-bottom: 8px
}
.info-card p {
	font-size: 12px;
	color: var(--muted);
	margin: 0
}
.info-card a {
	display: inline-block;
	margin-top: 15px;
	color: var(--green-dark);
	font-weight: 700;
	font-size: 12px
}
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center
}
.visual-panel {
	min-height: 370px;
	border-radius: 22px;
	background: linear-gradient(145deg, #e8fff7, #edf4ff);
	border: 1px solid #dce9ee;
	position: relative;
	overflow: hidden;
	padding: 30px
}
.visual-panel .window {
	position: absolute;
	left: 12%;
	right: 12%;
	top: 15%;
	bottom: 15%;
	background: var(--navy);
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 25px 50px rgba(3,21,34,.2)
}
.mini-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 12px;
	height: 100%
}
.mini-box {
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 12px;
	background: #082b39;
	padding: 14px
}
.mini-box.tall {
	grid-row: span 2
}
.mini-icon {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: rgba(16,230,155,.1);
	color: var(--green);
	border: 1px solid rgba(16,230,155,.25);
	margin: 8px auto 20px
}
.mini-line {
	height: 6px;
	border-radius: 20px;
	background: rgba(16,230,155,.6);
	margin: 9px 0
}
.mini-line.muted {
	width: 55%;
	background: rgba(255,255,255,.12)
}
.badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px
}
.tag {
	padding: 7px 11px;
	border-radius: 30px;
	background: #e9f9f4;
	color: #087d61;
	font-size: 11px;
	font-weight: 700;
	border: 1px solid #ccefe4
}
.feature-list {
	display: grid;
	gap: 14px;
	margin-top: 24px
}
.feature-list li {
	list-style: none;
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: var(--muted)
}
.feature-list i {
	color: var(--green-dark);
	margin-top: 4px
}
.dark-panel {
	background: var(--navy);
	color: #fff;
	border-radius: 22px;
	padding: 42px
}
.dark-panel h2 {
	font-size: 32px;
	line-height: 1.15
}
.dark-panel p {
	color: #a9bec7;
	font-size: 13px
}
.dark-panel .tag {
	background: rgba(16,230,155,.09);
	border-color: rgba(16,230,155,.2);
	color: var(--green)
}
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}
.portfolio-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 17px;
	box-shadow: 0 10px 25px rgba(10,50,70,.06)
}
.portfolio-card img {
	height: 205px;
	object-fit: cover
}
.portfolio-body {
	padding: 20px
}
.portfolio-body h3 {
	font-size: 18px
}
.portfolio-body p {
	font-size: 12px;
	color: var(--muted)
}
.portfolio-meta {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin: 12px 0
}
.portfolio-meta span {
	font-size: 10px;
	font-weight: 700;
	color: #087d61;
	background: #e8faf4;
	padding: 5px 8px;
	border-radius: 20px
}
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}
.blog-card {
	border:1px solid #bbcdd3;
	border-radius: 17px;
	overflow: hidden;
	background: #fff
}
.blog-card img {
	height: 190px;
	object-fit: cover
}
.blog-body {
	padding: 20px
}
.blog-body .date {
	    font-size: 13px;
    color: var(--green-dark);
    font-weight: 600;
    text-transform: uppercase;
}
.blog-body h3 {
	font-size:22px;
	line-height: 1.25;
	margin: 7px 0
}
.blog-body p {
	font-size: 12px;
	color: var(--muted)
}
.contact-grid {
	display: grid;
grid-template-columns:.8fr 1.2fr;
	gap: 35px
}
.contact-cards {
	display: grid;
	gap: 13px
}
.contact-card {
	display: flex;
	gap: 14px;
	padding: 19px;
	border:1px solid #aec9d1;
	border-radius: 14px;
	background: #fff
}
.contact-card .ic {
	flex: 0 0 42px;
	height: 42px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: #c2f7e6;
	color: var(--green-dark)
}
.contact-card h4 {
	font-size: 17px;
	margin-bottom: 2px
}
.contact-card p {
	font-size: 15px;
	color: var(--muted);
	margin: 0
}
.contact-form {
	background: #fff;
	border: 1px solid #aec9d1;
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 15px 35px rgba(10,50,70,.06)
}
.contact-form label {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px
}
.contact-form input, .contact-form textarea, .contact-form select {
	width: 100%;
	border: 1px solid #92adbb;
	border-radius: 9px;
	padding: 12px 13px;
	font: inherit;
	font-size: 13px;
	outline: none
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
	border-color: var(--green)
}
.contact-form textarea {
	min-height: 130px;
	resize: vertical
}
.product-hero {
	background: linear-gradient(135deg, #eafff8, #edf4ff);
	border: 1px solid #dceaf0;
	border-radius: 22px;
	padding: 45px
}
.product-hero h2 {
	font-size: 38px;
	line-height: 1.1
}
.product-icon {
	width: 68px;
	height: 68px;
	border-radius: 18px;
	background: var(--navy);
	color: var(--green);
	display: grid;
	place-items: center;
	font-size: 26px;
	margin-bottom: 20px
}
.tool-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px
}
.tool-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 20px;
	text-align: center
}
.tool-card .ic {
	width: 45px;
	height: 45px;
	margin: 0 auto 12px;
	border-radius: 12px;
	background: #e8faf4;
	color: var(--green-dark);
	display: grid;
	place-items: center
}
.tool-card h4 {
	font-size: 14px
}
.tool-card p {
	font-size: 11px;
	color: var(--muted)
}
.timeline {
	position: relative;
	display: grid;
	gap: 18px
}
.timeline:before {
	content: "";
	position: absolute;
	left: 22px;
	top: 15px;
	bottom: 15px;
	width: 2px;
	background: #cfeee4
}
.timeline-item {
	position: relative;
	padding-left: 62px
}
.timeline-dot {
	position: absolute;
	left: 10px;
	top: 2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--green);
	color: #043329;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 800;
	z-index: 1
}
.timeline-item h3 {
	font-size: 16px
}
.timeline-item p {
	font-size: 12px;
	color: var(--muted)
}
@media(max-width:900px) {
.inner-grid, .portfolio-grid, .blog-grid {
	grid-template-columns: repeat(2, 1fr)
}
.split, .contact-grid {
	grid-template-columns: 1fr;
	gap: 35px
}
.tool-grid {
	grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:600px) {
.inner-hero {
	padding: 58px 0
}
.page-section {
	padding: 60px 0
}
.inner-grid, .portfolio-grid, .blog-grid, .tool-grid {
	grid-template-columns: 1fr
}
.dark-panel, .product-hero {
	padding: 28px
}
.visual-panel {
	min-height: 320px
}
.inner-hero h1 {
	font-size: 40px
}
}
/* ===== SERVICES DROPDOWN + SERVICE DETAIL PAGES ===== */
.navbar .dropdown-menu {
	min-width: 255px;
	padding: 10px;
	border: 1px solid rgba(0,211,155,.18);
	border-radius: 14px;
	background: #061f2c;
	box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
.navbar .dropdown-item {
	color: #fff;
	border-radius: 9px;
	padding: 9px 11px;
	font-size: 12px;
}
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
	color: #00d39b;
	background: rgba(0,211,155,.08);
}
.navbar .dropdown-item i {
	width: 20px;
	color: #00d39b;
}
.service-detail-hero {
	position: relative;
	overflow: hidden;
	padding: 86px 0 76px;
	color: #fff;
	background: radial-gradient(circle at 80% 20%, rgba(0,211,155,.18), transparent 28%), #031b27;
}
.service-detail-hero:after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(0,211,155,.10);
	border-radius: 50%;
	right: -130px;
	top: -160px;
}
.service-detail-hero .crumb {
	color: #8faab5;
	font-size: 12px;
	margin-bottom: 22px;
	position: relative;
	z-index: 2;
}
.service-detail-hero .crumb a {
	color: #bcd0d8;
}
.service-detail-hero .service-icon-large {
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 17px;
	background: rgba(0,211,155,.12);
	border: 1px solid rgba(0,211,155,.3);
	color: #00d39b;
	font-size: 25px;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.service-detail-hero h1 {
	font-size: clamp(36px, 3vw, 58px);
	line-height: 1.06;
	max-width: 760px;
	position: relative;
	z-index: 2;
}
.service-detail-hero h1 span {
	color: #00d39b;
}
.service-detail-hero p {
	max-width: 690px;
	color: #abc0c9;
	font-size: 15px;
	margin: 18px 0 0;
	position: relative;
	z-index: 2;
}
.service-detail-hero .hero-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 27px;
	position: relative;
	z-index: 2;
}
.service-feature-grid {
	display: grid;
grid-template-columns:1.08fr .92fr;
	gap: 55px;
	align-items: center;
}
.service-feature-copy h2 {
	font-size:44px;
	line-height: 1.14;
	letter-spacing: 0px;
	margin-bottom: 14px;
}
.service-feature-copy p {
	color: #617580;
	font-size:16px;
}
.service-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 18px;
	margin-top: 24px;
}
.service-check {
	display: flex;
	gap: 10px;
	color: #304955;
	font-size: 12px;
}
.service-check i {
	color: #00b982;
	margin-top: 4px;
}
.service-visual {
	min-height: 380px;
	padding: 28px;
	border-radius: 25px;
	background: linear-gradient(145deg, #edfaff, #e8fff8);
	border: 1px solid #d9e9ef;
	position: relative;
	overflow: hidden;
}
.service-visual:before {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	border: 1px solid rgba(0,185,130,.14);
	right: -100px;
	top: -100px;
}
.service-ui {
	position: absolute;
	left: 5%;
	right: 5%;
	top: 8%;
	bottom: 8%;
	background: #031b27;
	border-radius: 18px;
	box-shadow: 0 24px 50px rgba(3,27,39,.18);
	border: 1px solid rgba(0,211,155,.25);
	padding: 18px;
}
.service-ui-top {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
}
.service-ui-top span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4c6671;
}
.service-ui-grid {
	display: grid;
grid-template-columns:1.2fr .8fr;
	gap: 10px;
	height: 80%;
}
.service-ui-card {
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	background: #082b39;
	padding: 13px;
}
.service-ui-card.tall {
	grid-row: span 2;
}
.service-ui-icon {
	width: 45px;
	height: 45px;
	border-radius: 12px;
	background: rgba(0,211,155,.12);
	border: 1px solid rgba(0,211,155,.3);
	display: grid;
	place-items: center;
	color: #00d39b;
	font-size: 18px;
	margin-bottom: 15px;
}
.service-line {
	height: 6px;
	border-radius: 20px;
	background: rgba(0,211,155,.55);
	margin: 9px 0;
	width: 76%;
}
.service-line.muted {
	width: 45%;
	background: rgba(255,255,255,.12);
}
.service-capabilities {
	background: linear-gradient(135deg, #eaf6ff, #e8fff8);
}
.service-cap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px;
}
.service-cap {
	background: #fff;
	border: 1px solid #dce8ef;
	border-radius: 26px;
	padding: 25px;
	box-shadow: 0 12px 30px rgba(20,70,90,.06);
	transition: .25s;
}
.service-cap:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 35px rgba(20,70,90,.10);
}
.service-cap .cap-icon {
	width: 55px;
	height: 55px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: #e8fbf5;
	color: #00b982;
	margin-bottom: 15px;
}
.service-cap h3 {
	font-size: 20px;
	margin-bottom: 7px;
}
.service-cap p {
	font-size: 12px;
	color: #647983;
	margin: 0;
	margin-bottom: 12px;
}
.service-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.service-process .vs-icon{width:3em; height: 3em;}
.service-step {
	text-align: center;
	padding: 15px;
}
.service-step .num {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0 auto 15px;
	background: #fff;
	color: #00b982;
	border: 1px solid #66dfba;
	box-shadow: 0 0 0 7px #effbf7;
	font-weight: 800;
}
.service-step h4 {
	font-size: 22px;
    margin-bottom: 5px;
    font-weight: 700;
}
.service-step p {
	font-size: 14px;
	color: #6a7e87;
}
.service-cta {
	background: #031b27;
	color: #fff;
	padding:45px 0;
}
.service-cta-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}
.service-cta h2 {
	font-size: 35px;
    line-height: 1.15;
    margin-bottom: 8px;
    font-weight: 700;
}
.service-cta p {
	color: #9fb5be;
	font-size: 16px;
	margin: 0;
}
@media(max-width:900px) {
.service-feature-grid {
	grid-template-columns: 1fr
}
.service-cap-grid {
	grid-template-columns: repeat(2, 1fr)
}
.service-process {
	grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:600px) {
.service-cap-grid, .service-process {
	grid-template-columns: 1fr
}
.service-checks {
	grid-template-columns: 1fr
}
.service-cta-box {
	display: block
}
.service-cta .btn {
	margin-top: 20px
}
}
/* ===== GLOBAL TYPOGRAPHY + INLINE SVG ICON SYSTEM ===== */
:root {
--body-size:15px;
--small-size:13px;
--xs-size:12px
}
html {
	font-size: 16px;
	scroll-behavior: smooth
}
body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: var(--body-size);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility
}

.navbar .dropdown-item {
	font-size: 15px;
	line-height: 1.35
}
.btn {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2
}
.hero h1, .inner-hero h1, .service-detail-hero h1 {
	font-weight: 800
}
.hero p, .inner-hero p, .service-detail-hero p {
	line-height: 1.75
}
.section-head h2, .page-title, .service-feature-copy h2 {
	font-weight: 800
}
.info-card h3, .portfolio-body h3, .blog-body h3, .service-cap h3 {
	font-weight: 750;
	line-height: 1.3
}
.info-card p, .portfolio-body p, .blog-body p, .service-cap p, .tool-card p, .timeline-item p {
	font-size: 15px;
	line-height: 1.7
}
.feature-list li, .service-check {
	font-size: 15px;
	line-height: 1.55
}
.eyebrow, .eyebrow-dark, .crumb {
	font-size: 14px;
	line-height: 1.4
}
/* Replace Font Awesome visual icons with clean inline SVGs */
.vs-icon {
	display: inline-block;
	width: 2em;
	height: 2em;
	vertical-align: -.14em;
	fill: none;
	stroke: rgb(4 201 117);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
	vertical-align: bottom;
}
.inner-hero .vs-icon {width: 1em; height: 1em;}
.vs-icon-fill {
	fill: currentColor;
	stroke: none
}
.navbar .dropdown-item .vs-icon {
	width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -5px;
    color: #00d39b;
}
.btn .vs-icon {
	width: 14px;
	height: 14px;
	vertical-align: -2px
}
.service-icon-large .vs-icon {
	width: 28px;
	height: 28px
}
.cap-icon .vs-icon, .info-card .ic .vs-icon, .tool-card .ic .vs-icon {
	width: 40px;
	height: 40px
}
.product-icon .vs-icon {
	width: 28px;
	height: 28px
}
.socials a .vs-icon {
	width: 16px;
	height: 16px
}
/* Image treatment for remotely hosted visuals */
img[src^="https://images.unsplash.com"] {
	display: block;
	width: 100%;
	object-fit: cover
}
.heroimg {
	object-fit: cover;
	object-position: center;
	border-radius: 22px
}
 @media(max-width:991.98px) {
.navbar .nav-link {
	font-size: 14px
}
.navbar .dropdown-menu {
	margin-top: 8px
}
}
@media(max-width:600px) {
body {
	font-size: 14px
}
.hero p, .inner-hero p, .service-detail-hero p {
	font-size: 14px
}
.page-section {
	padding: 58px 0
}
.page-title {
	font-size: 30px
}
.service-feature-copy h2 {
	font-size: 30px
}
.service-detail-hero h1 {
	font-size: 38px
}
.service-detail-hero p {
	font-size: 14px
}
.info-card h3, .portfolio-body h3, .blog-body h3 {
	font-size: 17px
}
}
/* ===== HIRE DEVELOPERS PAGE ===== */
.hire-hero {
	position: relative;
	overflow: hidden;
	padding: 82px 0 86px;
	background: radial-gradient(circle at 78% 25%, rgba(0,211,155,.18), transparent 28%), linear-gradient(115deg, #031a26, #062b38 58%, #031923);
	color: #fff
}
.hire-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0,211,155,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,211,155,.035) 1px, transparent 1px);
	background-size: 42px 42px
}
.hire-hero .container {
	position: relative;
	z-index: 2
}
.hire-hero h1 {
	font-size: clamp(42px, 5.6vw, 68px);
	line-height: 1.03;
	letter-spacing: -2.4px;
	font-weight: 800;
	max-width: 760px;
	margin: 18px 0
}
.hire-hero h1 span {
	color: #00d39b
}
.hire-hero p {
	max-width: 670px;
	color: #b7cbd3;
	font-size: 16px;
	line-height: 1.8
}
.hire-hero .crumb {
	margin-bottom: 20px
}
.hire-hero .crumb a {
	color: #00d39b
}
.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px
}
.hire-trust {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 25px;
	color: #a8bec7;
	font-size: 11px
}
.hire-trust i {
	color: #00d39b;
	margin-right: 5px
}
.hire-visual {
	position: relative;
	border-radius: 28px;
	padding: 10px;
	background: linear-gradient(145deg, rgba(0,211,155,.25), rgba(255,255,255,.06));
	box-shadow: 0 35px 80px rgba(0,0,0,.28);
	transform: rotate(1deg)
}
.hire-visual img {
	width: 100%;
	height: 470px;
	object-fit: cover;
	border-radius: 21px;
	filter: saturate(.85) contrast(1.03)
}
.hire-floating {
	position: absolute;
	left: -25px;
	bottom: 28px;
	background: #fff;
	color: #062532;
	border-radius: 15px;
	padding: 15px 18px;
	box-shadow: 0 18px 45px rgba(0,0,0,.25);
	display: flex;
	flex-direction: column;
	gap: 2px
}
.hire-floating strong {
	font-size: 14px
}
.hire-floating span {
	font-size: 10px;
	color: #70818a
}
.hire-role-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px
}
.hire-role {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 19px;
	padding: 25px;
	box-shadow: 0 12px 35px rgba(10,50,70,.05);
	transition: .25s
}
.hire-role:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 42px rgba(10,50,70,.1);
	border-color: #bdebdc
}
.hire-role-icon {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: #e7faf4;
	color: #00ad7d;
	font-size: 19px
}
.role-no {
	font-size: 10px;
	color: #00a878;
	font-weight: 800;
	letter-spacing: 1px
}
.hire-role h3 {
	font-size: 18px;
	margin: 5px 0 7px
}
.hire-role p {
	font-size: 12px;
	color: #687c85;
	line-height: 1.7;
	margin: 0
}
.hire-dark {
	padding: 86px 0;
	background: #031b27;
	color: #fff;
	position: relative;
	overflow: hidden
}
.hire-dark:after {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	border: 1px solid rgba(0,211,155,.12);
	border-radius: 50%;
	right: -220px;
	top: -180px
}
.hire-dark .container {
	position: relative;
	z-index: 2
}
.hire-dark h2 {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -1.2px;
	margin: 10px 0 14px
}
.hire-dark p {
	color: #a9bec7;
	font-size: 14px;
	line-height: 1.8;
	max-width: 560px
}
.hire-points {
	display: grid;
	gap: 17px;
	margin-top: 30px
}
.hire-points>div {
	display: flex;
	gap: 13px
}
.hire-points>div>i {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(0,211,155,.12);
	color: #00d39b;
	font-size: 11px
}
.hire-points strong, .hire-points small {
	display: block
}
.hire-points strong {
	font-size: 13px
}
.hire-points small {
	font-size: 11px;
	color: #7f98a3;
	margin-top: 2px
}
.hire-dashboard {
	border: 1px solid rgba(0,211,155,.22);
	background: linear-gradient(145deg, #072b39, #041f2b);
	border-radius: 24px;
	padding: 30px;
	box-shadow: 0 25px 70px rgba(0,0,0,.25)
}
.dash-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	font-size: 10px;
	color: #7e9aa5;
	letter-spacing: 1px
}
.dash-top b {
	font-size: 9px;
	color: #00d39b;
	background: rgba(0,211,155,.1);
	padding: 7px 9px;
	border-radius: 20px
}
.dash-bar {
	height: 8px;
	background: #0d3b49;
	border-radius: 20px;
	margin: 27px 0 20px;
	overflow: hidden
}
.dash-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #00a979, #00e0a5);
	border-radius: 20px
}
.dash-row {
	display: flex;
	justify-content: space-between;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
	font-size: 12px;
	color: #c3d2d7
}
.dash-row i {
	color: #00d39b;
	margin-right: 8px
}
.dash-row strong {
	color: #fff
}
.dash-team {
	display: flex;
	justify-content: space-between;
	margin-top: 22px;
	font-size: 10px;
	color: #7d98a2
}
.dash-team span:last-child {
	color: #00d39b;
	font-weight: 700
}
.hire-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}
.hire-process>div {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 17px;
	padding: 25px
}
.hire-process b {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #e6faf3;
	color: #00a978;
	font-size: 12px;
	margin-bottom: 20px
}
.hire-process h3 {
	font-size: 16px
}
.hire-process p {
	font-size: 12px;
	color: #6b7d85;
	line-height: 1.7;
	margin: 0
}
@media(max-width:900px) {
.hire-role-grid {
	grid-template-columns: 1fr
}
.hire-process {
	grid-template-columns: repeat(2, 1fr)
}
.hire-visual img {
	height: 390px
}
}
@media(max-width:600px) {
.hire-hero {
	padding: 58px 0 65px
}
.hire-hero h1 {
	font-size: 40px;
	letter-spacing: -1.5px
}
.hire-visual img {
	height: 320px
}
.hire-floating {
	left: 12px;
	bottom: 18px
}
.hire-process {
	grid-template-columns: 1fr
}
.hire-role {
	padding: 20px
}
.hire-dark {
	padding: 65px 0
}
}
/* ===== TOOLS PAGE ===== */
.tools-hero {
	padding:45px 0 50px;
	background: radial-gradient(circle at 75% 25%, rgba(0,211,155,.17), transparent 28%), linear-gradient(115deg, #031a26, #062b38 58%, #031923);
	color: #fff;
	position: relative;
	overflow: hidden
}
.tools-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0,211,155,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,211,155,.035) 1px, transparent 1px);
	background-size: 42px 42px
}
.tools-hero .container {
	position: relative;
	z-index: 2
}
.tools-hero h1 {
	font-size: clamp(42px, 5.6vw, 50px);
	line-height: 1.03;
	letter-spacing: -2.3px;
	font-weight: 800;
	max-width: 720px;
	margin: 18px 0
}
.tools-hero h1 span {
	color: #00d39b
}
.tools-hero p {
	max-width: 680px;
	color: #b7cbd3;
	font-size: 16px;
	line-height: 1.8
}
.tools-hero .crumb {
	margin-bottom: 20px
}
.tools-hero .crumb a {
	color: #00d39b
}
.tools-hero-card {
	padding: 10px;
	border-radius: 25px;
	background: linear-gradient(145deg, rgba(0,211,155,.25), rgba(255,255,255,.05));
	box-shadow: 0 30px 70px rgba(0,0,0,.28);
	transform: rotate(-1deg)
}
.tool-window {
	background: #031b27;
	border: 1px solid rgba(0,211,155,.2);
	border-radius: 19px;
	padding: 20px;
	box-shadow: inset 0 0 60px rgba(0,211,155,.03)
}
.window-top {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #718d97;
	font-size: 9px;
	letter-spacing: 1px
}
.window-top span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #31525e
}
.window-top b {
	margin-left: auto;
	font-size: 8px;
	color: #00d39b
}
.tool-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 25px
}
.tool-metrics div {
	padding: 14px;
	border-radius: 12px;
	background: #082b39;
	border: 1px solid rgba(255,255,255,.06)
}
.tool-metrics small {
	display: block;
	color: #718b96;
	font-size: 8px;
	letter-spacing: 1px
}
.tool-metrics strong {
	display: block;
	margin-top: 5px;
	font-size: 13px
}
.tool-metrics .live {
	color: #00d39b
}
.tool-graph {
	height: 130px;
	display: flex;
	align-items: end;
	gap: 8px;
	padding: 20px 10px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	background: linear-gradient(180deg, rgba(0,211,155,.04), transparent)
}
.tool-graph i {
	display: block;
	flex: 1;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(#00d39b, #087e68);
	height: 35%
}
.tool-graph i:nth-child(2) {
	height: 52%
}
.tool-graph i:nth-child(3) {
	height: 44%
}
.tool-graph i:nth-child(4) {
	height: 74%
}
.tool-graph i:nth-child(5) {
	height: 58%
}
.tool-graph i:nth-child(6) {
	height: 88%
}
.tool-graph i:nth-child(7) {
	height: 69%
}
.tool-mini-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 2px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 10px;
	color: #9db2ba
}
.tool-mini-row b {
	color: #00d39b
}
.tool-modern-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 17px
}
.tool-modern {
	position: relative;
	background: #fff;
	border:1px solid #b4ccd3;
	border-radius: 18px;
	padding: 24px;
	min-height: 265px;
	box-shadow: 0 12px 32px rgba(10,50,70,.05);
	transition: .25s;
	overflow: hidden
}
.tool-modern:after {
	content: "";
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background:#e4f7f0;
	right: -45px;
	bottom: -45px;
	z-index: 0
}
.crumb .vs-icon{width: 1em !important; height: 1em !important; vertical-align: middle !important;}
#toolkit .tool-icon{width:75px; height:75px;}
.tool-modern>* {
	position: relative;
	z-index: 1
}
.tool-modern:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(10,50,70,.1)
}
.tool-modern.featured {
	border-color: #9ce6d0;
	background: linear-gradient(145deg, #fff, #f0fffa)
}
.tool-number {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 1px;
	color: #91a5ad
}
.tool-icon {
    width: 55px;
    height: 55px;
    border-radius: 35px;
    background: #c5fbea;
    color: #00a979;
    display: grid;
    place-items: center;
    font-size: 20px;
    margin: 18px 0;
}
.tool-modern h3 {
	font-size: 20px;
	margin-bottom: 8px
}
.tool-modern p {
	font-size:14px;
	color: #6c7f87;
	line-height: 1.7;
	margin-bottom: 18px
}
.tool-modern a {
	font-size: 13px;
	color: #00a475;
	font-weight:700;
	text-decoration: none
}
.tool-modern a i {
	margin-left: 5px
}
.tools-image-section {
	padding: 85px 0;
	background: #fff
}
.tools-image-section img {
	width: 100%;
	height: 470px;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 25px 55px rgba(8,45,60,.13)
}
.custom-points {
	display: grid;
	gap: 15px;
	margin-top: 25px
}
.custom-points>div {
	display: flex;
	gap: 12px
}
.custom-points>div>i {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #e8faf4;
	color: #00a979;
	display: grid;
	place-items: center;
	font-size: 13px
}
.custom-points strong, .custom-points small {
	display: block
}
.custom-points strong {
	font-size: 13px
}
.custom-points small {
	font-size: 11px;
	color: #74858d;
	margin-top: 2px
}
.tools-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}
.tools-process>div {
	padding: 25px;
	background: #fff;
	border:0px solid var(--border);
	border-radius: 17px
}
.tools-process b {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #e7faf4;
	color: #00a979;
	display: grid;
	place-items: center;
	font-size: 16px;
	margin-bottom: 18px
}
.tools-process h3 {
	font-size:20px
}
.tools-process p {
	font-size: 14px;
	color: #6c7f87;
	line-height: 1.7;
	margin: 0
}
@media(max-width:1000px) {
.tool-modern-grid {
	grid-template-columns: repeat(2, 1fr)
}
.tools-process {
	grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:600px) {
.tools-hero {
	padding: 58px 0 65px
}
.tools-hero h1 {
	font-size: 40px
}
.tool-modern-grid, .tools-process {
	grid-template-columns: 1fr
}
.tools-image-section {
	padding: 60px 0
}
.tools-image-section img {
	height: 320px
}
}





/* =====================================================
           VILLAADDA MAIN SECTION
        ===================================================== */

        .villa-product-area {
            background: #f7fbfc;
            padding:25px 0 70px;
            overflow: hidden;
        }

        .villa-wrapper {
            max-width: 1180px;
            margin: auto;
        }

        .villa-hero {
            position: relative;
            border-radius: 24px;
            background:
                radial-gradient(
                    circle at 78% 30%,
                    rgba(38, 198, 128, .15),
                    transparent 28%
                ),
                linear-gradient(
                    135deg,
                    #fff 0%,
                    #f3fbfb 100%
                );
        }

        .hero-left {
            padding: 20px 0px;
        }

        .villa-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #e7f7f0;
            color: #00a95c;
            border-radius: 50px;
            padding: 10px 17px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .5px;
            margin-bottom: 18px;
        }

        .villa-title {
            font-size: 43px;
            line-height: 1.15;
            font-weight: 800;
            color: #082f43;
            margin-bottom: 22px;
        }

        .villa-title span {
            color: #09ad5d;
        }

        .villa-description {
            color:#506c7c;
            font-size: 17px;
            line-height: 1.9;
            margin-bottom: 25px;
            max-width: 570px;
        }

        .offer-title {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 18px;
            color: #07344a;
        }

        .offer-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .offer-list li {
            display: flex;
            align-items: center;
            gap: 11px;
            color:#506c7c;
            font-size:16px;
            margin-bottom: 14px;
        }

        .offer-list li i {
            width: 21px;
            height: 21px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background:#bafdda;
            color: #00ad5b;
            font-size: 11px;
        }


        /* IMAGE */

        .villa-image-area {
            position: relative;
            padding:0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .villa-image-bg {
            position: absolute;
            width: 430px;
            height: 430px;
            border-radius: 50%;
            background: #dff8eb;
            z-index: 0;
        }

        .villa-main-image {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 570px;
            border-radius: 17px;
            box-shadow: 0 20px 50px rgba(8,80,62,.16);
        }


        /* =====================================================
           FEATURE SECTION
        ===================================================== */

        .villa-features {
            margin-top: 45px;
            background: rgba(255,255,255,.9);
            border-radius: 22px;
            padding: 28px 15px;
            box-shadow: 0 10px 35px rgba(22,89,70,.05);
			border:1px solid #b5dfd3;
        }

        .feature-item {
            min-height: 160px;
            padding: 10px 10px;
            border-right: 1px solid #dceee8;
            text-align: center;
        }

        .feature-item:last-child {
            border-right: none;
        }

        .feature-icon {
    width: 70px;
    height: 70px;
    margin: auto auto 13px;
    border-radius: 44px;
    background:#c1fbe1;
    color: #00ad5b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
}

        .feature-item h5 {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 9px;
            color: #0b3448;
        }

        .feature-item p {
            font-size:15px;
            line-height: 1.65;
            color: #70838e;
            margin: 0;
        }


        /* =====================================================
           VISION
        ===================================================== */

        .vision-section {
            position: relative;
            min-height: 260px;
            margin-top: 28px;
            overflow: hidden;
            border-radius: 22px;

           background: linear-gradient(90deg, rgb(0 52 21 / 97%) 0%, rgb(3 36 18 / 91%) 43%, rgba(4, 76, 66, .25) 100%), url(https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=85) center / cover no-repeat;
        }

        .vision-content {
            position: relative;
            z-index: 2;
            max-width:1100px;
            padding: 42px;
            color: white;
        }

        .vision-label {
            display: flex;
            align-items: center;
            gap: 13px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1.5px;
            margin-bottom: 16px;
        }

        .vision-label::after {
            content: "";
            width: 55px;
            height: 2px;
            background: #08c66b;
        }

        .vision-content h2 {
            font-size:33px;
            line-height: 1.35;
            font-weight: 800;
            margin-bottom: 22px;
        }

        .vision-content h2 span {
            color: #18d276;
			font-weight: 300;
    font-size: 38px;
        }

        .vision-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            border-radius: 50px;
            background: #08b965;
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            font-weight: 700;
        }

        .vision-btn:hover {
            background: #079b55;
            color: white;
        }


        /* =====================================================
           CTA SECTION
        ===================================================== */

        .footer-cta {
            background:#0f2f3e;
            color: white;
            padding: 45px 0;
        }

        .footer-cta h2 {
            font-size: 30px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .footer-cta p {
            color: #a9c1ca;
            margin: 0;
            font-size: 13px;
        }

        .cta-btn {
            background: #08d99a;
            color: #00232c;
            padding: 13px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .main-footer {
            background: #021b27;
            color: white;
            padding: 48px 0 18px;
            border-top: 1px solid rgba(255,255,255,.04);
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 15px;
        }

        .footer-brand .brand-icon {
            width: 36px;
            height: 36px;
        }

        .footer-brand .brand-name {
            font-size: 28px;
        }

        .footer-description {
            max-width: 260px;
            color: #a7c1cb;
            font-size: 13px;
            line-height: 1.8;
        }

        .footer-title {
            color: white;
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 11px;
        }

        .footer-links a {
            color: #9db8c3;
            text-decoration: none;
            font-size: 13px;
            transition: .25s;
        }

        .footer-links a:hover {
            color: #08d99a;
        }

        .footer-contact {
            color: #a7c1cb;
            font-size: 13px;
            line-height: 1.8;
        }

        .footer-contact strong {
            color: white;
        }

        .footer-project-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
            padding: 12px 19px;
            background: #08d99a;
            color: #00232c;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 800;
            font-size: 13px;
        }


        /* SOCIAL */

        .social-links {
            display: flex;
            gap: 8px;
            margin-top: 22px;
        }

        .social-links a {
            width: 34px;
            height: 34px;
            border: 1px solid #24505e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #08d99a;
            text-decoration: none;
            font-size: 14px;
        }

        .social-links a:hover {
            background: #08d99a;
            color: #00232c;
        }
		
		
		
		
		
		/* NAVBAR */
.navbar {
	height: 76px;
	background: var(--navy);
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	white-space: nowrap;
}
.logo-mark {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--green), #16bde0);
	color: #fff;
	box-shadow: 0 7px 20px rgba(0,211,155,.18);
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 13px;
	color: #d6e2e8;
}
.nav-links a {
	transition: .25s
}
.nav-links a:hover {
	color: var(--green)
}
.nav-cta {
	background: var(--green);
	color: var(--navy)!important;
	padding: 11px 17px;
	border-radius: 8px;
	font-weight: 800;
}
.nav-toggle {
	display: none;
	border: 0;
	background: none;
	color: #fff;
	font-size: 23px;
}
/* HERO */
.hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 85% 20%, rgba(0,211,155,.16), transparent 27%),  radial-gradient(circle at 60% 80%, rgba(21,220,226,.10), transparent 28%),  var(--navy);
	color: #fff;
	padding:20px 0 50px;
}
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: linear-gradient(to bottom, black, transparent);
	pointer-events: none;
}
.hero-grid {
	position: relative;
	display: grid;
 grid-template-columns:1.05fr .95fr;
	align-items: center;
	gap: 70px;
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid rgba(0,211,155,.35);
	border-radius: 50px;
	background: rgba(0,211,155,.08);
	color: var(--green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.hero h1 span {
	background: linear-gradient(90deg, var(--green), var(--cyan));
    -webkit-background-clip: text;
    color: var(--green);
}
.hero p {
	max-width: 640px;
	color: #b9ccd5;
	font-size: 16px;
	margin-bottom: 28px;
}
.hero-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 19px;
	border-radius: 8px;
	font-size: 16px;
	font-weight:700;
	transition: .25s;
}
.btn-primary {
	background: var(--green);
	color: var(--navy);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0,211,155,.18)
}
.btn-outline {
	color: #fff;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.04);
}
.btn-outline:hover {
	border-color: var(--green);
	color: var(--green)
}
.hero-visual {
	position: relative;
	min-height: 410px;
	display: grid;
	place-items: center;
}
.orb {
	width: 330px;
	height: 330px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,211,155,.30), rgba(0,211,155,.03) 55%, transparent 70%);
	filter: blur(.2px);
}
.visual-card {
	position: absolute;
	width: 290px;
	padding: 27px;
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(11,48,62,.96), rgba(4,29,40,.94));
	border: 1px solid rgba(0,211,155,.28);
	box-shadow: 0 25px 70px rgba(0,0,0,.30);
	transform: rotate(-5deg);
}
.visual-card .cube {
	width: 96px;
	height: 96px;
	margin: 0 auto 20px;
	border-radius: 22px;
	display: grid;
	place-items: center;
	font-size: 42px;
	color: var(--green);
	background: linear-gradient(145deg, rgba(0,211,155,.18), rgba(21,220,226,.05));
	border: 1px solid rgba(0,211,155,.3);
	box-shadow: 0 0 35px rgba(0,211,155,.10);
}
.visual-card h3 {
	text-align: center;
	font-size: 20px
}
.visual-card p {
	text-align: center;
	color: #93adb8;
	font-size: 12px;
	margin-top: 7px
}
.float-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 12px;
	background: #fff;
	color: var(--text);
	box-shadow: 0 15px 35px rgba(0,0,0,.22);
	font-size: 11px;
	font-weight: 800;
}
.float-card i {
	color: var(--green-2);
	font-size: 16px
}
.float-one {
	top: 45px;
	right: 0
}
.float-two {
	bottom: 58px;
	left: 5px
}
/* BREADCRUMB */
.breadcrumb {
	background: #f4f8fb;
	border-bottom: 1px solid var(--border);
	padding: 16px 0;
}
.breadcrumb-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--muted);
}
.breadcrumb-inner span:last-child {
	color: var(--green-2);
	font-weight: 700
}
/* COMMON */


.section-head.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto
}
.kicker {
	display: inline-block;
	color: var(--green-2);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin-bottom:0px;
}
.section-head h2 {
	font-size:35px;
	line-height: 1.12;
	letter-spacing: -1.1px;
	margin-bottom:5px;
}
.section-head p {
	font-size: 16px;
    color: #506785;
}
/* ABOUT */
.about-grid {
	display: grid;
 grid-template-columns:1.05fr .95fr;
	gap: 65px;
	align-items: center;
}
.about-copy h2 {
	font-size: 39px;
	line-height: 1.15;
	margin-bottom: 17px
}
.about-copy h2 span {
	color: var(--green-2)
}
.about-copy>p {
	font-size: 16px;
	color: var(--muted);
	margin-bottom: 27px;
	text-align:justify;
}
.info-list {
	display: grid;
	gap: 17px
}
.info-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.info-icon {
	flex: 0 0 43px;
	height: 43px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	color: var(--green-2);
	background: #e8fbf5;
	border: 1px solid #c9f4e6;
}
.info-item h4 {
	font-size: 15px;
	margin-bottom: 3px
}
.info-item p {
	font-size: 12px;
	color: var(--muted)
}
.about-art {
	position: relative;
	min-height: 430px;
	border-radius: 26px;
	padding: 28px;
	background: linear-gradient(145deg, rgb(3 0 34 / 90%), rgb(0 126 14 / 50%)), #f1f7fb;
	overflow: hidden;
	border: 1px solid #dceaf0;
}
.about-art:before, .about-art:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(0,185,130,.16);
}
.about-art:before {
	width: 330px;
	height: 330px;
	right: -90px;
	top: -70px
}
.about-art:after {
	width: 230px;
	height: 230px;
	left: -90px;
	bottom: -80px
}
.art-window {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 74%;
	height: 62%;
	border-radius: 17px;
	background: var(--navy);
	box-shadow: 0 25px 50px rgba(3,27,39,.20);
	padding: 17px;
	border: 1px solid rgba(0,211,155,.24);
}
.art-top {
	display: flex;
	gap: 6px;
	margin-bottom: 18px
}
.art-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #45606c
}
.art-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	height: 80%
}
.art-box {
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	background: linear-gradient(145deg, #0b3342, #062532);
	padding: 12px;
}
.art-box.big {
	grid-row: span 2
}
.line {
	height: 6px;
	background: rgba(0,211,155,.65);
	border-radius: 20px;
	margin: 8px 0;
	width: 75%
}
.line.small {
	width: 45%;
	background: rgba(255,255,255,.13)
}
.art-node {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin: auto;
	background: rgba(0,211,155,.12);
	border: 1px solid rgba(0,211,155,.35);
	color: var(--green);
	font-size: 20px;
}
/* STATS */
.stats-section {
	padding: 30px 0;
	background: var(--navy);
	color: #fff;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr)
}
.stat {
	text-align: center;
	padding: 18px;
	border-right: 1px solid rgba(255,255,255,.10)
}
.stat:last-child {
	border-right: 0
}
.stat strong {
	font-size:45px;
	color: var(--green);
	display: block;
	line-height: 1.2;
	font-weight: 800;
}
.stat span {
	font-size:17px;
	color: #fff;
}
/* VALUES */
.values {
	background: linear-gradient(135deg, #eaf6ff, #e8fff8)
}
.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.value-card {
	background: #fff;
	border: 1px solid #dce8ef;
	border-radius: 16px;
	padding: 27px;
	box-shadow: 0 12px 30px rgba(20,70,90,.07);
	transition: .25s;
}
.value-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 35px rgba(20,70,90,.11)
}
.value-icon {
	width:60px;
	height:60px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: var(--green-2);
	background: #a1f1d8;
	margin-bottom: 18px;
	font-size:30px;
}
.value-card h3 {
	font-size:22px;
	margin-bottom: 8px;
	font-weight:700;
}
.value-card p {
	font-size:15px;
	color: var(--muted)
}
/* GALLERY */
.gallery-grid {
	display: grid;
 grid-template-columns:1.25fr .75fr .75fr;
	grid-template-rows: 210px 210px;
	gap: 15px;
}
.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: #dce8ef;
	min-height: 150px;
}
.gallery-item:first-child {
	grid-row: span 2
}
.gallery-item img {
	height: 100%;
	object-fit: cover;
	transition: .5s
}
.gallery-item:hover img {
	transform: scale(1.05)
}
.gallery-overlay {
	position: absolute;
	inset: auto 0 0;
	padding: 25px 18px 17px;
	background: linear-gradient(transparent, rgb(0 0 0));
	color: #fff;
	font-size:20px;
	font-weight: 700;
}
/* PROCESS */
.process-wrap {
	position: relative
}
.process-line {
	position: absolute;
	left: 11%;
	right: 11%;
	top: 38px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
}
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	position: relative;
}
.process-card {
	text-align: center
}
.process-number {
	width: 76px;
	height: 76px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	color: var(--green-2);
	border: 1px solid #b3d7cc;
	box-shadow:0 0 0 8px #79e3bf;
	font-weight: 800;
	position: relative;
	z-index: 2;
}
.process-card h3 {
	font-size:22px;
	margin-bottom: 7px;
	    font-weight: 600;
}
.process-card p {
	font-size: 14px;
    color: #49596e;
}
/* WHY */
.why {
	background: var(--navy);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.why:before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	right: -180px;
	top: -250px;
	background: radial-gradient(circle, rgba(0,211,155,.15), transparent 65%);
}
.why-grid {
	display: grid;
 grid-template-columns:.85fr 1.15fr;
	gap: 65px;
	align-items: start;
	position: relative;
}
.why .section-head p {
	color: #9db4be
}
.why-list {
	display: grid;
	gap: 11px
}
.why-row {
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 11px;
	background: rgba(255,255,255,.045);
	overflow: hidden;
}
.why-title {
	width: 100%;
	padding: 17px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	background: none;
	border: 0;
	font: 600 16px "Inter", sans-serif;
	cursor: pointer;
}
.why-title i {
	color: var(--green)
}
.why-body {
	display: none;
	padding: 0 18px 18px;
	color: #a9bec7;
	font-size:15px;
}
.why-row.active .why-body {
	display: block
}
.why-row.active .why-title {
	color: var(--green)
}
/* CTA */
.cta {
	padding:45px 0;
	background: linear-gradient(120deg, #edfff9, #eaf4ff);
}
.cta-box {
	background: var(--navy);
	border-radius: 24px;
	padding: 32px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta-box:after {
	content: "";
	position: absolute;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	right: -100px;
	top: -180px;
	background: radial-gradient(circle, rgba(0,211,155,.22), transparent 65%);
}
.cta-box h2 {
	font-size: 34px;
	line-height: 1.15;
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
	font-weight: 800;
}
.cta-box p {
	font-size:16px;
	color: #a9bec7;
	position: relative;
	z-index: 1
}
.cta-box .btn {
	position: relative;
	z-index: 2;
	white-space: nowrap
}
.main-navbar {
    background: #031d29;
    min-height: 82px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.main-navbar .container {
    min-height: 82px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #08d99a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark svg {
    width: 27px;
    height: 27px;
    fill: #031d29;
}

.brand-text {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.main-navbar .navbar-nav {
    gap: 5px;
}

.main-navbar .nav-link {
    color: rgba(255,255,255,.78) !important;
    font-size: 14px;
    font-weight: 600;
    padding: 31px 14px !important;
    transition: .25s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: #08d99a !important;
}

.main-navbar .dropdown-toggle::after {
    margin-left: 7px;
    vertical-align: 2px;
    border-width: 4px;
}

.main-navbar .dropdown-menu {
    background: #082936;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 8px;
    min-width: 220px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.main-navbar .dropdown-item {
    color: rgba(255,255,255,.8);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 14px;
}

.main-navbar .dropdown-item:hover {
    color: #08d99a;
    background: rgba(8,217,154,.08);
}

.btn-get-started {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #08d99a;
    color: #031d29 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 19px;
    border-radius: 9px;
    transition: .25s ease;
}

.btn-get-started:hover {
    background: #fff;
    transform: translateY(-1px);
}

.btn-get-started i {
    font-size: 12px;
}

@media (max-width: 991px) {

    .main-navbar {
        padding: 12px 0;
    }

    .main-navbar .container {
        min-height: auto;
    }

    .main-navbar .navbar-nav {
        padding: 20px 0;
        gap: 0;
    }

    .main-navbar .nav-link {
        padding: 12px 0 !important;
    }

    .btn-get-started {
        margin-bottom: 10px;
    }

    .main-navbar .dropdown-menu {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 15px;
    }
}


.about-intro {
    position: relative;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(0, 214, 151, 0.12),
            transparent 32%
        ),
        #031d29;
    padding:0px 0 20px;
    overflow: hidden;
}

.about-intro-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}

.about-intro-content {
    max-width: 650px;
}

.about-intro h1 {
    color: #fff;
    font-size: clamp(46px, 4vw, 72px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2.5px;
    margin: 0 0 25px;
}

.about-intro h1 span {
    color: #08d99a;
}

.about-intro p {
    color: #a7bac1;
    font-size: 17px;
    line-height: 1.8;
    max-width: 610px;
    margin-bottom: 34px;
}

.about-intro-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-intro-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-intro-image-wrap {
    width: 100%;
    max-width: 690px;
    border-radius: 24px;
    overflow: hidden;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.35));
}

.about-intro-image {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}





/* =========================
   ABOUT STORY SECTION
========================= */

.about-story {
  position: relative;
  background: #ffffff;
  padding:50px 0 50px;
  overflow: hidden;
}
.story-image-wrap img{ width:155%;}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap:35px;
}

/* LEFT */

.about-copy {
  max-width: 650px;
}

.story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 50px;
  background: #e7faf4;
  color: #00a978;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 22px;
}

.story-kicker i {
  font-size: 15px;
}

.about-copy h2 {
  color: #062538;
  font-size: clamp(42px, 3vw, 62px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0 0 15px;
}

.about-copy h2 span {
  color: #08b986;
}

.story-description {
  color: #526b78;
  font-size: 17px;
  line-height: 1.8;
  max-width: 620px;
  margin-bottom: 34px;
}


/* INFO CARDS */

.info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-item {
  display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 19px 22px;
    background: #ebfff9;
    border: 1px solid #9ed3c7;
    border-radius: 18px;
    transition: all .3s ease;
}

.info-item:hover {
  transform: translateY(-3px);
  border-color: #bdeee1;
  box-shadow: 0 12px 30px rgba(0, 100, 80, .08);
}

.info-icon {
  width: 54px;
  height: 54px;
  min-width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background:#6ae7c3;
  color: #000;
  font-size: 22px;
}

.info-content h4 {
  color: #08283a;
  font-size:20px;
  font-weight: 750;
  margin: 2px 0 5px;
}

.info-content p {
  color:#42545e;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}


/* RIGHT IMAGE */

.about-art {
  position: relative;
}

.story-image-wrap {
  position: relative;
  width: 100%;
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  background: #edf6f4;
  box-shadow: 0 25px 70px rgba(4, 38, 52, .13);
}

.story-image {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(0, 30, 43, .05),
      rgba(0, 185, 140, .12)
    );
  pointer-events: none;
}


/* FLOATING CARDS */

.story-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  background: rgba(3, 30, 42, .90);
  border: 1px solid rgba(0, 220, 170, .35);
  border-radius: 15px;
  color: #ffffff;
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .20);
}

.floating-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(0, 215, 160, .15);
  color: #08d9a0;
  font-size: 17px;
}

.story-floating-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.story-floating-card small {
  display: block;
  color: #9db5bd;
  font-size: 11px;
  margin-top: 3px;
}

.card-one {
      top: 40px;
    left: 150px;
}

.card-two {
  right: 25px;
  bottom: 45px;
}


/* RESPONSIVE */

@media (max-width: 991px) {

  .about-story {
    padding: 75px 0 85px;
  }

  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .about-copy {
    max-width: 750px;
  }

  .about-copy h2 {
    font-size: 48px;
  }

  .story-image-wrap {
    max-width: 700px;
    margin: 0 auto;
  }

}


@media (max-width: 575px) {

  .about-story {
    padding: 60px 0 70px;
  }

  .about-story-grid {
    gap: 40px;
  }

  .about-copy h2 {
    font-size: 38px;
    letter-spacing: -1px;
  }

  .story-description {
    font-size: 15px;
    line-height: 1.7;
  }

  .info-item {
    padding: 16px;
    gap: 13px;
  }

  .info-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 18px;
  }

  .info-content h4 {
    font-size: 16px;
  }

  .info-content p {
    font-size: 13px;
  }

  .story-image-wrap {
    min-height: 380px;
    border-radius: 20px;
  }

  .story-image {
    height: 380px;
  }

  .story-floating-card {
    padding: 9px 11px;
    gap: 8px;
  }

  .floating-icon {
    width: 34px;
    height: 34px;
  }

  .card-one {
    top: 20px;
    left: 15px;
  }

  .card-two {
    right: 15px;
    bottom: 20px;
  }
}


/* =========================================
   MODERN INSIGHTS / BLOG SECTION
========================================= */

.insights-section {
  background: #f7fbfa;
  padding:50px 0 50px;
  position: relative;
}


/* HEADER */

.insights-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.insights-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 15px;

  border-radius: 50px;

  background: #e2f8f1;
  color: #00a978;

  font-size: 13px;
  font-weight: 750;
  letter-spacing: .3px;

  margin-bottom: 18px;
}

.insights-header h2 {
  margin: 0 0 15px;

  color: #06283a;

  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.08;

  font-weight: 800;
  letter-spacing: -2px;
}

.insights-header h2 span {
  color: #08b987;
}

.insights-header p {
  max-width: 650px;

  margin: 0;

  color: #607782;

  font-size: 16px;
  line-height: 1.75;
}


/* ALL ARTICLES */

.all-articles {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 13px 19px;

  border: 1px solid #d7e9e5;
  border-radius: 50px;

  background: #ffffff;

  color: #073043;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  transition: .3s ease;
}

.all-articles i {
  color: #00b984;
  transition: .3s ease;
}

.all-articles:hover {
  border-color: #00b984;
  color: #00a978;
  transform: translateY(-2px);
}

.all-articles:hover i {
  transform: translateX(4px);
}


/* BLOG GRID */

.modern-blog-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 26px;
}


/* CARD */

.modern-blog-card {
  background: #ffffff;

  border:1px solid #cad5d2;

  border-radius: 22px;

  overflow: hidden;

  box-shadow:
    0 8px 30px rgba(8, 42, 54, .05);

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

.modern-blog-card:hover {
  transform: translateY(-8px);

  border-color: #bde8dd;

  box-shadow:
    0 22px 50px rgba(5, 55, 68, .12);
}


/* IMAGE */

.blog-image {
  position: relative;

  height: 235px;

  overflow: hidden;

  background: #dfeeea;
}

.blog-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .55s ease,
    filter .35s ease;
}

.modern-blog-card:hover .blog-image img {
  transform: scale(1.07);

  filter: saturate(1.08);
}


/* CATEGORY */

.blog-category {
  position: absolute;

  top: 17px;
  left: 17px;

  padding: 7px 11px;

  border-radius: 8px;

  background: rgba(3, 32, 43, .86);

  border: 1px solid rgba(0, 218, 168, .35);

  color: #62f1cc;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .8px;

  backdrop-filter: blur(8px);
}


/* BODY */

.modern-blog-body {
  padding: 25px 25px 27px;
}


/* META */

.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 12px;

  color: #7b9098;

  font-size: 12px;
  font-weight: 600;
}


/* TITLE */

.modern-blog-body h3 {
  color: #082b3d;

  font-size: 21px;
  line-height: 1.3;

  font-weight: 750;

  letter-spacing: -.4px;

  margin: 0 0 12px;
}

.modern-blog-body p {
  color: #647983;

  font-size: 14px;
  line-height: 1.7;

  margin: 0 0 21px;
}


/* READ ARTICLE */

.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color:#00b580;

  font-size: 14px;
  font-weight:500;

  text-decoration: none;

  transition: .3s ease;
}

.blog-read i {
  font-size: 11px;

  transition: .3s ease;
}

.blog-read:hover {
  color: #007f60;
}

.blog-read:hover i {
  transform: translate(3px, -3px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

  .insights-section {
    padding: 80px 0 90px;

  }

  .modern-blog-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .insights-header {
    align-items: flex-start;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

  .insights-section {
    padding: 65px 0 75px;
  }

  .insights-header {
    display: block;

    margin-bottom: 35px;
  }

  .insights-header h2 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .insights-header p {
    font-size: 15px;
  }

  .all-articles {
    margin-top: 22px;
  }

  .modern-blog-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .blog-image {
    height: 220px;
  }

  .modern-blog-body {
    padding: 22px;
  }

}
.homeh{display: flex;}
.launch .svg-icon {width: 2em; height: 2em;}


.service-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 78% 30%, rgb(0 249 169 / 50%), transparent 30%), linear-gradient(135deg, #031b25 0%, #0d263e 55%, #02151d 100%);
  color: #fff;
  padding: 0px 0 0px;
}

/* subtle background glow */
.service-detail-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -250px;
  border: 1px solid rgba(0, 211, 170, 0.18);
  border-radius: 50%;
}

.service-detail-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  left: -150px;
  bottom: -180px;
  background: rgba(0, 201, 166, 0.08);
  filter: blur(80px);
  border-radius: 50%;
}

.service-detail-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 70px;
}

/* CONTENT */


.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 27px;
  color: #8bb2bd;
  font-size: 13px;
}

.crumb a {
  color: #9cc4ce;
  text-decoration: none;
  transition: 0.3s;
}

.crumb a:hover {
  color: #00d9a8;
}

.crumb i {
  font-size: 9px;
  color: #587b85;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(0, 217, 168, 0.25);
  background: rgba(0, 217, 168, 0.07);
  border-radius: 50px;
  color: #00d9a8;
  font-size: 13px;
  font-weight: 600;
}

.hero-kicker i {
  font-size: 12px;
}

.service-detail-hero h1 {
  font-size: clamp(40px, 3vw, 76px);


  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
      line-height: 53px;
}

.service-detail-hero h1 span {
  display: block;
  color: #00d4a5;
}

.service-detail-hero p {
  max-width: 680px;
  color: #a8c5cc;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom:15px;
}

/* BUTTONS */

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-actions .btn {
  min-height: 50px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-green {
  background: #00d9a8;
  color: #032027;
  border: 1px solid #00d9a8;
}

.btn-green:hover {
  background: #13e7b6;
  color: #032027;
  transform: translateY(-2px);
}

.btn-outline-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.65);
  background: transparent;
}

.btn-outline-light:hover {
  color: #00d9a8;
  border-color: #00d9a8;
  background: rgba(0,217,168,0.06);
}

/* SMALL FEATURES */

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top:22px;
}

.hero-points div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8fb2bb;
  font-size: 13px;
}

.hero-points i {
  color: #00d9a8;
  font-size: 14px;
}


/* RIGHT IMAGE */

.hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-glow {
  position: absolute;
  width: 390px;
  height: 390px;
  background: rgba(0, 215, 170, 0.13);
  filter: blur(85px);
  border-radius: 50%;
}

.image-card {
  position: relative;
  width: min(100%, 500px);
  height: 410px;
  overflow: visible;
  border-radius: 22px;
  transform: rotate(1.5deg);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255,255,255,0.08);
}

.image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 22px;
}

.image-overlay {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(0, 24, 32, 0.2),
      rgba(0, 24, 32, 0.72)
    );
}


/* FLOATING CARDS */

.floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border:1px solid rgb(26 221 129 / 50%);
  background: rgba(3, 29, 37, 0.88);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  transform: rotate(-1.5deg);
}

.floating-card i {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(0,217,168,0.12);
  color: #00d9a8;
}

.floating-card strong {
  display: block;
  color: #fff;
  font-size: 13px;
  margin-bottom: 3px;
}

.floating-card small {
  display: block;
  color: #7899a2;
  font-size: 10px;
}

.card-top {
  top: 35px;
  left: -35px;
}

.card-bottom {
  right: -30px;
  bottom: 30px;
}

.status-dot {
  width: 9px;
  height: 9px;
  background: #00d9a8;
  border-radius: 50%;
  box-shadow: 0 0 12px #00d9a8;
}


/* RESPONSIVE */

@media (max-width: 991px) {

  .service-detail-hero {
    padding: 75px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .hero-content {
    max-width: 800px;
  }

  .hero-visual {
    min-height: 390px;
  }

  .image-card {
    width: min(100%, 620px);
    height: 380px;
  }

  .card-top {
    left: 10px;
  }

  .card-bottom {
    right: 10px;
  }
}

@media (max-width: 576px) {

  .service-detail-hero {
    padding: 55px 0 65px;
  }

  .service-detail-hero h1 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .service-detail-hero p {
    font-size: 15px;
  }

  .hero-points {
    flex-direction: column;
    gap: 11px;
  }

  .hero-visual {
    min-height: 320px;
  }

  .image-card {
    height: 300px;
    border-radius: 16px;
  }

  .image-card img,
  .image-overlay {
    border-radius: 16px;
  }

  .floating-card {
    padding: 10px 12px;
  }

  .card-top {
    top: 15px;
    left: -5px;
  }

  .card-bottom {
    right: -5px;
    bottom: 15px;
  }
}
.processdiv{ padding:40px 0px 30px !important;}




/* =========================================
   WEB3 WALLET PAGE
========================================= */

.wallet-hero {
  position: relative;
  overflow: hidden;
  padding:50px 0 50px;
  background:
    radial-gradient(circle at 85% 25%, rgba(0, 201, 166, .16), transparent 30%),
    radial-gradient(circle at 15% 80%, rgba(0, 180, 120, .08), transparent 30%),
    #071715;
  color: #fff;
}

.wallet-hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  right: -180px;
  top: -180px;
  background: rgba(0, 201, 166, .12);
  filter: blur(100px);
  border-radius: 50%;
}

.wallet-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}

.wallet-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
  color: #9aafaa;
  font-size: 13px;
}

.wallet-breadcrumb a {
  color: #b8c9c5;
  text-decoration: none;
}

.wallet-breadcrumb i {
  font-size: 10px;
  color: #00c9a6;
}

.wallet-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 201, 166, .22);
  border-radius: 30px;
  background: rgba(0, 201, 166, .08);
  color: #55e2c6;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 22px;
}

.wallet-hero h1 {
  max-width: 720px;
  font-size: clamp(42px, 5vw, 44px);
  line-height: 1.04;
  letter-spacing: -2px;
  margin: 0 0 24px;
  font-weight: 700;
}

.wallet-hero h1 span {
  display: block;
  color:#11d183;
}

.wallet-hero-content > p {
  max-width: 620px;
  color: #a9bbb7;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.wallet-hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.wallet-btn-primary,
.wallet-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s ease;
}

.wallet-btn-primary {
  background: #00b98e;
  color: #fff;
}

.wallet-btn-primary:hover {
  background: #00a980;
  color: #fff;
  transform: translateY(-2px);
}

.wallet-btn-secondary {
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.04);
}

.wallet-btn-secondary:hover {
  border-color: #00c9a6;
  color: #55e2c6;
}

.wallet-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 34px;
}

.wallet-highlights div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a8bbb6;
  font-size: 13px;
}

.wallet-highlights i {
  color: #00c9a6;
}


/* WALLET VISUAL */

.wallet-hero-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-main-card {
  position: relative;
  z-index: 3;
  width: min(390px, 100%);
  padding: 25px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 25px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  backdrop-filter: blur(20px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    0 0 50px rgba(0,201,166,.08);
  transform: rotate(2deg);
}

.wallet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.wallet-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.wallet-brand-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,201,166,.13);
  color: #00d0aa;
}

.wallet-brand strong,
.wallet-brand small {
  display: block;
}

.wallet-brand strong {
  font-size: 14px;
}

.wallet-brand small {
  margin-top: 3px;
  color: #5ee0c7;
  font-size: 11px;
}

.wallet-card-header > i {
  color: #8da19d;
}

.wallet-total small {
  color: #8da19d;
  font-size: 12px;
}

.wallet-total h2 {
  font-size: 34px;
  margin: 7px 0;
  letter-spacing: -1px;
}

.wallet-profit {
  color: #55dfbf;
  font-size: 12px;
}

.wallet-address-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
}

.wallet-address-box small,
.wallet-address-box strong {
  display: block;
}

.wallet-address-box small {
  color: #829792;
  font-size: 12px;
}

.wallet-address-box strong {
  margin-top: 3px;
  font-size: 12px;
}

.wallet-address-box button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: #8fe7d4;
}

.wallet-actions {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 22px 0;
}

.wallet-actions div {
  text-align: center;
}

.wallet-actions span {
  width: 42px;
  height: 42px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,201,166,.11);
  color: #00c9a6;
}

.wallet-actions small {
  display: block;
  margin-top: 7px;
  color: #9aada8;
  font-size: 10px;
}

.wallet-assets {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
}

.wallet-asset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.asset-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asset-logo.eth {
  background: rgba(120,120,255,.15);
  color: #a5a7ff;
}

.asset-logo.usdc {
  background: rgba(40,150,255,.12);
  color: #61aefb;
  font-weight: 700;
}

.wallet-asset div {
  flex: 1;
}

.wallet-asset strong,
.wallet-asset small {
  display: block;
}

.wallet-asset strong {
  font-size: 12px;
}

.wallet-asset small {
  color: #7f9490;
  font-size: 10px;
  margin-top: 2px;
}

.wallet-asset b {
  font-size: 11px;
}


/* FLOATING CARD */

.wallet-security-card {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid rgba(0,201,166,.22);
  border-radius: 13px;
  background: rgba(7,23,21,.88);
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
}

.wallet-security-card > span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0,201,166,.12);
  color: #00c9a6;
}

.wallet-security-card strong,
.wallet-security-card small {
  display: block;
}

.wallet-security-card strong {
  font-size: 12px;
}

.wallet-security-card small {
  margin-top: 3px;
  color: #7f9791;
  font-size: 10px;
}


/* ORBITS */

.wallet-orbit {
  position: absolute;
  border: 1px solid rgba(0,201,166,.12);
  border-radius: 50%;
}

.orbit-one {
  width: 430px;
  height: 430px;
}

.orbit-two {
  width: 570px;
  height: 570px;
  border-color: rgba(0,201,166,.06);
}


/* CAPABILITIES */

.wallet-capabilities {
  padding:50px 0;
  background: #fff;
}

.wallet-section-heading {
  max-width: 790px;
    margin: 0 auto 35px;
    text-align: center;
}

.wallet-section-heading > span {
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wallet-section-heading h2 {
  margin: 4px 0 6px;
  color: #10201d;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  font-weight:800;
}

.wallet-section-heading p {
  color: #71817d;
  line-height: 1.7;
}

.wallet-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.wallet-feature-card {
  padding: 30px;
  border:1px solid #aeddcf;
  border-radius: 18px;
  background: #f8fbfa;
  transition: .3s ease;
}

.wallet-feature-card:hover {
  transform: translateY(-5px);
  border-color: #bce9df;
  box-shadow: 0 15px 35px rgba(0,0,0,.06);
}

.wallet-feature-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #e5f8f3;
  color: #00a982;
  font-size: 19px;
}

.wallet-feature-card h3 {
  margin: 22px 0 10px;
  font-size:22px;
  color: #152420;
  font-weight: 700;
}

.wallet-feature-card p {
  color: #71817d;
  line-height: 1.7;
  font-size: 15px;
}


/* PROCESS */

.wallet-process {
  padding: 50px 0px;
  background: #ebffff;
}

.wallet-process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.wallet-process-item {
  position: relative;
  padding: 30px;
  border-radius: 18px;
  background: #fff;
  border:1px solid #b5d1c9;
}

.wallet-process-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #e6f8f3;
  color: #00a982;
}

.wallet-process-item > span {
  display: block;
  margin-top: 22px;
  color: #00a982;
  font-size: 12px;
  font-weight: 700;
}

.wallet-process-item h3 {
  margin: 7px 0 10px;
  font-size: 24px;
  font-weight:600;
}

.wallet-process-item p {
  color: #71817d;
  font-size: 14px;
  line-height: 1.7;
}


/* CTA */

.wallet-cta {
  padding:40px 0;
  background: #e2f3f1;
}

.wallet-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:25px;
  padding:35px;
  border: 1px solid rgba(0,201,166,.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 50%, rgba(0,201,166,.12), transparent 35%),
    #0b211e;
}

.wallet-cta-box > div {
  max-width: 650px;
}

.wallet-cta-box span {
  color: #00c9a6;
  font-size: 13px;
  font-weight: 700;
}

.wallet-cta-box h2 {
  margin: 10px 0;
  color: #fff;
  font-size: 35px;
  font-weight:600;
}

.wallet-cta-box p {
  margin: 0;
  color: #91a9a3;
  line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 991px) {

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

  .wallet-hero-content {
    text-align: center;
  }

  .wallet-breadcrumb,
  .wallet-kicker,
  .wallet-hero-buttons,
  .wallet-highlights {
    justify-content: center;
  }

  .wallet-hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }

  .wallet-feature-grid,
  .wallet-process-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .wallet-hero-visual {
    min-height: 500px;
  }

  .wallet-cta-box {
    flex-direction: column;
    text-align: center;
  }

}

@media (max-width: 576px) {

  .wallet-hero {
    padding: 70px 0;
  }

  .wallet-hero h1 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .wallet-highlights {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .wallet-hero-visual {
    min-height: 430px;
  }

  .wallet-main-card {
    width: 94%;
    padding: 20px;
  }

  .wallet-security-card {
    right: 2%;
    bottom: 5px;
  }

  .orbit-two {
    width: 400px;
    height: 400px;
  }

  .wallet-feature-grid,
  .wallet-process-grid {
    grid-template-columns: 1fr;
  }

  .wallet-cta-box {
    padding: 35px 22px;
  }

}



/* =========================================
   LAUNCHPAD DEVELOPMENT
========================================= */

.launchpad-hero {
  position: relative;
  overflow: hidden;
  padding:10px 0 20px;
  background:
    radial-gradient(circle at 82% 20%, rgba(0,201,166,.16), transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(0,180,120,.08), transparent 28%),
    #071715;
  color: #fff;
}

.launchpad-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.orb-left {
  width: 260px;
  height: 260px;
  left: -150px;
  bottom: 0;
  background: rgba(0,201,166,.10);
}

.orb-right {
  width: 350px;
  height: 350px;
  right: -160px;
  top: 50px;
  background: rgba(0,180,120,.08);
}

.launchpad-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
}

.launchpad-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 25px;
  color: #8ea49e;
  font-size: 13px;
}

.launchpad-breadcrumb a {
  color: #b6c7c2;
  text-decoration: none;
}

.launchpad-breadcrumb i {
  color: #00c9a6;
  font-size: 10px;
}

.launchpad-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid rgba(0,201,166,.25);
  border-radius: 30px;
  color: #5de1c7;
  background: rgba(0,201,166,.08);
  font-size: 13px;
  font-weight: 600;
}

.launchpad-hero h1 {
  max-width: 700px;
  margin: 22px 0;
  font-size: clamp(42px, 5vw, 40px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.launchpad-hero h1 span {
  display: block;
  color: #00c9a6;
}

.launchpad-hero-content > p {
  max-width: 620px;
  color: #a8bbb6;
  font-size: 17px;
  line-height: 1.8;
}

.launchpad-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

.launchpad-btn-primary,
.launchpad-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 21px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}

.launchpad-btn-primary {
  background: #00b98e;
  color: #fff;
}

.launchpad-btn-primary:hover {
  color: #fff;
  background: #00a980;
  transform: translateY(-2px);
}

.launchpad-btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.035);
}

.launchpad-btn-outline:hover {
  color: #55e2c6;
  border-color: #00c9a6;
}

.launchpad-stats {
  display: flex;
  gap: 35px;
  margin-top: 40px;
}

.launchpad-stats div {
  padding-left: 17px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.launchpad-stats strong,
.launchpad-stats span {
  display: block;
}

.launchpad-stats strong {
  color: #fff;
  font-size: 19px;
}

.launchpad-stats span {
  margin-top: 4px;
  color: #829791;
  font-size: 11px;
}


/* HERO IMAGE */

.launchpad-hero-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.launchpad-image-glow {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: rgba(0,201,166,.13);
  filter: blur(90px);
}

.launchpad-image-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 570px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 35px 80px rgba(0,0,0,.45),
    0 0 60px rgba(0,201,166,.08);
  transform: rotate(2deg);
}

.launchpad-image-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.launchpad-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(4,17,15,.4)
  );
}


/* FLOATING SALE CARD */

.launch-sale-card {
  position: absolute;
  z-index: 5;
  left: -30px;
  bottom: 35px;
  width: 245px;
  padding: 17px;
  border: 1px solid rgba(0,201,166,.23);
  border-radius: 16px;
  background: rgba(7,23,21,.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.sale-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #55dfc1;
  font-size: 9px;
  font-weight: 700;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d0a9;
  box-shadow: 0 0 10px #00d0a9;
}

.sale-project {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.sale-token-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(0,201,166,.13);
  color: #00d0a9;
}

.sale-project strong,
.sale-project small {
  display: block;
}

.sale-project strong {
  font-size: 12px;
}

.sale-project small {
  color: #718a84;
  font-size: 9px;
  margin-top: 3px;
}

.sale-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #7f9690;
  font-size: 9px;
}

.sale-progress-label strong {
  color: #fff;
}

.progress-track,
.project-progress-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
}

.progress-track span {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: #00c9a6;
}

.sale-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  color: #718a84;
  font-size: 9px;
}

.sale-bottom b {
  color: #55dfc1;
}

.floating-rocket {
  position: absolute;
  z-index: 6;
  right: -5px;
  top: 55px;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #00b98e;
  color: #fff;
  font-size: 21px;
  transform: rotate(-8deg);
  box-shadow: 0 15px 35px rgba(0,201,166,.3);
}


/* FEATURES */

.launchpad-features {
  padding:45px 0px;
  background: #fff;
}

.launchpad-heading {
  max-width: 820px;
  margin: 0 auto 35px;
  text-align: center;
}

.launchpad-heading > span,
.launchpad-project-heading > div > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.launchpad-heading h2 {
  margin:4px 0;
  color: #12211e;
  font-size:38px;
  line-height: 1.12;
  font-weight:800;
}

.launchpad-heading p {
  color: #71817d;
  line-height: 1.7;
}

.launchpad-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.launchpad-feature-card {
  position: relative;
  padding: 32px 27px;
  border:1px solid #c1d7cf;
  border-radius: 18px;
  background: #f8fbfa;
  overflow: hidden;
  transition: .3s;
}

.launchpad-feature-card:hover {
  transform: translateY(-6px);
  border-color: #bde8de;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.launchpad-feature-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color:#8bcfbc;
  font-size: 27px;
  font-weight: 800;
}

.launchpad-feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #e4f8f3;
  color: #00a982;
}

.launchpad-feature-card h3 {
  margin: 22px 0 10px;
  color: #152420;
  font-size:20px;
  font-weight:600;
}

.launchpad-feature-card p {
  margin: 0;
  color: #71817d;
  font-size: 14px;
  line-height: 1.7;
}


/* PROJECTS */

.launchpad-projects {
  padding:50px 0px;
  background:#e4f5f1;
}

.launchpad-project-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom:22px;
}

.launchpad-project-heading h2 {
  margin: 9px 0 0;
  color: #13221f;
  font-size: 38px;
  font-weight: 700;
}

.launchpad-project-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.launch-project-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.launch-project-card {
  overflow: hidden;
  border: 1px solid #e1e9e6;
  border-radius: 19px;
  background: #fff;
}

.project-visual {
  position: relative;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-one {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,201,166,.4), transparent 25%),
    #08211d;
}

.project-two {
  background:
    radial-gradient(circle at 50% 50%, rgba(50,130,255,.35), transparent 27%),
    #0c1727;
}

.project-three {
  background:
    radial-gradient(circle at 50% 50%, rgba(150,90,255,.35), transparent 25%),
    #171127;
}

.project-symbol {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 23px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.project-status {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 6px 9px;
  border-radius: 20px;
  background: rgba(0,201,166,.14);
  color: #55dfc1;
  font-size:12px;
  font-weight: 700;
}

.project-status i {
  font-size: 6px;
}

.project-status.upcoming {
  color: #8db9ff;
  background: rgba(70,130,255,.14);
}

.project-status.funded {
  color: #b89aff;
  background: rgba(150,90,255,.14);
}

.project-content {
  padding: 22px;
}

.project-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.project-title h3 {
  margin: 0;
  font-size: 18px;
  color: #152420;
  font-weight: 700;
}

.project-title span {
  display: block;
  margin-top: 4px;
  color: #81908c;
  font-size: 10px;
}

.project-title > i {
  color: #9aa9a5;
}

.project-details {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin:5px 0;
}

.project-details small,
.project-details strong {
  display: block;
}

.project-details small {
  color: #889792;
  font-size:13px;
}

.project-details strong {
  margin-top: 5px;
  color: #263732;
  font-size: 15px;
}

.project-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #8a9995;
  font-size:12px;
}

.project-progress b {
  color: #00a982;
}

.project-progress-bar span {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: #00b98e;
}

.project-coming,
.project-complete {
  padding-top: 14px;
  border-top: 1px solid #edf1f0;
  color: #788984;
  font-size: 13px;
}

.project-coming i {
  color: #00a982;
}

.project-complete {
  color: #00a982;
}


/* PROCESS */

.launchpad-process {
  padding:55px 0;
  background: #fff;
}

.launch-process-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 25px;
}

.launch-process-line:before {
  content: "";
  position: absolute;
  top: 26px;
  left: 11%;
  right: 11%;
  height: 1px;
  background: #dce9e5;
}

.launch-process-item {
  position: relative;
  z-index: 2;
  text-align: center;
}

.process-circle {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 6px solid #fff;
  border-radius: 50%;
  background: #e4f8f3;
  color: #00a982;
}

.launch-process-item > span {
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
}

.launch-process-item h3 {
  margin: 8px 0;
  color: #172723;
  font-size:24px;
  font-weight:700;
}

.launch-process-item p {
  max-width: 230px;
  margin: auto;
  color: #71817d;
  font-size: 13px;
  line-height: 1.7;
}


/* CTA */

.launchpad-cta {
  padding:30px 0;
  background: #071715;
}

.launchpad-cta-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 48px;
  overflow: hidden;
  border: 1px solid rgba(0,201,166,.17);
  border-radius: 23px;
  background:
    radial-gradient(circle at 85% 50%, rgba(0,201,166,.13), transparent 30%),
    #0b211e;
}

.cta-rocket {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(0,201,166,.12);
  color: #00c9a6;
  font-size: 27px;
}

.launchpad-cta-box > div:nth-child(2) {
  flex: 1;
}

.launchpad-cta-box span {
  color: #00c9a6;
  font-size: 12px;
  font-weight: 700;
}

.launchpad-cta-box h2 {
  margin: 7px 0;
  color: #fff;
  font-size: 38px;
}

.launchpad-cta-box p {
  margin: 0;
  color: #91a8a2;
  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 991px) {

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

  .launchpad-hero-content {
    text-align: center;
  }

  .launchpad-breadcrumb,
  .launchpad-kicker,
  .launchpad-buttons {
    justify-content: center;
  }

  .launchpad-hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }

  .launchpad-stats {
    justify-content: center;
  }

  .launchpad-feature-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .launch-project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .launch-process-line {
    grid-template-columns: repeat(2,1fr);
    row-gap: 50px;
  }

  .launch-process-line:before {
    display: none;
  }

  .launchpad-cta-box {
    flex-wrap: wrap;
  }

}


@media (max-width: 576px) {

  .launchpad-hero {
    padding: 70px 0;
  }

  .launchpad-hero h1 {
    font-size: 40px;
    letter-spacing: -1px;
  }

  .launchpad-stats {
    gap: 17px;
  }

  .launchpad-hero-visual {
    min-height: 400px;
  }

  .launch-sale-card {
    left: 0;
    bottom: 10px;
    width: 220px;
  }

  .floating-rocket {
    right: 0;
    top: 20px;
  }

  .launchpad-feature-grid,
  .launch-project-grid,
  .launch-process-line {
    grid-template-columns: 1fr;
  }

  .launchpad-project-heading {
    display: block;
  }

  .launchpad-project-heading h2 {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .launchpad-cta-box {
    padding: 32px 24px;
  }

  .launchpad-cta-box h2 {
    font-size: 30px;
  }

}

/* =========================================================
   TOKEN CREATION PAGE CSS
========================================================= */


/* ================= TOKEN HERO ================= */

.token-hero {
  position: relative;
  overflow: hidden;
  padding:0px 0 5px;
  background: #061714;
  color: #fff;
}

.token-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .15;
  background: #00c9a6;
}

.token-glow-one {
  top: -180px;
  left: -150px;
}

.token-glow-two {
  right: -180px;
  bottom: -220px;
}


.token-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 65px;
}


/* Breadcrumb */

.token-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: #8ea7a2;
  font-size: 13px;
  margin-bottom: 22px;
}

.token-breadcrumb a {
  color: #9eb8b2;
  text-decoration: none;
}

.token-breadcrumb a:hover {
  color: #00c9a6;
}


/* Kicker */

.token-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #00d3ae;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}


/* Heading */

.token-hero-content h1 {
  font-size:44px;
  line-height: 1.04;
  font-weight:700;
  margin: 0 0 20px;
}

.token-hero-content h1 span {
  display: block;
  color: #00c9a6;
}


/* Paragraph */

.token-hero-content > p {
  max-width: 680px;
  color: #b6c9c5;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 28px;
}


/* Buttons */

.token-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 38px;
}

.token-btn-primary,
.token-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}

.token-btn-primary {
  background: #00b98e;
  color: #fff;
}

.token-btn-primary:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}

.token-btn-outline {
  border: 1px solid #36514c;
  color: #fff;
}

.token-btn-outline:hover {
  border-color: #00c9a6;
  color: #00c9a6;
}


/* Stats */

.token-stats {
  display: flex;
  gap: 45px;
}

.token-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.token-stats strong {
  font-size: 19px;
}

.token-stats span {
  color: #7f9994;
  font-size: 12px;
}


/* ================= HERO VISUAL ================= */

.token-hero-visual {
  min-height: 530px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.token-hero-visual .vs-icon{width:3em; height:3em;}

.token-ring {
  position: absolute;
  border: 1px solid rgba(0,201,166,.18);
  border-radius: 50%;
}

.ring-one {
  width: 430px;
  height: 430px;
}

.ring-two {
  width: 340px;
  height: 340px;
}


.token-coin {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  padding: 10px;
  background: linear-gradient(145deg, #00d5ae, #006f5e);
  box-shadow:
    0 0 60px rgba(0,201,166,.28),
    inset 0 0 25px rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  z-index: 2;
}

.coin-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #09231f;
  box-shadow: inset 0 0 30px rgba(0,201,166,.18);
}

.coin-inner i {
  font-size: 48px;
  color: #00d3ae;
  margin-bottom: 9px;
}

.coin-inner strong {
  font-size:42px;
  letter-spacing: 2px;
}

.coin-inner span {
  color: #7ea59e;
  font-size: 11px;
  letter-spacing: 3px;
}


/* Floating Cards */

.token-floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: rgba(8,28,25,.94);
  border: 1px solid #23423d;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.token-floating-card i {
  color: #00c9a6;
  font-size: 19px;
}

.token-floating-card strong {
  display: block;
  font-size:16px;
}

.token-floating-card small {
  display: block;
  color: #78938e;
  font-size:12px;
  margin-top:0px;
}

.card-one {
  top: 70px;
  left: 300px;
}

.card-two {
    right: -5px;
    top: 415px;
    margin-top: -10px;
    bottom: 55px;
}

.card-three {
  bottom: 55px;
  left: 30px;
}


/* ================= COMMON SECTION HEADING ================= */

.token-section-heading {
  max-width:780px;
  margin-bottom:20px;
}

.token-section-heading > span {
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.token-section-heading h2 {
  margin: 8px 0 10px;
  font-size: 36px;
  line-height: 1.15;
  color: #09221e;
  font-weight:700;
}

.token-section-heading p {
  margin: 0;
  color: #667c77;
  font-size: 17px;
  line-height: 1.55;
}


/* ================= FEATURES ================= */

.token-features {
  padding:45px 0;
  background: #f5faf9;
}

.token-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.token-feature-card {
  padding: 28px 23px;
  min-height: 215px;
  background: #fff;
  border:1px solid #b1d7cc;
  border-radius:22px;
  transition: .3s;
}
.token-feature-card .vs-icon{width:2em; height:2em;}

.token-feature-card:hover {
  transform: translateY(-5px);
  border-color: #9edfd2;
  box-shadow: 0 15px 35px rgba(7,40,34,.07);
}

.token-feature-icon {
  width: 47px;
  height: 47px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5f8f4;
  color: #00a982;
  font-size: 19px;
  margin-bottom: 16px;
}

.token-feature-card h3 {
  margin: 0 0 7px;
  font-size: 18px;
  color: #102a26;
}

.token-feature-card p {
  margin: 0;
  color: #71837f;
  font-size: 15px;
  line-height: 1.55;
}


/* ================= TOKEN TYPES ================= */

.token-types {
  padding:50px 0;
  background: #071b18;
  color: #fff;
}

.token-types .token-section-heading h2 {
  color: #fff;
}

.token-types .token-section-heading p {
  color: #91aaa5;
}

.token-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.token-type-card {
  position: relative;
  overflow: hidden;
  padding: 28px 22px;
  min-height: 245px;
  border: 1px solid #1d3b36;
  border-radius: 13px;
  background: #0a2420;
  transition: .3s;
}

.token-type-card:hover {
  transform: translateY(-6px);
  border-color: #00c9a6;
}

.type-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
  font-size: 19px;
  margin-bottom: 18px;
}

.token-type-card h3 {
  font-size: 19px;
  margin: 0 0 8px;
}

.token-type-card p {
  color: #8fa9a4;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.token-type-card > span {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: #1d4039;
  font-size: 38px;
  font-weight: 800;
}


/* ================= CUSTOMIZATION ================= */

.token-custom {
  padding:26px 0px 23px;
  background: #f5faf9;
}

.token-custom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap:10px;
}

.token-custom-visual {
  padding: 20px;
}

.custom-window {
  background: #071b18;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 25px 60px rgba(5,35,30,.15);
}

.custom-window-top {
  display: flex;
  gap: 6px;
  padding-bottom: 18px;
}

.custom-window-top span {
  width: 8px;
  height: 8px;
  background: #00db31;
  border-radius: 50%;
}

.custom-code {
  padding: 20px;
  border-radius: 10px;
  background: #0c2823;
}

.custom-code div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid #183a34;
  font-size: 14px;
}

.custom-code div:last-child {
  border-bottom: 0;
}

.custom-code b {
  color: #fff;
}

.custom-code strong {
  color: #00c9a6;
}

.custom-success {
  margin-top: 15px;
  padding: 13px;
  border-radius: 8px;
  background: rgba(0,201,166,.09);
  color: #00c9a6;
  font-size: 13px;
}

.token-custom-content > span {
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.token-custom-content h2 {
  color: #0b2924;
  font-size: 42px;
  line-height: 1.1;
  margin: 8px 0 14px;
}

.token-custom-content h2 strong {
  display: block;
  color: #00a982;
}

.token-custom-content > p {
  color: #657b76;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.custom-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.custom-list div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #304d47;
  font-size: 14px;
}

.custom-list i {
  color: #00b98e;
}


/* ================= NETWORKS ================= */

.token-networks {
  padding: 50px 0px 10px;
  background: #fff;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.network-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border: 1px solid #b3d7cc;
  border-radius: 12px;
  transition: .3s;
}

.network-card:hover {
  transform: translateY(-4px);
  border-color: #b7e4da;
  box-shadow: 0 15px 35px rgba(7,40,34,.08);
}

.network-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background:#b9f1e2;
  color: #00a982;
  font-size: 20px;
}

.network-card h3 {
  margin: 0 0 3px;
  font-size: 16px;
  color: #102c27;
}

.network-card p {
  margin: 0;
  font-size: 12px;
  color: #82928e;
}


/* ================= PROCESS ================= */

.token-process {
  padding:30px 0;
  background: #fff;
}

.token-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.token-process-item {
  display: flex;
  gap: 13px;
  padding: 24px;
  min-height: 150px;
  border:1px solid #a0c3bb;
  border-radius: 11px;
  background: #fff;
  transition: .3s;
}

.token-process-item:hover {
  transform: translateY(-4px);
  border-color: #b5ded5;
}

.token-process-icon {
  min-width: 43px;
  height: 43px;
  border-radius: 9px;
  background: #09221e;
  color: #00c9a6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-process-item span {
  color: #00a982;
  font-size:16px;
  font-weight: 700;
}

.token-process-item h3 {
  margin: 3px 0 6px;
  font-size: 17px;
  color: #122b27;
}

.token-process-item p {
  margin: 0;
  color: #71827f;
  font-size: 14px;
  line-height: 1.5;
}


/* ================= CTA ================= */

.token-cta {
  padding:30px 0;
  background: #f5faf9;
}

.token-cta-box {
  padding: 45px 50px;
  border-radius: 15px;
  background: #07201c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.token-cta-box span {
  color: #00c9a6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.token-cta-box h2 {
  margin: 6px 0 5px;
  color: #fff;
  font-size: 34px;
}

.token-cta-box p {
  margin: 0;
  color: #9bb4af;
  font-size: 16px;
}

.token-cta-box a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #00b98e;
  color: #fff;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
}

.token-cta-box a:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .token-hero-grid {
    gap: 35px;
  }

  .token-feature-grid,
  .token-types-grid,
  .network-grid,
  .token-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 991px) {

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

  .token-hero-content {
    max-width: 800px;
  }

  .token-hero-visual {
    min-height: 450px;
  }

  .token-custom-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

}


@media (max-width: 600px) {

  .token-hero {
    padding: 55px 0 45px;
  }

  .token-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.5px;
  }

  .token-hero-content > p {
    font-size: 17px;
    line-height: 1.55;
  }

  .token-buttons {
    margin-bottom: 28px;
  }

  .token-stats {
    gap: 20px;
    flex-wrap: wrap;
  }

  .token-hero-visual {
    min-height: 350px;
  }

  .token-coin {
    width: 190px;
    height: 190px;
  }

  .coin-inner i {
    font-size: 35px;
  }

  .coin-inner strong {
    font-size: 23px;
  }

  .ring-one {
    width: 290px;
    height: 290px;
  }

  .ring-two {
    width: 230px;
    height: 230px;
  }

  .token-floating-card {
    transform: scale(.78);
  }

  .card-one {
    left: -20px;
    top: 35px;
  }

  .card-two {
    right: -20px;
    top: 145px;
  }

  .card-three {
    left: -5px;
    bottom: 15px;
  }


  .token-features,
  .token-types,
  .token-custom,
  .token-networks,
  .token-process {
    padding: 60px 0;
  }


  .token-feature-grid,
  .token-types-grid,
  .network-grid,
  .token-process-grid {
    grid-template-columns: 1fr;
  }


  .token-section-heading {
    margin-bottom: 28px;
  }

  .token-section-heading h2 {
    font-size: 29px;
  }

  .token-section-heading p {
    font-size: 16px;
  }


  .token-custom-visual {
    padding: 0;
  }

  .custom-window {
    padding: 14px;
  }

  .custom-code {
    padding: 14px;
  }

  .custom-code div {
    font-size: 11px;
  }

  .token-custom-content h2 {
    font-size: 34px;
  }

  .token-custom-content > p {
    font-size: 16px;
  }

  .custom-list {
    grid-template-columns: 1fr;
  }


  .token-cta {
    padding: 55px 0;
  }

  .token-cta-box {
    padding: 30px 22px;
    flex-direction: column;
    align-items: flex-start;
  }

  .token-cta-box h2 {
    font-size: 28px;
  }

  .token-cta-box a {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   NFT MARKETPLACE PAGE
========================================================= */


/* ================= HERO ================= */

.nft-hero {
  position: relative;
  overflow: hidden;
  padding:20px 0 20px;
  background: #061714;
  color: #fff;
}

.nft-hero-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(130px);
  opacity: .12;
  pointer-events: none;
}

.nft-glow-one {
  left: -220px;
  top: -180px;
}

.nft-glow-two {
  right: -220px;
  bottom: -240px;
}


.nft-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
}


/* ================= BREADCRUMB ================= */

.nft-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
  color: #78938d;
  font-size: 13px;
}

.nft-breadcrumb a {
  color: #9bb5af;
  text-decoration: none;
}

.nft-breadcrumb a:hover {
  color: #00c9a6;
}


/* ================= KICKER ================= */

.nft-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #00d3ae;
  font-size: 14px;
  font-weight: 700;
}


/* ================= HERO TEXT ================= */

.nft-hero-content h1 {
  max-width: 800px;
  margin: 0 0 20px;
  font-size:40px;
  line-height: 1.04;
  font-weight:700;
}

.nft-hero-content h1 span {
  display: block;
  color: #00c9a6;
}

.nft-hero-content > p {
  max-width: 630px;
  margin: 0 0 28px;
  color: #b1c7c1;
  font-size: 18px;
  line-height: 1.65;
}


/* ================= BUTTONS ================= */

.nft-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 35px;
}

.nft-btn-primary,
.nft-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.nft-btn-primary {
  background: #00b98e;
  color: #fff;
}

.nft-btn-primary:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}

.nft-btn-outline {
  border: 1px solid #34524c;
  color: #fff;
}

.nft-btn-outline:hover {
  border-color: #00c9a6;
  color: #00c9a6;
}


/* ================= HERO STATS ================= */

.nft-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
}

.nft-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nft-stats strong {
  font-size: 17px;
}

.nft-stats span {
  color: #718c86;
  font-size:15px;
}


/* ================= HERO IMAGE ================= */

.nft-hero-visual {
  position: relative;
  min-height: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nft-main-image-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 475px;
  overflow: hidden;
  border: 1px solid #285048;
  border-radius: 18px;
  background: #0a211e;
  box-shadow: 0 35px 80px rgba(0,0,0,.38);
  transform: rotate(1.5deg);
}

.nft-main-image-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: .6s ease;
}

.nft-main-image-card:hover img {
  transform: scale(1.05);
}

.nft-image-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(3,16,14,.12) 45%,
      rgba(3,16,14,.94) 100%
    );
}

.nft-image-info {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.nft-image-info small {
  display: block;
  margin-bottom: 4px;
  color: #83a29a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.nft-image-info strong {
  display: block;
  color: #fff;
  font-size: 21px;
}

.nft-image-price {
  text-align: right;
}

.nft-image-price strong {
  color: #00d3ae;
  font-size: 17px;
}

.nft-image-price i {
  margin-right: 3px;
}


/* ================= FLOATING AUCTION ================= */

.nft-floating-auction,
.nft-floating-wallet {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #2b4d46;
  border-radius: 10px;
  background: rgba(7,29,26,.96);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.nft-floating-auction {
  top: 55px;
  left: -28px;
}

.nft-floating-wallet {
  right: -18px;
  bottom: 60px;
}

.nft-auction-icon,
.nft-wallet-icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.nft-floating-auction small,
.nft-floating-wallet small {
  display: block;
  color: #6d8882;
  font-size:12px;
}

.nft-floating-auction strong,
.nft-floating-wallet strong {
  display: block;
  color: #fff;
  font-size: 11px;
}

.nft-floating-auction > span {
  color: #00c9a6;
}


/* ================= MARKET STATS ================= */

.nft-market-stats {
  padding: 0;
  background: #061714;
}

.nft-market-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #183630;
}

.nft-market-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 25px 20px;
  border-right: 1px solid #183630;
}

.nft-market-stat:last-child {
  border-right: 0;
}

.nft-market-stat > i {
  color: #00c9a6;
  font-size: 20px;
}

.nft-market-stat strong,
.nft-market-stat span {
  display: block;
}

.nft-market-stat strong {
  color: #fff;
  font-size:22px;
}

.nft-market-stat span {
      margin-top: -6px;
    color: #0de7b7;
    font-size: 14px;
}


/* ================= COMMON HEADING ================= */

.nft-section-heading {
  max-width: 870px;
  margin-bottom:20px;
}

.nft-section-heading > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.nft-section-heading h2 {
  margin: 8px 0 5px;
  color: #09221e;
  font-size: 38px;
  line-height: 1.13;
  letter-spacing:0px;
  font-weight:800;
}

.nft-section-heading h2 strong {
  color: #00a982;
}

.nft-section-heading p {
  margin: 0;
  color: #687d78;
  font-size: 16px;
  line-height: 1.6;
}

.nft-heading-center {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ================= TRENDING ================= */

.nft-trending {
  padding:45px 0;
  background: #fff;
}

.nft-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.nft-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.nft-view-link:hover {
  color: #007e68;
}


.nft-collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.nft-collection-card {
  overflow: hidden;
  border:1px solid #a9c9c1;
  border-radius: 14px;
  background: #fff;
  transition: .35s;
}

.nft-collection-card:hover {
  transform: translateY(-7px);
  border-color: #a4ddd3;
  box-shadow: 0 20px 45px rgba(6,40,34,.1);
}


/* Collection image */

.nft-collection-image {
  position: relative;
  height:170px;
  overflow: hidden;
  background: #071a17;
}

.nft-collection-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: .5s;
}

.nft-collection-card:hover .nft-collection-image img {
  transform: scale(1.07);
}

.nft-collection-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.28)
  );
  pointer-events: none;
}


/* Badge */

.nft-collection-badge {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(4,25,21,.85);
  color: #00d1aa;
  font-size:10px;
  font-weight: 800;
  letter-spacing: .6px;
}

.nft-collection-badge i {
  margin-right: 3px;
}


/* Heart */

.nft-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
}


/* Collection content */

.nft-collection-content {
  padding: 17px;
}

.nft-collection-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.nft-collection-title small {
  color: #82938f;
  font-size: 13px;
}

.nft-collection-title h3 {
  margin: 3px 0 0;
  color: #122f2a;
  font-size:20px;
}

.nft-collection-title > span {
  color: #81928e;
  font-size: 10px;
}


.nft-collection-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  padding-top: 6px;
  border-top: 1px solid #e6efed;
}

.nft-collection-bottom small,
.nft-collection-bottom strong {
  display: block;
}

.nft-collection-bottom small {
  margin-bottom: 3px;
  color: #84948f;
  font-size:12px;
}

.nft-collection-bottom strong {
  color: #172f2b;
  font-size: 16px;
}

.nft-collection-bottom strong i {
  color: #00a982;
}

.nft-collection-bottom button {
  padding: 7px 9px;
    border: 0px solid #d7e7e3;
    border-radius: 6px;
    background: #00a982;
    color: #ffffff;
    font-size: 14px;
}


/* ================= FEATURES ================= */

.nft-features {
  padding:45px 0;
  background:#eafbf5;
}

.nft-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.nft-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 27px 22px;
  border: 1px solid #dfebe8;
  border-radius: 13px;
  background: #fff;
  transition: .3s;
}

.nft-feature-card:hover {
  transform: translateY(-6px);
  border-color: #9ad9ce;
  box-shadow: 0 18px 40px rgba(7,40,34,.08);
}

.nft-feature-icon {
  width: 55px;
  height:55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #e3f8f3;
  color: #00a982;
  font-size:28px;
}

.nft-feature-number {
  position: absolute;
  right: 17px;
  top: 12px;
  color:#cde3dc;
  font-size: 42px;
  font-weight: 800;
}

.nft-feature-card h3 {
  position: relative;
  margin: 0 0 9px;
  color: #102b26;
  font-size: 18px;
}

.nft-feature-card p {
  position: relative;
  margin: 0 0 17px;
  color: #71837f;
  font-size: 14px;
  line-height: 1.6;
}

.nft-feature-card a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00a982;
  font-size:13px;
  font-weight: 700;
  text-decoration: none;
}


/* ================= CATEGORIES ================= */

.nft-categories {
  padding:45px 0;
  background: #fff;
}

.nft-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.nft-category-card {
  overflow: hidden;
  border: 1px solid #e0ebe8;
  border-radius: 13px;
  background: #fff;
  transition: .3s;
}

.nft-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(7,40,34,.1);
}

.nft-category-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.nft-category-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: .5s;
}

.nft-category-card:hover .nft-category-image img {
  transform: scale(1.08);
}

.nft-category-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0,0,0,.55)
  );
}

.nft-category-image > div {
  position: absolute;
  z-index: 2;
  left: 15px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(4,24,21,.8);
  color: #00d1aa;
}

.nft-category-card h3 {
  margin: 16px 16px 0px;
    color: #102c27;
    font-size: 23px;
    font-weight: 700;
}

.nft-category-card > span {
  display: block;
  margin: 0 16px 18px;
  color: #81918d;
  font-size:14px;
}


/* ================= CREATOR ================= */

.nft-creator {
  padding:50px 0;
  background:#e8f3f1;
}

.nft-creator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
}


/* Creator image */

.nft-creator-visual {
  position: relative;
}

.nft-creator-main-image {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 17px;
  background: #071a17;
  box-shadow: 0 25px 65px rgba(5,40,34,.12);
}

.nft-creator-main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.nft-creator-main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(3,18,15,.9)
  );
}

.nft-creator-overlay {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 23px;
}

.nft-creator-overlay span {
  display: inline-block;
  margin-bottom: 6px;
  color: #00d1aa;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
}

.nft-creator-overlay strong {
  display: block;
  color: #fff;
  font-size: 23px;
}


/* Creator mini card */

.nft-creator-mini-card {
  position: absolute;
  z-index: 4;
  right: -25px;
  bottom: 55px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid #d3e5e0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(5,35,30,.13);
}

.nft-creator-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e4f8f3;
  color: #00a982;
}

.nft-creator-mini-card small {
  display: block;
  color: #879793;
  font-size: 8px;
}

.nft-creator-mini-card strong {
  display: block;
  color: #102d27;
  font-size: 12px;
}

.nft-creator-mini-card > i {
  color: #00a982;
}


/* Creator content */

.nft-creator-content > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nft-creator-content h2 {
  margin: 8px 0 15px;
  color: #0b2924;
  font-size: 45px;
  line-height: 1.1;
  font-weight: 800;
}

.nft-creator-content h2 strong {
  display: block;
  color: #00a982;
}

.nft-creator-content > p {
  max-width: 590px;
  margin: 0 0 25px;
  color: #657b76;
  font-size: 16px;
  line-height: 1.65;
}

.nft-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.nft-check-list div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #304d47;
  font-size:14px;
}

.nft-check-list i {
  color: #00b98e;
}

.nft-creator-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 27px;
  padding: 13px 19px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: .3s;
}

.nft-creator-btn:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}


/* ================= STANDARDS ================= */

.nft-standards {
  padding:50px 0;
  background: #071b18;
}

.nft-standards .nft-section-heading h2 {
  color: #fff;
}

.nft-standards .nft-section-heading p {
  color: #91aaa5;
}

.nft-standard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.nft-standard-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 28px 24px;
  border: 1px solid #1e3d37;
  border-radius: 13px;
  background: #0a2420;
  transition: .3s;
}

.nft-standard-card:hover {
  transform: translateY(-5px);
  border-color: #2c655a;
}

.standard-number {
  position: absolute;
  right: 18px;
  top: 12px;
  color:#4a746c;
  font-size: 40px;
  font-weight: 800;
}

.standard-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 11px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
  font-size: 20px;
}

.nft-standard-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
  font-weight:700;
}

.nft-standard-card p {
  margin: 0 0 20px;
  color: #8fa9a4;
  font-size: 14px;
  line-height: 1.55;
}

.nft-standard-card > span {
  display: inline-block;
  padding: 6px 9px;
  border: 1px solid #24483f;
  border-radius: 6px;
  color: #00c9a6;
  font-size:15px;
}


/* ================= PROCESS ================= */

.nft-process {
  padding:50px 0px;
  background:#e4f3f0;
}

.nft-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.nft-process-item {
  position: relative;
  min-height: 230px;
  padding: 25px 22px;
  border:1px solid #afcbc4;
  border-radius: 12px;
  background: #fff;
  transition: .3s;
}

.nft-process-item:hover {
  transform: translateY(-5px);
  border-color: #a8ded4;
}

.nft-process-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 10px;
    background: #09221e;
    color: #00c9a6;
    font-size: 25px;
}

.nft-process-item > span {
  color: #00a982;
  font-size: 18px;
  font-weight: 800;
}

.nft-process-item h3 {
  margin: 5px 0 8px;
  color: #102c27;
  font-size: 17px;
  font-weight:600;
}

.nft-process-item p {
  margin: 0;
  color: #71827f;
  font-size: 14px;
  line-height: 1.5;
}


/* ================= CTA ================= */

.nft-cta {
  padding:50px 0;
  background: #fff;
}

.nft-cta-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px 52px;
  border-radius: 17px;
  background: #07201c;
}

.nft-cta-box::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(80px);
  opacity: .14;
}

.nft-cta-box > div {
  position: relative;
  z-index: 2;
}

.nft-cta-box span {
  color: #00c9a6;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nft-cta-box h2 {
  max-width: 700px;
  margin: 7px 0 7px;
  color: #fff;
  font-size: 35px;
  line-height: 1.15;
}

.nft-cta-box h2 strong {
  color: #00c9a6;
}

.nft-cta-box p {
  margin: 0;
  color: #9bb4af;
  font-size: 15px;
  line-height: 1.5;
}

.nft-cta-box a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 14px 21px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: .3s;
}

.nft-cta-box a:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE
========================================================= */


@media (max-width: 1100px) {

  .nft-hero-grid {
    gap: 35px;
  }

  .nft-collection-grid,
  .nft-feature-grid,
  .nft-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nft-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 991px) {

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

  .nft-hero-content {
    max-width: 800px;
  }

  .nft-hero-visual {
    min-height: 520px;
  }

  .nft-market-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nft-market-stat:nth-child(2) {
    border-right: 0;
  }

  .nft-creator-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .nft-standard-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}


@media (max-width: 700px) {

  .nft-collection-grid,
  .nft-feature-grid,
  .nft-category-grid,
  .nft-process-grid,
  .nft-standard-grid {
    grid-template-columns: 1fr;
  }

  .nft-heading-row {
    display: block;
  }

  .nft-view-link {
    margin: -10px 0 30px;
  }

  .nft-floating-auction {
    left: -5px;
  }

  .nft-floating-wallet {
    right: -5px;
  }

  .nft-check-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .nft-hero {
    padding: 55px 0 60px;
  }

  .nft-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.6px;
  }

  .nft-hero-content > p {
    font-size: 16px;
  }

  .nft-stats {
    gap: 20px;
  }

  .nft-hero-visual {
    min-height: 390px;
  }

  .nft-main-image-card {
    height: 380px;
  }

  .nft-floating-auction,
  .nft-floating-wallet {
    transform: scale(.82);
  }

  .nft-floating-auction {
    top: 25px;
    left: -18px;
  }

  .nft-floating-wallet {
    right: -18px;
    bottom: 25px;
  }

  .nft-image-info {
    left: 17px;
    right: 17px;
    bottom: 17px;
  }

  .nft-image-info strong {
    font-size: 17px;
  }

  .nft-image-price strong {
    font-size: 14px;
  }


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

  .nft-market-stat {
    padding: 20px 12px;
  }

  .nft-market-stat:nth-child(2) {
    border-right: 0;
  }

  .nft-market-stat strong {
    font-size: 16px;
  }


  .nft-trending,
  .nft-features,
  .nft-categories,
  .nft-creator,
  .nft-standards,
  .nft-process {
    padding: 60px 0;
  }


  .nft-section-heading {
    margin-bottom: 22px;
  }

  .nft-section-heading h2 {
    font-size: 30px;
  }

  .nft-section-heading p {
    font-size: 15px;
  }


  .nft-collection-image {
    height:180px;
  }


  .nft-creator-main-image {
    height: 390px;
  }

  .nft-creator-mini-card {
    right: -5px;
    bottom: 30px;
    transform: scale(.88);
    transform-origin: right bottom;
  }

  .nft-creator-content h2 {
    font-size: 34px;
  }


  .nft-standard-card {
    min-height: 225px;
  }


  .nft-cta {
    padding: 55px 0;
  }

  .nft-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 23px;
  }

  .nft-cta-box h2 {
    font-size: 28px;
  }

  .nft-cta-box a {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   STAKING PLATFORM
========================================================= */


/* ================= HERO ================= */

.stake-hero {
  position: relative;
    overflow: hidden;
    padding: 33px 0 30px;
    background: #061714;
    color: #fff;
}

.stake-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(130px);
  opacity: .11;
  pointer-events: none;
}

.stake-orb-one {
  left: -220px;
  top: -200px;
}

.stake-orb-two {
  right: -220px;
  bottom: -220px;
}

.stake-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 65px;
}


/* ================= BREADCRUMB ================= */

.stake-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
  color: #78938d;
  font-size: 13px;
}

.stake-breadcrumb a {
  color: #9bb5af;
  text-decoration: none;
}

.stake-breadcrumb a:hover {
  color: #00c9a6;
}


/* ================= KICKER ================= */

.stake-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #00d3ae;
  font-size: 14px;
  font-weight: 700;
}


/* ================= HERO TEXT ================= */

.stake-hero-content h1 {
  max-width: 750px;
  margin: 0 0 20px;
  font-size: 36px;
  line-height: 1.04;
  font-weight:800;
}

.stake-hero-content h1 span {
  display: block;
  color: #00c9a6;
}

.stake-hero-content > p {
  max-width: 630px;
  margin: 0 0 28px;
  color: #b1c7c1;
  font-size: 18px;
  line-height: 1.65;
}


/* ================= BUTTONS ================= */

.stake-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 35px;
}

.stake-btn-primary,
.stake-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.stake-btn-primary {
  background: #00b98e;
  color: #fff;
}

.stake-btn-primary:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}

.stake-btn-outline {
  border: 1px solid #34524c;
  color: #fff;
}

.stake-btn-outline:hover {
  border-color: #00c9a6;
  color: #00c9a6;
}


/* ================= MINI STATS ================= */

.stake-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
}

.stake-mini-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stake-mini-stats strong {
  font-size:22px;
}

.stake-mini-stats span {
  color: #718c86;
  font-size:14px;
}
.stake-hero-content .vs-icon{width: 1.5em; height: 1.5em;}


/* ================= DASHBOARD ================= */

.stake-hero-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stake-dashboard {
  width: 100%;
  max-width: 540px;
  padding: 22px;
  border: 1px solid #254a43;
  border-radius: 18px;
  background: linear-gradient(145deg, #0b2521, #071b18);
  box-shadow: 0 35px 80px rgba(0,0,0,.4);
  transform: rotate(1deg);
}

.stake-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px solid #193a34;
}

.stake-dashboard-top span,
.stake-dashboard-top strong {
  display: block;
}

.stake-dashboard-top span {
  margin-bottom: 4px;
  color: #728e87;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stake-dashboard-top strong {
  color: #fff;
  font-size:20px;
}

.stake-live {
  padding: 6px 8px;
  border: 1px solid #225045;
  border-radius: 6px;
  color:#00c9a6;
  font-size:13px;
  font-weight: 800;
}

.stake-live i {
  margin-right: 4px;
  font-size: 6px;
}


/* Balance */

.stake-balance {
  padding:10px 4px 10px;
}

.stake-balance small {
  display: block;
  margin-bottom: 7px;
  color: #718c86;
  font-size: 12px;
}

.stake-balance > strong {
  display: block;
  color: #fff;
  font-size: 34px;
  letter-spacing: -1px;
}

.stake-balance > strong span {
  color: #7e9992;
  font-size: 13px;
}

.stake-balance-change {
  margin-top: 7px;
  color: #00c9a6;
  font-size:14px;
}

.stake-balance-change i {
  margin-right: 4px;
}


/* Dashboard cards */

.stake-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.stake-dashboard-card {
  position: relative;
  overflow: hidden;
  padding:  17px;
  border: 1px solid #1b3d36;
  border-radius: 10px;
  background: #0d2823;
}

.stake-dashboard-card span,
.stake-dashboard-card strong {
  display: block;
}

.stake-dashboard-card span {
  margin-bottom: 5px;
  color: #718c86;
  font-size:13px;
}

.stake-dashboard-card strong {
  color: #00c9a6;
  font-size: 19px;
}

.stake-dashboard-card > i {
  position: absolute;
  right: 13px;
  bottom: 13px;
  color: #2fbda4;
  font-size: 22px;
}


/* Chart */

.stake-chart {
  margin-top: 12px;
  padding: 17px;
  border: 1px solid #1b3d36;
  border-radius: 10px;
  background: #0b231f;
}

.stake-chart-head {
  display: flex;
  justify-content: space-between;
  color: #8ba49f;
  font-size:12px;
}

.stake-chart-head small {
  color: #536f68;
}

.stake-chart-line {
  position: relative;
  height: 100px;
  margin-top: 15px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      transparent 24%,
      rgba(0,201,166,.07) 25%,
      transparent 26%,
      transparent 49%,
      rgba(0,201,166,.07) 50%,
      transparent 51%,
      transparent 74%,
      rgba(0,201,166,.07) 75%,
      transparent 76%
    );
}

.stake-chart-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 2px;
  background: #00c9a6;
  transform: rotate(-7deg);
  box-shadow:
    65px -8px 0 #00c9a6,
    130px 4px 0 #00c9a6,
    195px -18px 0 #00c9a6,
    260px -25px 0 #00c9a6,
    325px -38px 0 #00c9a6;
}

.chart-point {
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00c9a6;
  box-shadow: 0 0 12px rgba(0,201,166,.8);
}

.point-one {
  left: 2%;
  top: 57%;
}

.point-two {
  left: 20%;
  top: 49%;
}

.point-three {
  left: 38%;
  top: 53%;
}

.point-four {
  left: 56%;
  top: 35%;
}

.point-five {
  left: 74%;
  top: 29%;
}

.point-six {
  right: 3%;
  top: 17%;
}


/* Dashboard footer */

.stake-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: #6e8983;
  font-size:13px;
}

.stake-dashboard-footer i {
  margin-right: 4px;
  color: #00c9a6;
}

.stake-dashboard-footer strong {
  color: #9db4af;
}


/* Floating reward */

.stake-floating-reward {
  position: absolute;
  z-index: 5;
  left: -25px;
  bottom: 90px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid #2b4d46;
  border-radius: 10px;
  background: rgba(7,29,26,.97);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.stake-reward-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.stake-floating-reward small {
  display: block;
  color: #6d8882;
  font-size: 8px;
}

.stake-floating-reward strong {
  color: #fff;
  font-size: 11px;
}

.stake-floating-reward > i {
  color: #00c9a6;
}


/* Floating APY */

.stake-floating-apy {
  position: absolute;
  right: -12px;
  top: 80px;
  z-index: 5;
  padding: 14px 17px;
  border: 1px solid #2b4d46;
  border-radius: 10px;
  background: #0a2521;
  box-shadow: 0 18px 45px rgba(0,0,0,.3);
}

.stake-floating-apy span,
.stake-floating-apy strong {
  display: block;
}

.stake-floating-apy span {
  color: #6e8983;
  font-size: 8px;
}

.stake-floating-apy strong {
  margin-top: 3px;
  color: #00c9a6;
  font-size: 21px;
}


/* ================= STATS ================= */

.stake-stats {
  background: #061714;
}

.stake-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #183630;
}

.stake-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 25px 20px;
  border-right: 1px solid #183630;
}

.stake-stat:last-child {
  border-right: 0;
}

.stake-stat > i {
  color: #00c9a6;
  font-size: 20px;
}

.stake-stat strong,
.stake-stat span {
  display: block;
}

.stake-stat strong {
  color: #fff;
  font-size:24px;
}

.stake-stat span {
  margin-top: 2px;
  color: #718c86;
  font-size: 10px;
}


/* ================= COMMON HEADING ================= */

.stake-section-heading {
  max-width: 700px;
  margin-bottom: 38px;
}

.stake-section-heading > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.stake-section-heading h2 {
  margin:2px 0 5px;
  color: #09221e;
  font-size: 40px;
  line-height: 1.13;
  letter-spacing: -.8px;
}

.stake-section-heading h2 strong {
  color: #00a982;
}

.stake-section-heading p {
  margin: 0;
  color: #687d78;
  font-size: 16px;
  line-height: 1.6;
}

.stake-heading-center {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ================= POOLS ================= */

.stake-pools {
  padding: 85px 0;
  background: #fff;
}

.stake-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.stake-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  color: #00a982;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.stake-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stake-pool-card {
  padding: 24px;
  border: 1px solid #dfebe8;
  border-radius: 14px;
  background: #fff;
  transition: .3s;
}

.stake-pool-card:hover {
  transform: translateY(-6px);
  border-color: #9ad9ce;
  box-shadow: 0 20px 45px rgba(7,40,34,.09);
}

.stake-pool-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stake-token-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
}

.token-green {
  background: #e5f8f3;
  color: #00a982;
}

.token-blue {
  background: #e9f3ff;
  color: #4a8fe7;
}

.token-purple {
  background: #f1eafe;
  color: #8a5bd4;
}

.stake-pool-status {
  padding: 6px 8px;
  border-radius: 5px;
  background: #e9f8f4;
  color: #00a982;
  font-size: 8px;
  font-weight: 800;
}

.stake-pool-status i {
  margin-right: 3px;
  font-size: 5px;
}

.stake-pool-card h3 {
  margin: 19px 0 7px;
  color: #102d28;
  font-size: 19px;
}

.stake-pool-card > p {
  min-height: 46px;
  margin: 0;
  color: #71837f;
  font-size: 13px;
  line-height: 1.55;
}

.stake-pool-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0;
  padding: 15px 0;
  border-top: 1px solid #e6efed;
  border-bottom: 1px solid #e6efed;
}

.stake-pool-data small,
.stake-pool-data strong {
  display: block;
}

.stake-pool-data small {
  margin-bottom: 4px;
  color: #899995;
  font-size: 8px;
}

.stake-pool-data strong {
  color: #17352f;
  font-size: 13px;
}

.stake-pool-data div:first-child strong {
  color: #00a982;
}

.stake-pool-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #00a982;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}


/* ================= FEATURES ================= */

.stake-features {
  padding: 45px 0;
  background:#eaf7f3;
}

.stake-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stake-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 27px 22px;
  border: 1px solid #dfebe8;
  border-radius: 13px;
  background: #fff;
  transition: .3s;
}

.stake-feature-card:hover {
  transform: translateY(-6px);
  border-color: #9ad9ce;
  box-shadow: 0 18px 40px rgba(7,40,34,.08);
}

.stake-feature-icon {
  width: 49px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #e3f8f3;
  color: #00a982;
  font-size: 19px;
}

.stake-feature-number {
  position: absolute;
  right: 17px;
  top: 12px;
  color:#cbe5dd;
  font-size: 42px;
  font-weight: 800;
}

.stake-feature-card h3 {
  position: relative;
  margin: 0 0 9px;
  color: #102b26;
  font-size: 18px;
}

.stake-feature-card p {
  position: relative;
  margin: 0 0 17px;
  color: #71837f;
  font-size: 14px;
  line-height: 1.6;
}

.stake-feature-card a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00a982;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}


/* ================= REWARDS ================= */

.stake-rewards {
  padding:50px 0px 50px;
  background: #fff;
}

.stake-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}


/* Reward dashboard */

.stake-reward-dashboard {
  padding: 22px;
  border:1px solid #aad3c7;
  border-radius: 16px;
  background: #f7fbfa;
  box-shadow: 0 25px 60px rgba(7,40,34,.08);
}

.stake-reward-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2ece9;
}

.stake-reward-header span,
.stake-reward-header strong {
  display: block;
}

.stake-reward-header span {
  margin-bottom: 4px;
  color: #00a982;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.stake-reward-header strong {
  color: #17342e;
  font-size: 17px;
}

.stake-reward-header > i {
  color: #00a982;
  font-size: 21px;
}

.stake-reward-main {
  padding: 25px 5px;
}

.stake-reward-main > small {
  color: #82918d;
  font-size: 10px;
}

.stake-reward-main > strong {
  display: block;
    margin-top: -5px;
    color: #12332c;
    font-size: 29px;
}

.stake-reward-main > strong span {
  color: #81928d;
  font-size: 12px;
}

.stake-reward-progress {
  margin-top: 20px;
}

.reward-progress-top {
  display: flex;
  justify-content: space-between;
  color: #6d807b;
  font-size:13px;
}

.reward-progress-top strong {
  color: #00a982;
}

.reward-progress-bar {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: #deebe7;
}

.reward-progress-bar span {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: #00b98e;
}

.stake-reward-list {
  border-top: 1px solid #e2ece9;
}

.stake-reward-list > div {
      display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid #e6efed;
}

.reward-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00c9a6;
}

.stake-reward-list div div {
  flex: 1;
}

.stake-reward-list strong,
.stake-reward-list small {
  display: block;
}

.stake-reward-list strong {
  color: #18352f;
  font-size: 16px;
}

.stake-reward-list small {
  margin-top: -3px;
    color: #899793;
    font-size: 12px;
}

.stake-reward-list b {
  color: #00a982;
  font-size: 16px;
}


/* Reward content */

.stake-rewards-content > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.stake-rewards-content h2 {
  margin: 8px 0 15px;
  color: #0b2924;
  font-size: 43px;
  line-height: 1.1;
}

.stake-rewards-content h2 strong {
  display: block;
  color: #00a982;
}

.stake-rewards-content > p {
  max-width: 590px;
  margin: 0 0 25px;
  color: #657b76;
  font-size: 16px;
  line-height: 1.65;
}

.stake-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.stake-check-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #304d47;
  font-size:15px;
}

.stake-check-list i {
  color: #00b98e;
}

.stake-reward-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 27px;
  padding:8px 19px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size:18px;
  font-weight: 700;
}
.stake-reward-btn .vs-icon{ stroke: rgb(255 255 255);}


/* ================= ASSETS ================= */

.stake-assets {
  padding: 40px 0;
    background: #e8f5f1;
}

.stake-assets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stake-asset-card {
  padding: 27px 20px;
  text-align: center;
  border:1px solid #b9d5cd;
  border-radius: 13px;
  background: #fff;
  transition: .3s;
}

.stake-asset-card:hover {
  transform: translateY(-5px);
  border-color: #a0dcd2;
}

.stake-asset-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 13px;
  border-radius: 50%;
  font-size: 21px;
}

.stake-asset-icon.eth {
  background: #e9f1ff;
  color: #627eea;
}

.stake-asset-icon.usdt {
  background: #e5f8f1;
  color: #26a17b;
}

.stake-asset-icon.token {
  background: #f0eaff;
  color: #8c61d9;
}

.stake-asset-icon.multi {
  background: #e3f7f5;
  color: #00a982;
}

.stake-asset-card strong,
.stake-asset-card span {
  display: block;
}

.stake-asset-card strong {
  color: #17342e;
  font-size: 20px;
}

.stake-asset-card span {
    margin-top: 0px;
    color: #83928e;
    font-size: 13px;
}


/* ================= SECURITY ================= */

.stake-security {
  padding:45px 0;
  background: #071b18;
  color: #fff;
}

.stake-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.stake-security-content > span {
  color: #00c9a6;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.stake-security-content h2 {
  margin: 8px 0 15px;
  font-size: 42px;
  line-height: 1.1;
}

.stake-security-content h2 strong {
  display: block;
  color: #00c9a6;
}

.stake-security-content > p {
  max-width: 570px;
  margin: 0 0 28px;
  color: #91aaa5;
  font-size: 16px;
  line-height: 1.65;
}

.stake-security-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stake-security-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.security-icon {
  width:50px;
  height:50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #244940;
  border-radius: 9px;
  background: #0b2521;
  color: #00c9a6;
}

.stake-security-list strong,
.stake-security-list span {
  display: block;
}

.stake-security-list strong {
  color: #fff;
  font-size:17px;
}

.stake-security-list span {
  margin-top: 3px;
  color: #758f89;
  font-size: 15px;
}


/* Security visual */

.stake-security-visual {
  position: relative;
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-ring {
  position: absolute;
  border: 1px solid #317e70;
  border-radius: 50%;
}

.ring-one {
  width: 300px;
  height: 300px;
}

.ring-two {
  width: 410px;
  height: 410px;
  border-color:#317e70;
}

.security-core {
  position: relative;
  z-index: 3;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a6659;
  border-radius: 50%;
  background: #0b2823;
  box-shadow: 0 0 70px rgba(0,201,166,.15);
}

.security-core i {
  margin-bottom: 8px;
  color: #00c9a6;
  font-size: 34px;
}

.security-core strong {
  color: #fff;
  font-size:20px;
}

.security-core span {
  margin-top: -4px;
    color: #68857e;
    font-size: 11px;
    letter-spacing: 1px;
}

.security-node {
  position: absolute;
  z-index: 4;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a554c;
  border-radius: 50%;
  background: #0a2521;
  color: #00c9a6;
}

.node-one {
  top: 30px;
  left: 23%;
}

.node-two {
  right: 9%;
  top: 46%;
}

.node-three {
  bottom: 20px;
  left: 25%;
}


/* ================= PROCESS ================= */

.stake-process {
  padding:45px 0;
  background: #f5faf9;
}

.stake-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stake-process-item {
    min-height: 230px;
    padding: 25px 22px;
    border: 1px solid #bcd7d0;
    border-radius: 22px;
    background: #fff;
    transition: .3s;
}

.stake-process-item:hover {
  transform: translateY(-5px);
  border-color: #a8ded4;
}

.stake-process-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  border-radius: 10px;
  background: #09221e;
  color: #00c9a6;
}

.stake-process-item > span {
  color: #00a982;
  font-size:17px;
  font-weight: 800;
}

.stake-process-item h3 {
  margin: 5px 0 8px;
  color: #102c27;
  font-size:22px;
  font-weight:700;
}

.stake-process-item p {
  margin: 0;
  color: #71827f;
  font-size: 14px;
  line-height: 1.5;
}


/* ================= CTA ================= */

.stake-cta {
  padding:5px 0px 50px;
  background: #fff;
}
.stake-cta-box .vs-icon{stroke: rgb(255 255 255);}
.stake-cta-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px 52px;
  border-radius: 17px;
  background: #07201c;
}

.stake-cta-box::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  top: -110px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(80px);
  opacity: .13;
}

.stake-cta-box > div {
  position: relative;
  z-index: 2;
}

.stake-cta-box span {
  color: #00c9a6;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stake-cta-box h2 {
  max-width: 700px;
  margin: 7px 0;
  color: #fff;
  font-size:42px;
  line-height: 1.15;
}

.stake-cta-box h2 strong {
  color: #00c9a6;
}

.stake-cta-box p {
  margin: 0;
  color: #9bb4af;
  font-size: 15px;
}

.stake-cta-box a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding:8px 21px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size:20px;
  font-weight: 700;
}

.stake-cta-box a:hover {
  background: #00d1a5;
  color: #fff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .stake-hero-grid {
    gap: 35px;
  }

  .stake-feature-grid,
  .stake-assets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stake-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 991px) {

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

  .stake-hero-content {
    max-width: 800px;
  }

  .stake-hero-visual {
    min-height: 520px;
  }

  .stake-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stake-stat:nth-child(2) {
    border-right: 0;
  }

  .stake-pool-grid {
    grid-template-columns: 1fr;
  }

  .stake-rewards-grid,
  .stake-security-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .stake-security-visual {
    min-height: 420px;
  }

}


@media (max-width: 700px) {

  .stake-feature-grid,
  .stake-assets-grid,
  .stake-process-grid {
    grid-template-columns: 1fr;
  }

  .stake-heading-row {
    display: block;
  }

  .stake-view-link {
    margin: -10px 0 30px;
  }

  .stake-check-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .stake-hero {
    padding: 55px 0 60px;
  }

  .stake-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.6px;
  }

  .stake-hero-content > p {
    font-size: 16px;
  }

  .stake-mini-stats {
    gap: 20px;
  }

  .stake-hero-visual {
    min-height: 410px;
  }

  .stake-dashboard {
    padding: 15px;
  }

  .stake-balance > strong {
    font-size: 28px;
  }

  .stake-floating-reward,
  .stake-floating-apy {
    transform: scale(.82);
  }

  .stake-floating-reward {
    left: -18px;
    bottom: 35px;
  }

  .stake-floating-apy {
    right: -18px;
    top: 40px;
  }

  .stake-dashboard-card strong {
    font-size: 16px;
  }

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

  .stake-stat {
    padding: 20px 12px;
  }

  .stake-stat strong {
    font-size: 16px;
  }

  .stake-pools,
  .stake-features,
  .stake-rewards,
  .stake-assets,
  .stake-security,
  .stake-process {
    padding: 60px 0;
  }

  .stake-section-heading {
    margin-bottom: 28px;
  }

  .stake-section-heading h2 {
    font-size: 30px;
  }

  .stake-section-heading p {
    font-size: 15px;
  }

  .stake-rewards-content h2,
  .stake-security-content h2 {
    font-size: 34px;
  }

  .stake-security-visual {
    height: 350px;
  }

  .ring-one {
    width: 240px;
    height: 240px;
  }

  .ring-two {
    width: 320px;
    height: 320px;
  }

  .stake-cta {
    padding: 55px 0;
  }

  .stake-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 23px;
  }

  .stake-cta-box h2 {
    font-size: 28px;
  }

  .stake-cta-box a {
    width: 100%;
    justify-content: center;
  }

}



/* =========================================================
   CROSS-CHAIN BRIDGE PAGE
========================================================= */


/* ================= HERO ================= */

.bridge-hero {
  position: relative;
  overflow: hidden;
  padding:18px 0 35px;
  background: #061714;
  color: #fff;
}

.bridge-orb {
  position: absolute;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(130px);
  opacity: .10;
  pointer-events: none;
}

.bridge-orb-one {
  left: -220px;
  top: -210px;
}

.bridge-orb-two {
  right: -220px;
  bottom: -240px;
}

.bridge-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 15px;
}


/* ================= BREADCRUMB ================= */

.bridge-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 21px;
  color: #78938d;
  font-size: 13px;
}

.bridge-breadcrumb a {
  color: #9ab5ae;
  text-decoration: none;
}

.bridge-breadcrumb a:hover {
  color: #00c9a6;
}


/* ================= KICKER ================= */

.bridge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #00d3ae;
  font-size: 14px;
  font-weight: 700;
}


/* ================= HERO CONTENT ================= */

.bridge-hero-content h1 {
  max-width: 700px;
  margin: 0 0 20px;
  font-size:38px;
  line-height: 1.04;
  letter-spacing: -2.8px;
}

.bridge-hero-content h1 span {
  display: block;
  color: #00c9a6;
}

.bridge-hero-content > p {
  max-width: 640px;
  margin: 0 0 28px;
  color: #b2c7c1;
  font-size: 18px;
  line-height: 1.65;
}


/* ================= BUTTONS ================= */

.bridge-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.bridge-btn-primary,
.bridge-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.bridge-btn-primary {
  background: #00b98e;
  color: #fff;
}

.bridge-btn-primary:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}

.bridge-btn-outline {
  border: 1px solid #34534c;
  color: #fff;
}

.bridge-btn-outline:hover {
  border-color: #00c9a6;
  color: #00c9a6;
}


/* ================= MINI STATS ================= */

.bridge-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.bridge-mini-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bridge-mini-stats strong {
  font-size: 17px;
}

.bridge-mini-stats span {
  color: #718c86;
  font-size: 15px;
}


/* ================= HERO DASHBOARD ================= */

.bridge-hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bridge-dashboard {
  width: 100%;
  max-width: 520px;
  padding: 21px;
  border: 1px solid #274a43;
  border-radius: 17px;
  background: linear-gradient(145deg, #0b2621, #071b18);
  box-shadow: 0 35px 80px rgba(0,0,0,.4);
  transform: rotate(1deg);
}

.bridge-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #193a34;
}

.bridge-dashboard-top span,
.bridge-dashboard-top strong {
  display: block;
}

.bridge-dashboard-top span {
  margin-bottom: 4px;
  color: #708b84;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bridge-dashboard-top strong {
  font-size: 16px;
}

.bridge-status {
  padding: 6px 8px;
  border: 1px solid #255047;
  border-radius: 6px;
  color: #00c9a6;
  font-size: 8px;
  font-weight: 800;
}

.bridge-status i {
  margin-right: 4px;
  font-size: 5px;
}


/* ================= NETWORK BOX ================= */

.bridge-network-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #1d4039;
  border-radius: 11px;
  background: #0b211e;
}

.bridge-network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #738d87;
  font-size: 13px;
}

.bridge-network-head button {
  width: 25px;
  height: 25px;
  border: 1px solid #294941;
  border-radius: 6px;
  background: #0d2823;
  color: #77928b;
  font-size: 8px;
}

.bridge-network-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.bridge-chain-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
}

.ethereum-icon {
  background: rgba(98,126,234,.12);
  color: #8299ff;
}

.polygon-icon {
  background: rgba(130,80,223,.12);
  color: #9d78f0;
}

.bridge-network-main div:nth-child(2) {
  flex: 1;
}

.bridge-network-main strong,
.bridge-network-main small {
  display: block;
}

.bridge-network-main strong {
  color: #fff;
  font-size: 13px;
}

.bridge-network-main small {
  margin-top: 3px;
  color: #6f8983;
  font-size:12px;
}

.bridge-balance {
  color: #6e8983;
  font-size: 8px;
}


/* Amount */

.bridge-amount {
  position: relative;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #1c3b35;
  border-radius: 8px;
  background: #091c19;
}

.bridge-amount small {
  display: block;
  margin-bottom: 5px;
  color: #68827c;
  font-size:14px;
}

.bridge-amount strong {
  color: #fff;
  font-size: 23px;
}

.bridge-amount strong span {
  color: #718d86;
  font-size: 10px;
}

.bridge-amount button {
  position: absolute;
  right: 11px;
  bottom: 11px;
  padding: 5px 7px;
  border: 0;
  border-radius: 4px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
  font-size: 7px;
  font-weight: 800;
}


/* Switch */

.bridge-switch {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  height: 0;
}

.bridge-switch span {
  position: relative;
  top: -1px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #31574f;
  border-radius: 50%;
  background: #0a211e;
  color: #00c9a6;
  box-shadow: 0 5px 20px rgba(0,0,0,.3);
  font-size: 12px;
}


/* Transaction info */

.bridge-transaction-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.bridge-transaction-info div {
  padding: 11px;
  border-radius: 8px;
  background: #0b211e;
}

.bridge-transaction-info span,
.bridge-transaction-info strong {
  display: block;
}

.bridge-transaction-info span {
  margin-bottom: 4px;
  color: #6d8781;
  font-size: 8px;
}

.bridge-transaction-info strong {
  color: #c1d1cd;
  font-size: 11px;
}


/* Transfer button */

.bridge-transfer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  padding: 13px;
  border: 0;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  font-size:18px;
  font-weight: 700;
}


/* Footer */

.bridge-dashboard-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: #67827b;
  font-size:14px;
}

.bridge-dashboard-footer i {
  margin-right: 4px;
  color: #00c9a6;
}


/* Floating completed */

.bridge-floating-card,
.bridge-floating-network {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #294c44;
  border-radius: 10px;
  background: rgba(7,29,26,.97);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.bridge-floating-card {
  left: -25px;
  bottom: 85px;
}

.bridge-floating-network {
  right: -12px;
  top: 75px;
}

.bridge-floating-icon,
.network-node-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.bridge-floating-card small,
.bridge-floating-network small {
  display: block;
  color: #69847d;
  font-size: 7px;
}

.bridge-floating-card strong,
.bridge-floating-network strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 11px;
}


/* ================= STATS ================= */

.bridge-stats {
  background: #061714;
}

.bridge-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #193831;
}

.bridge-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 25px 20px;
  border-right: 1px solid #193831;
}

.bridge-stat:last-child {
  border-right: 0;
}

.bridge-stat > i {
  color: #00c9a6;
  font-size: 19px;
}

.bridge-stat strong,
.bridge-stat span {
  display: block;
}

.bridge-stat strong {
  color: #fff;
  font-size: 18px;
}

.bridge-stat span {
  margin-top: 2px;
  color: #718c86;
  font-size: 10px;
}


/* ================= COMMON HEADING ================= */

.bridge-section-heading {
  max-width: 950px;
  margin-bottom: 38px;
}

.bridge-section-heading > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.bridge-section-heading h2 {
  margin: 0px 0 4px;
  color: #09221e;
  font-size:38px;
  line-height: 1.13;
  letter-spacing: -.8px;
}

.bridge-section-heading h2 strong {
  color: #00a982;
}

.bridge-section-heading p {
  margin: 0;
  color: #687d78;
  font-size: 16px;
  line-height: 1.6;
}

.bridge-heading-center {
  max-width:900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ================= NETWORKS ================= */

.bridge-networks {
  padding:50px 0;
  background: #fff;
}

.bridge-network-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.bridge-network-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  border: 1px solid #dfeae7;
  border-radius: 12px;
  background: #f8fbfa;
  transition: .3s;
}

.bridge-network-card:hover {
  transform: translateY(-4px);
  border-color: #9bdad0;
  box-shadow: 0 15px 35px rgba(7,40,34,.07);
}

.network-card-icon {
      width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 22px;
}

.network-card-icon.ethereum {
  background: #eaf0ff;
  color: #627eea;
}

.network-card-icon.bnb {
  background: #fff5d9;
  color: #d99d00;
}

.network-card-icon.polygon {
  background: #f0e9ff;
  color: #8247e5;
}

.network-card-icon.arbitrum {
  background: #e9f4ff;
  color: #2d8cff;
}

.network-card-icon.optimism {
  background: #ffe9ed;
  color: #f04d64;
}

.network-card-icon.base {
  background: #e9f0ff;
  color: #2856d7;
}

.bridge-network-card > div:nth-child(2) {
  flex: 1;
}

.bridge-network-card strong,
.bridge-network-card span {
  display: block;
}

.bridge-network-card strong {
  color: #17342e;
  font-size: 18px;
}

.bridge-network-card span {
  margin-top: 0px;
    color: #82928d;
    font-size: 13px;
}

.network-check {
  color: #00a982;
  font-size: 14px;
}


/* ================= FEATURES ================= */

.bridge-features {
  padding:45px 0;
  background:#ebf4f7;
}

.bridge-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bridge-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 27px 22px;
  border: 1px solid #dfeae7;
  border-radius: 13px;
  background: #fff;
  transition: .3s;
}

.bridge-feature-card:hover {
  transform: translateY(-6px);
  border-color: #9bd9cf;
  box-shadow: 0 20px 40px rgba(7,40,34,.08);
}

.bridge-feature-icon {
  width: 49px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border-radius: 10px;
  background: #e4f8f3;
  color: #00a982;
  font-size: 19px;
}

.bridge-feature-card > span {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #e8f2ef;
  font-size: 42px;
  font-weight: 800;
}

.bridge-feature-card h3 {
  position: relative;
  margin: 0 0 9px;
  color: #102c27;
  font-size: 18px;
}

.bridge-feature-card p {
  position: relative;
  margin: 0 0 17px;
  color: #71837f;
  font-size: 14px;
  line-height: 1.58;
}

.bridge-feature-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #00a982;
  font-size:14px;
  font-weight: 700;
  text-decoration: none;
}


/* ================= TRANSFER FLOW ================= */

.bridge-flow {
  padding:40px 0;
  background: #fff;
}

.bridge-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
}


/* Visual */

.bridge-flow-visual {
  position: relative;
  height: 390px;
  border: 1px solid #b3d5cb;
  border-radius: 17px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0,201,166,.10),
      transparent 34%
    ),
    #f7fbfa;
  overflow: hidden;
}

.flow-network {
  position: absolute;
  top: 135px;
  width: 115px;
  text-align: center;
}

.flow-network-left {
  left: 45px;
}

.flow-network-right {
  right: 45px;
}

.flow-network-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 9px;
  border-radius: 14px;
  background: #eaf0ff;
  color: #627eea;
  font-size: 24px;
}

.flow-network-right .flow-network-icon {
  background: #f0e9ff;
  color: #8247e5;
}

.flow-network strong,
.flow-network span {
  display: block;
}

.flow-network strong {
  color: #17342e;
  font-size:20px;
}

.flow-network span {
  margin-top: 3px;
  color: #879591;
  font-size:13px;
}


/* Center */

.flow-center {
  position: absolute;
  left: 50%;
  top: 125px;
  width: 120px;
  transform: translateX(-50%);
  text-align: center;
}

.flow-core {
  position: relative;
  z-index: 3;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border: 1px solid #9bdcd2;
  border-radius: 50%;
  background: #e8f9f5;
  color: #00a982;
  font-size: 24px;
  box-shadow: 0 0 35px rgba(0,169,130,.15);
}

.flow-center > span {
  color: #00a982;
  font-size:16px;
  font-weight: 800;
  letter-spacing: 1px;
}

.flow-line {
  position: absolute;
  top: 33px;
  width: 110px;
  height: 1px;
  background: #8bd6ca;
}

.flow-line-one {
  right: 75px;
}

.flow-line-two {
  left: 75px;
}


/* Asset card */

.flow-asset-card {
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid #d5e6e2;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(7,40,34,.08);
}

.flow-asset-card > i:first-child {
  color: #00a982;
}

.flow-asset-card div {
  min-width: 100px;
}

.flow-asset-card small,
.flow-asset-card strong {
  display: block;
}

.flow-asset-card small {
  color: #8a9894;
  font-size: 11px;
}

.flow-asset-card strong {
  margin-top: 2px;
  color: #17342e;
  font-size:15px;
}

.flow-asset-card > i:last-child {
  color: #00a982;
  font-size: 11px;
}


/* Flow content */

.bridge-flow-content > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bridge-flow-content h2 {
  margin: 8px 0 15px;
  color: #0b2924;
  font-size: 43px;
  line-height: 1.1;
}

.bridge-flow-content h2 strong {
  display: block;
  color: #00a982;
}

.bridge-flow-content > p {
  max-width: 590px;
  margin: 0 0 25px;
  color: #657b76;
  font-size: 16px;
  line-height: 1.65;
}

.bridge-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.bridge-check-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #304d47;
  font-size: 13px;
}

.bridge-check-list i {
  color: #00b98e;
}


/* ================= SECURITY ================= */

.bridge-security {
  padding:40px 0;
  background: #071b18;
  color: #fff;
}

.bridge-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.bridge-security-content > span {
  color: #00c9a6;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bridge-security-content h2 {
  margin: 8px 0 15px;
  font-size: 42px;
  line-height: 1.1;
}

.bridge-security-content h2 strong {
  display: block;
  color: #00c9a6;
}

.bridge-security-content > p {
  max-width: 580px;
  margin: 0 0 28px;
  color: #91aaa5;
  font-size: 16px;
  line-height: 1.65;
}

.bridge-security-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bridge-security-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.bridge-security-icon {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #244940;
  border-radius: 9px;
  background: #0b2521;
  color: #00c9a6;
}

.bridge-security-list strong,
.bridge-security-list span {
  display: block;
}

.bridge-security-list strong {
  color: #fff;
  font-size: 18px;
}

.bridge-security-list span {
  margin-top: 3px;
  color: #758f89;
  font-size: 14px;
}


/* Security visual */

.bridge-security-visual {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-circle {
  position: absolute;
  border: 1px solid #1e4b42;
  border-radius: 50%;
}

.circle-one {
  width: 270px;
  height: 270px;
}

.circle-two {
  width: 390px;
  height: 390px;
  border-color: #153b34;
}

.bridge-security-core {
  position: relative;
  z-index: 3;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a6659;
  border-radius: 50%;
  background: #0b2823;
  box-shadow: 0 0 70px rgba(0,201,166,.14);
}

.bridge-security-core i {
  margin-bottom: 8px;
  color: #00c9a6;
  font-size: 33px;
}

.bridge-security-core strong {
  font-size: 11px;
}

.bridge-security-core span {
  margin-top: 3px;
  color: #68857e;
  font-size: 7px;
  letter-spacing: 1px;
}

.bridge-security-node {
  position: absolute;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a554c;
  border-radius: 50%;
  background: #0a2521;
  color: #00c9a6;
}

.security-node-one {
  left: 20%;
  top: 45px;
}

.security-node-two {
  right: 13%;
  top: 48%;
}

.security-node-three {
  left: 26%;
  bottom: 25px;
}


/* ================= ADMIN ================= */

.bridge-admin {
  padding:44px 0;
  background: #fff;
}

.bridge-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}


/* Admin window */

.bridge-admin-visual {
  padding: 8px;
}

.admin-window {
  overflow: hidden;
  border: 1px solid #dce9e5;
  border-radius: 15px;
  background: #f8fbfa;
  box-shadow: 0 25px 60px rgba(7,40,34,.09);
}

.admin-window-top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border-bottom: 1px solid #e1ece9;
}

.admin-dots {
  display: flex;
  gap: 5px;
}

.admin-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd9d5;
}

.admin-window-top small {
  color: #80908c;
  font-size: 8px;
}

.admin-title {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.admin-title span,
.admin-title strong {
  display: block;
}

.admin-title span {
  color: #00a982;
  font-size: 9px;
}

.admin-title strong {
  margin-top: 3px;
  color: #18352f;
  font-size: 17px;
}

.admin-title button {
  width: 32px;
  height: 32px;
  border: 1px solid #d9e6e2;
  border-radius: 7px;
  background: #fff;
  color: #738681;
}


/* Admin cards */

.admin-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 0 20px;
}

.admin-cards > div {
  padding: 15px;
  border: 1px solid #dfebe8;
  border-radius: 9px;
  background: #fff;
}

.admin-cards small,
.admin-cards strong,
.admin-cards span {
  display: block;
}

.admin-cards small {
  color: #82928e;
  font-size: 8px;
}

.admin-cards strong {
  margin:0px 0;
  color: #17342e;
  font-size: 21px;
}

.admin-cards span {
  color: #00a982;
  font-size: 8px;
}


/* Chart */

.admin-chart {
  margin: 15px 20px;
  padding: 17px;
  border: 1px solid #dfebe8;
  border-radius: 9px;
  background: #fff;
}

.admin-chart-label {
  display: flex;
  justify-content: space-between;
  color: #72847f;
  font-size: 9px;
}

.admin-chart-label small {
  color: #9aa7a3;
}

.admin-bars {
  height: 100px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.admin-bars span {
  flex: 1;
  min-width: 5px;
  border-radius: 4px 4px 0 0;
  background: #00b98e;
  opacity: .8;
}


/* Activity */

.admin-activity {
  padding: 0 20px 20px;
}

.admin-activity > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid #e4edeb;
}

.activity-icon {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #eaf1ff;
  color: #627eea;
  font-size: 12px;
}

.admin-activity > div > div {
  flex: 1;
}

.admin-activity strong,
.admin-activity small {
  display: block;
}

.admin-activity strong {
  color: #18352f;
  font-size: 10px;
}

.admin-activity small {
  margin-top: 2px;
  color: #8a9894;
  font-size: 7px;
}

.admin-activity b {
  color: #00a982;
  font-size: 8px;
}


/* Admin content */

.bridge-admin-content > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bridge-admin-content h2 {
  margin: 8px 0 15px;
  color: #0b2924;
  font-size: 42px;
  line-height: 1.1;
}

.bridge-admin-content h2 strong {
  display: block;
  color: #00a982;
}

.bridge-admin-content > p {
  max-width: 580px;
  margin: 0 0 25px;
  color: #657b76;
  font-size: 16px;
  line-height: 1.65;
}

.bridge-admin-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bridge-admin-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #304d47;
  font-size: 14px;
}

.bridge-admin-list i {
  color: #00a982;
}


/* ================= PROCESS ================= */

.bridge-process {
  padding: 45px 0;
    background: #ebf9f4;
}

.bridge-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bridge-process-item {
  min-height: 230px;
  padding: 25px 22px;
  border: 1px solid #dfeae7;
  border-radius: 12px;
  background: #fff;
  transition: .3s;
}

.bridge-process-item:hover {
  transform: translateY(-5px);
  border-color: #a6ddd4;
}

.bridge-process-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  border-radius: 10px;
  background: #09221e;
  color: #00c9a6;
}

.bridge-process-item > span {
  color: #00a982;
  font-size: 16px;
  font-weight: 800;
}

.bridge-process-item h3 {
  margin: 5px 0 8px;
  color: #102c27;
  font-size:20px;
}

.bridge-process-item p {
  margin: 0;
  color: #71827f;
  font-size: 14px;
  line-height: 1.5;
}


/* ================= CTA ================= */

.bridge-cta {
  padding:55px 0;
  background: #fff;
}

.bridge-cta-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px 52px;
  border-radius: 17px;
  background: #07201c;
}

.bridge-cta-box::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(85px);
  opacity: .12;
}

.bridge-cta-box > div {
  position: relative;
  z-index: 2;
}

.bridge-cta-box span {
  color: #00c9a6;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bridge-cta-box h2 {
  max-width: 680px;
  margin: 7px 0;
  color: #fff;
  font-size:42px;
  line-height: 1.15;
}

.bridge-cta-box h2 strong {
  color: #00c9a6;
}

.bridge-cta-box p {
  margin: 0;
  color: #9bb4af;
  font-size: 15px;
}

.bridge-cta-box a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 14px 21px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
}

.bridge-cta-box a:hover {
  background: #00d1a5;
  color: #fff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .bridge-hero-grid {
    gap: 35px;
  }

  .bridge-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bridge-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 991px) {

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

  .bridge-hero-content {
    max-width: 800px;
  }

  .bridge-hero-visual {
    min-height: 530px;
  }

  .bridge-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bridge-stat:nth-child(2) {
    border-right: 0;
  }

  .bridge-network-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bridge-flow-grid,
  .bridge-security-grid,
  .bridge-admin-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .bridge-security-visual {
    min-height: 420px;
  }

}


@media (max-width: 700px) {

  .bridge-feature-grid,
  .bridge-process-grid,
  .bridge-network-grid {
    grid-template-columns: 1fr;
  }

  .bridge-check-list,
  .bridge-admin-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .bridge-hero {
    padding: 55px 0 60px;
  }

  .bridge-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.6px;
  }

  .bridge-hero-content > p {
    font-size: 16px;
  }

  .bridge-mini-stats {
    gap: 20px;
  }

  .bridge-hero-visual {
    min-height: 420px;
  }

  .bridge-dashboard {
    padding: 14px;
  }

  .bridge-network-main strong {
    font-size: 12px;
  }

  .bridge-balance {
    display: none;
  }

  .bridge-floating-card,
  .bridge-floating-network {
    transform: scale(.8);
  }

  .bridge-floating-card {
    left: -17px;
    bottom: 40px;
  }

  .bridge-floating-network {
    right: -18px;
    top: 40px;
  }

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

  .bridge-stat {
    padding: 20px 12px;
  }

  .bridge-stat strong {
    font-size: 16px;
  }

  .bridge-networks,
  .bridge-features,
  .bridge-flow,
  .bridge-security,
  .bridge-admin,
  .bridge-process {
    padding: 60px 0;
  }

  .bridge-section-heading {
    margin-bottom:18px;
  }

  .bridge-section-heading h2 {
    font-size: 30px;
  }

  .bridge-section-heading p {
    font-size: 15px;
  }

  .bridge-flow-content h2,
  .bridge-admin-content h2,
  .bridge-security-content h2 {
    font-size: 34px;
  }

  .bridge-flow-visual {
    height: 350px;
  }

  .flow-network-left {
    left: 15px;
  }

  .flow-network-right {
    right: 15px;
  }

  .flow-line {
    width: 75px;
  }

  .flow-line-one {
    right: 60px;
  }

  .flow-line-two {
    left: 60px;
  }

  .circle-one {
    width: 230px;
    height: 230px;
  }

  .circle-two {
    width: 320px;
    height: 320px;
  }

  .bridge-security-visual {
    height: 350px;
  }

  .bridge-cta {
    padding: 55px 0;
  }

  .bridge-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 23px;
  }

  .bridge-cta-box h2 {
    font-size: 28px;
  }

  .bridge-cta-box a {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   TELEGRAM & TRADING PAGE
========================================================= */


/* ================= HERO ================= */

.telegram-hero {
  position: relative;
  overflow: hidden;
  padding:50px 0 50px;
  background: #061714;
  color: #fff;
}

.telegram-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(140px);
  opacity: .09;
  pointer-events: none;
}

.telegram-orb-one {
  left: -240px;
  top: -220px;
}

.telegram-orb-two {
  right: -220px;
  bottom: -250px;
}

.telegram-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}


/* ================= BREADCRUMB ================= */

.telegram-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #78938d;
  font-size: 13px;
}

.telegram-breadcrumb a {
  color: #9ab5ae;
  text-decoration: none;
}

.telegram-breadcrumb a:hover {
  color: #00c9a6;
}


/* ================= KICKER ================= */

.telegram-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #00d3ae;
  font-size: 14px;
  font-weight: 700;
}


/* ================= HERO CONTENT ================= */

.telegram-hero-content h1 {
  max-width: 700px;
  margin: 0 0 20px;
  font-size:38px;
  line-height: 1.04;
  letter-spacing: -2.8px;
}

.telegram-hero-content h1 span {
  display: block;
  color: #00c9a6;
}

.telegram-hero-content > p {
  max-width: 630px;
  margin: 0 0 28px;
  color: #b2c7c1;
  font-size: 16px;
  line-height: 1.65;
}


/* ================= BUTTONS ================= */

.telegram-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.telegram-btn-primary,
.telegram-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 21px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: .3s;
}

.telegram-btn-primary {
  background: #00b98e;
  color: #fff;
}

.telegram-btn-primary:hover {
  background: #00d1a5;
  color: #fff;
  transform: translateY(-2px);
}

.telegram-btn-outline {
  border: 1px solid #34534c;
  color: #fff;
}

.telegram-btn-outline:hover {
  border-color: #00c9a6;
  color: #00c9a6;
}


/* ================= MINI STATS ================= */

.telegram-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.telegram-mini-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.telegram-mini-stats strong {
  font-size: 17px;
}

.telegram-mini-stats span {
  color: #718c86;
  font-size: 16px;
}


/* ================= HERO VISUAL ================= */

.telegram-hero-visual {
  position: relative;
  min-height: 570px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ================= PHONE ================= */

.telegram-phone {
  position: relative;
  z-index: 2;
  width: 330px;
  min-height: 500px;
  padding: 16px;
  border: 1px solid #2b5148;
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    #0c2924,
    #071b18
  );
  box-shadow:
    0 35px 90px rgba(0,0,0,.45),
    0 0 50px rgba(0,201,166,.07);
  transform: rotate(2deg);
}


/* Phone top */

.telegram-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #1b3b35;
  color: #78918b;
  font-size: 10px;
}

.telegram-phone-top span {
  width: 35px;
  height: 5px;
  border-radius: 20px;
  background: #213e38;
}

.telegram-phone-top strong {
  color: #d9e7e3;
  font-size: 11px;
}

.telegram-phone-top i {
  color: #78918b;
}


/* Profile */

.telegram-profile {
  padding: 20px 5px 15px;
  text-align: center;
}

.telegram-logo {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #168dd5;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 8px 25px rgba(22,141,213,.25);
}

.telegram-profile strong,
.telegram-profile span {
  display: block;
}

.telegram-profile strong {
  color: #fff;
  font-size: 14px;
}

.telegram-profile span {
  margin-top: 4px;
  color: #6f8983;
  font-size: 9px;
}


/* Message */

.telegram-message {
  padding: 13px;
  border: 1px solid #1e433b;
  border-radius: 13px;
  background: #0a211e;
}

.message-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-avatar {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.message-head strong,
.message-head small {
  display: block;
}

.message-head strong {
  color: #dce9e6;
  font-size: 10px;
}

.message-head small {
  margin-top: 2px;
  color: #69827c;
  font-size: 7px;
}


/* Signal */

.signal-content {
  margin-top: 13px;
  padding: 13px;
  border-radius: 9px;
  background: #071b18;
}

.signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
  font-size: 6px;
  font-weight: 800;
}

.signal-content h3 {
  margin: 10px 0 11px;
  color: #fff;
  font-size: 16px;
}

.signal-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #193832;
}

.signal-row span {
  color: #718b84;
  font-size: 8px;
}

.signal-row strong {
  color: #d8e5e2;
  font-size: 9px;
}

.signal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  color: #6f8983;
  font-size: 7px;
}

.signal-positive {
  color: #00c9a6;
  font-weight: 700;
}


/* Chat */

.telegram-chat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  background: #0a211e;
}

.telegram-chat > div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #91aaa4;
  font-size: 8px;
}

.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00c9a6;
}

.telegram-chat small {
  color: #58716b;
  font-size: 7px;
}


/* Input */

.telegram-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #1b3b35;
  border-radius: 9px;
  color: #506a64;
  font-size: 8px;
}

.telegram-input i {
  color: #00c9a6;
}


/* ================= TRADING FLOATING CARD ================= */

.telegram-trading-card {
  position: absolute;
  z-index: 5;
  right: -50px;
  top: 65px;
  width: 225px;
  padding: 16px;
  border: 1px solid #294c44;
  border-radius: 13px;
  background: rgba(7,29,26,.97);
  box-shadow: 0 25px 55px rgba(0,0,0,.4);
}

.trading-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trading-card-head span {
  color: #c9dad6;
  font-size: 10px;
}

.trading-card-head i {
  margin-right: 4px;
  color: #f7931a;
}

.trading-card-head b {
  color: #00c9a6;
  font-size: 9px;
}

.trading-price {
  margin: 10px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.trading-chart {
  height: 75px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid #1d3d36;
}

.trading-chart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: #00b98e;
  opacity: .75;
}

.trading-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.trading-actions button {
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: #00b98e;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.trading-actions button:last-child {
  background: #19352f;
  color: #91aaa4;
}


/* ================= MEMBER CARD ================= */

.telegram-member-card {
  position: absolute;
  z-index: 6;
  left: -45px;
  bottom: 65px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #294c44;
  border-radius: 10px;
  background: rgba(7,29,26,.97);
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.telegram-member-icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.telegram-member-card small,
.telegram-member-card strong {
  display: block;
}

.telegram-member-card small {
  color: #67817a;
  font-size: 7px;
}

.telegram-member-card strong {
  margin-top: 2px;
  color: #fff;
  font-size: 10px;
}


/* ================= STATS ================= */

.telegram-stats {
  background: #061714;
}

.telegram-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #193831;
}

.telegram-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 25px 20px;
  border-right: 1px solid #193831;
}

.telegram-stat:last-child {
  border-right: 0;
}

.telegram-stat > i {
  color: #00c9a6;
  font-size: 19px;
}

.telegram-stat strong,
.telegram-stat span {
  display: block;
}

.telegram-stat strong {
  color: #fff;
  font-size: 18px;
}

.telegram-stat span {
  margin-top: 2px;
  color: #718c86;
  font-size: 10px;
}


/* ================= COMMON HEADING ================= */

.telegram-section-heading {
  max-width: 900px;
  margin-bottom: 38px;
}

.telegram-section-heading > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.telegram-section-heading h2 {
  margin: 8px 0 11px;
  color: #09221e;
  font-size: 40px;
  line-height: 1.13;
}

.telegram-section-heading h2 strong {
  color: #00a982;
}

.telegram-section-heading p {
  margin: 0;
  color: #687d78;
  font-size: 16px;
  line-height: 1.6;
}

.telegram-heading-center {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ================= FEATURES ================= */

.telegram-features {
  padding:45px 0px;
  background: #fff;
}

.telegram-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.telegram-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 27px 22px;
  border: 1px solid #dfeae7;
  border-radius: 13px;
  background: #f8fbfa;
  transition: .3s;
}

.telegram-feature-card:hover {
  transform: translateY(-6px);
  border-color: #9bd9cf;
  box-shadow: 0 20px 40px rgba(7,40,34,.08);
}

.telegram-feature-icon {
  width: 49px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border-radius: 10px;
  background: #e4f8f3;
  color: #00a982;
  font-size: 19px;
}

.telegram-feature-card > span {
  position: absolute;
  top: 10px;
  right: 16px;
  color: #e8f2ef;
  font-size: 42px;
  font-weight: 800;
}

.telegram-feature-card h3 {
  margin: 0 0 9px;
  color: #102c27;
  font-size: 18px;
}

.telegram-feature-card p {
  margin: 0 0 17px;
  color: #71837f;
  font-size: 14px;
  line-height: 1.58;
}

.telegram-feature-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #00a982;
  font-size:15px;
  font-weight: 700;
  text-decoration: none;
}


/* ================= COMMUNITY ================= */

.telegram-community {
  padding:50px 0;
  background: #e9fbf5;
}

.telegram-community-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
}


/* Community window */

.telegram-community-visual {
  padding: 10px;
}

.community-window {
  overflow: hidden;
  border: 1px solid #dce9e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(7,40,34,.09);
}

.community-window-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e1ece9;
}

.community-window-top > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.community-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00b98e;
}

.community-window-top strong {
  color: #17342e;
  font-size: 12px;
}

.community-window-top > i {
  color: #80908c;
}


/* Members */

.community-members {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px;
  background: #f6fbf9;
}

.community-avatar {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #e3f7f2;
  color: #00a982;
}

.community-members strong,
.community-members span {
  display: block;
}

.community-members strong {
  color: #17342e;
  font-size: 13px;
}

.community-members span {
  margin-top: 3px;
  color: #83918d;
  font-size: 9px;
}


/* Messages */

.community-message {
  display: flex;
  gap: 9px;
  margin: 16px 18px;
}

.community-avatar-small {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e8f4ff;
  color: #2687d8;
  font-size: 11px;
}

.community-avatar-small.purple {
  background: #f0e9ff;
  color: #8a58d7;
}

.community-message-body {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  background: #f5f9f8;
}

.community-message-body strong {
  color: #17342e;
  font-size: 10px;
}

.community-message-body p {
  margin: 5px 0;
  color: #6e807b;
  font-size: 10px;
  line-height: 1.5;
}

.community-message-body small {
  color: #a0aaa7;
  font-size: 7px;
}


/* Input */

.community-input {
  display: flex;
  justify-content: space-between;
  margin: 15px 18px 18px;
  padding: 11px;
  border: 1px solid #dce9e5;
  border-radius: 8px;
  color: #9aa7a3;
  font-size: 9px;
}

.community-input i {
  color: #00a982;
}


/* Community content */

.telegram-community-content > span,
.telegram-trading-content > span {
  color: #00a982;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.telegram-community-content h2,
.telegram-trading-content h2 {
  margin: 8px 0 15px;
  color: #0b2924;
  font-size: 42px;
  line-height: 1.1;
}

.telegram-community-content h2 strong,
.telegram-trading-content h2 strong {
  display: block;
  color: #00a982;
}

.telegram-community-content > p,
.telegram-trading-content > p {
  max-width: 590px;
  margin: 0 0 25px;
  color: #657b76;
  font-size: 16px;
  line-height: 1.65;
}


/* Check list */

.telegram-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 28px;
}

.telegram-check-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #304d47;
  font-size: 12px;
}

.telegram-check-list i {
  color: #00b98e;
}

.telegram-community-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}


/* ================= TRADING ================= */

.telegram-trading {
  padding: 40px 0;
  background: #fff;
}

.telegram-trading-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 70px;
}


/* Trading list */

.telegram-trading-list {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.telegram-trading-list > div {
  display: flex;
  gap: 12px;
}

.telegram-trading-list > div > i {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #e4f8f3;
  color: #00a982;
}

.telegram-trading-list strong,
.telegram-trading-list span {
  display: block;
}

.telegram-trading-list strong {
  color: #18352f;
  font-size:16px;
}

.telegram-trading-list span {
  margin-top: 3px;
  color: #82908c;
  font-size: 10px;
  line-height: 1.5;
}


/* Dashboard */

.telegram-trading-dashboard {
  padding: 22px;
  border: 1px solid #d9e7e3;
  border-radius: 15px;
  background: #071c19;
  color: #fff;
  box-shadow: 0 25px 60px rgba(7,40,34,.13);
}

.trading-dashboard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trading-dashboard-top span,
.trading-dashboard-top strong {
  display: block;
}

.trading-dashboard-top span {
  color: #6c8881;
  font-size: 8px;
}

.trading-dashboard-top strong {
  margin-top: 3px;
  font-size: 16px;
}

.market-positive {
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(0,201,166,.1);
  color: #00c9a6;
  font-size: 9px;
  font-weight: 700;
}

.big-price {
  margin-top: 20px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.big-price span {
  margin-left: 7px;
  color: #00c9a6;
  font-size: 9px;
}


/* Chart */

.dashboard-chart {
  position: relative;
  height: 230px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid #173b34;
  border-radius: 10px;
  background: #091f1b;
}

.dashboard-chart svg {
  position: absolute;
  inset: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  color: #00c9a6;
}

.chart-grid-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #15362f;
}

.line-one {
  top: 25%;
}

.line-two {
  top: 50%;
}

.line-three {
  top: 75%;
}


/* Time */

.chart-time {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #69827c;
  font-size: 8px;
}

.chart-time .active {
  padding: 4px 7px;
  border-radius: 4px;
  background: #00b98e;
  color: #fff;
}


/* Order */

.trading-order-box {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #193c35;
  border-radius: 9px;
  background: #0a211e;
}

.order-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 15px;
}

.order-tabs span {
  padding: 6px 10px;
  border-radius: 5px;
  color: #718b84;
  font-size: 8px;
}

.order-tabs .active {
  background: rgba(0,201,166,.1);
  color: #00c9a6;
}

.order-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.order-info div {
  padding: 10px;
  border-radius: 6px;
  background: #071b18;
}

.order-info small,
.order-info strong {
  display: block;
}

.order-info small {
  color: #68827c;
  font-size: 7px;
}

.order-info strong {
  margin-top: 4px;
  color: #d4e2df;
  font-size: 10px;
}

.order-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.order-buttons button {
  padding: 11px;
  border: 0;
  border-radius: 6px;
  background: #00b98e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.order-buttons button:last-child {
  background: #263c37;
  color: #9db0ab;
}


/* ================= INTEGRATION ================= */

.telegram-integration {
  padding:50px 0px;
  background: #e9fbf5;
}

.telegram-integration-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.integration-node {
  width: 145px;
  padding: 18px 12px;
  border: 1px solid #dce9e5;
  border-radius: 11px;
  background: #fff;
  text-align: center;
}

.integration-node > div {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 9px;
  border-radius: 10px;
  background: #e4f8f3;
  color: #00a982;
  font-size: 18px;
}

.integration-node strong,
.integration-node span {
  display: block;
}

.integration-node strong {
  color: #18352f;
  font-size: 17px;
}

.integration-node span {
  margin-top: 3px;
  color: #85938f;
  font-size:13px;
}

.integration-line {
  color: #00a982;
  font-size: 14px;
}


/* ================= PROCESS ================= */

.telegram-process {
  padding:55px 0;
  background: #fff;
}

.telegram-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.telegram-process-item {
  min-height: 230px;
  padding: 25px 22px;
  border: 1px solid #dfeae7;
  border-radius: 12px;
  background: #f8fbfa;
  transition: .3s;
}

.telegram-process-item:hover {
  transform: translateY(-5px);
  border-color: #9bd9cf;
}

.telegram-process-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #09221e;
  color: #00c9a6;
}

.telegram-process-item > span {
  color: #00a982;
  font-size: 10px;
  font-weight: 800;
}

.telegram-process-item h3 {
  margin: 5px 0 8px;
  color: #102c27;
  font-size: 17px;
}

.telegram-process-item p {
  margin: 0;
  color: #71827f;
  font-size: 14px;
  line-height: 1.5;
}


/* ================= CTA ================= */

.telegram-cta {
  padding:30px 0;
  background: #fff;
}

.telegram-cta-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px 52px;
  border-radius: 17px;
  background: #07201c;
}

.telegram-cta-box::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #00c9a6;
  filter: blur(85px);
  opacity: .12;
}

.telegram-cta-box > div {
  position: relative;
  z-index: 2;
}

.telegram-cta-box span {
  color: #00c9a6;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.telegram-cta-box h2 {
  max-width: 680px;
  margin: 7px 0;
  color: #fff;
  font-size: 35px;
  line-height: 1.15;
}

.telegram-cta-box h2 strong {
  color: #00c9a6;
}

.telegram-cta-box p {
  margin: 0;
  color: #9bb4af;
  font-size: 15px;
}

.telegram-cta-box a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 14px 21px;
  border-radius: 8px;
  background: #00b98e;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.telegram-cta-box a:hover {
  background: #00d1a5;
  color: #fff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .telegram-hero-grid {
    gap: 35px;
  }

  .telegram-feature-grid,
  .telegram-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 991px) {

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

  .telegram-hero-content {
    max-width: 800px;
  }

  .telegram-hero-visual {
    min-height: 540px;
  }

  .telegram-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .telegram-stat:nth-child(2) {
    border-right: 0;
  }

  .telegram-community-grid,
  .telegram-trading-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .telegram-integration-flow {
    flex-wrap: wrap;
  }

}


@media (max-width: 700px) {

  .telegram-feature-grid,
  .telegram-process-grid {
    grid-template-columns: 1fr;
  }

  .telegram-check-list {
    grid-template-columns: 1fr;
  }

  .integration-line {
    transform: rotate(90deg);
  }

}


@media (max-width: 600px) {

  .telegram-hero {
    padding:48px 0 80px;
  }

  .telegram-hero-content h1 {
    font-size: 42px;
    letter-spacing: -1.6px;
  }

  .telegram-hero-content > p {
    font-size: 16px;
  }

  .telegram-mini-stats {
    gap: 20px;
  }

  .telegram-hero-visual {
    min-height: 500px;
  }

  .telegram-phone {
    width: 280px;
    min-height: 450px;
  }

  .telegram-trading-card {
    right: -12px;
    top: 35px;
    transform: scale(.78);
    transform-origin: right top;
  }

  .telegram-member-card {
    left: -15px;
    bottom: 35px;
    transform: scale(.8);
    transform-origin: left bottom;
  }

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

  .telegram-stat {
    padding: 20px 12px;
  }

  .telegram-stat strong {
    font-size: 16px;
  }

  .telegram-features,
  .telegram-community,
  .telegram-trading,
  .telegram-integration,
  .telegram-process {
    padding: 60px 0;
  }

  .telegram-section-heading h2 {
    font-size: 30px;
  }

  .telegram-section-heading p {
    font-size: 15px;
  }

  .telegram-community-content h2,
  .telegram-trading-content h2 {
    font-size: 34px;
  }

  .telegram-trading-dashboard {
    padding: 14px;
  }

  .dashboard-chart {
    height: 190px;
  }

  .telegram-cta {
    padding: 55px 0;
  }

  .telegram-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 23px;
  }

  .telegram-cta-box h2 {
    font-size: 28px;
  }

  .telegram-cta-box a {
    width: 100%;
    justify-content: center;
  }

}