/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--ocean-depth: #073b4c;
--misty-background: #e6ebee;
--charcoal-text: #052633;
--secondary-color: #4a90a4;
--secondary-light: #b8d4db;
--tertiary-color: #f39c12;
--tertiary-light: #fdeaa7;
--accent-color: #e74c3c;
--accent-light: #fadbd8;
--neutral-color: #7f8c8d;
--neutral-light: #ecf0f1;
--info-color: #3498db;
--warning-color: #e67e22;
--success-color: #27ae60;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
color: var(--charcoal-text);
background: var(--misty-background);
}
/* Header Styles */
.workspace-banner {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
padding: 21px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-radius: 0 0 27px 27px;
box-shadow: 0 7px 34px rgba(7, 59, 76, 0.1);
}
.navigation-flow {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 34px;
}
.company-title {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--ocean-depth);
margin: 0;
}
.nav-elements {
display: flex;
list-style: none;
gap: 42px;
}
.nav-link {
text-decoration: none;
color: var(--charcoal-text);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 13px 21px;
border-radius: 21px;
}
.nav-link:hover,
.nav-link.active {
background: var(--ocean-depth);
color: white;
transform: translateY(-2px);
}
/* Main Content */
.content-workspace {
margin-top: 120px;
}
/* Hero Section */
.hero-showcase {
padding: 89px 34px 76px;
background: linear-gradient(135deg, var(--misty-background) 0%, rgba(186, 212, 219, 0.3) 100%);
}
.hero-content-area {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 63px;
align-items: center;
min-height: 640px;
}
.primary-message-zone {
padding: 42px 0;
}
.hero-headline {
font-family: 'Raleway', sans-serif;
font-size: 3.2rem;
font-weight: 600;
color: var(--ocean-depth);
line-height: 1.3;
margin-bottom: 34px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-description {
font-size: 1.25rem;
color: var(--charcoal-text);
margin-bottom: 47px;
line-height: 1.7;
opacity: 0.9;
}
.action-area {
display: flex;
gap: 27px;
flex-wrap: wrap;
}
.primary-action-btn {
background: var(--ocean-depth);
color: white;
border: none;
padding: 19px 38px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 34px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 13px 27px rgba(7, 59, 76, 0.3);
}
.primary-action-btn:hover {
transform: translateY(-5px);
box-shadow: 0 21px 42px rgba(7, 59, 76, 0.4);
background: var(--charcoal-text);
}
.secondary-action-btn {
background: transparent;
color: var(--ocean-depth);
border: 2px solid var(--ocean-depth);
padding: 17px 36px;
font-size: 1.1rem;
font-weight: 500;
border-radius: 34px;
cursor: pointer;
transition: all 0.3s ease;
}
.secondary-action-btn:hover {
background: var(--ocean-depth);
color: white;
transform: scale(1.05);
}
.visual-element-space {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-visual {
width: 100%;
max-width: 520px;
height: auto;
border-radius: 27px;
box-shadow: 0 21px 63px rgba(7, 59, 76, 0.2);
transform: rotate(-2deg);
transition: transform 0.6s ease;
}
.hero-visual:hover {
transform: rotate(0deg) scale(1.02);
}
/* Footer Styles */
.site-foundation {
background: var(--ocean-depth);
color: white;
padding: 63px 34px 34px;
margin-top: 89px;
}
.footer-content-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 47px;
}
.footer-brand {
font-family: 'Raleway', sans-serif;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 21px;
color: var(--misty-background);
}
.company-description {
font-size: 1rem;
opacity: 0.85;
line-height: 1.6;
}
.contact-header,
.links-header {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 21px;
color: var(--misty-background);
}
.contact-item {
display: flex;
flex-direction: column;
margin-bottom: 13px;
}
.contact-label {
font-weight: 600;
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 5px;
}
.contact-value {
font-size: 1rem;
}
.footer-navigation {
list-style: none;
}
.footer-navigation li {
margin-bottom: 13px;
}
.footer-link {
color: white;
text-decoration: none;
opacity: 0.85;
transition: opacity 0.3s ease;
}
.footer-link:hover {
opacity: 1;
text-decoration: underline;
}
.copyright-zone {
max-width: 1280px;
margin: 42px auto 0;
padding-top: 34px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}
.copyright-text {
opacity: 0.7;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 890px) {
.navigation-flow {
flex-direction: column;
gap: 21px;
padding: 0 21px;
}
.nav-elements {
gap: 27px;
}
.hero-content-area {
grid-template-columns: 1fr;
gap: 42px;
text-align: center;
}
.hero-headline {
font-size: 2.5rem;
}
.action-area {
justify-content: center;
}
.footer-content-grid {
grid-template-columns: 1fr;
gap: 34px;
text-align: center;
}
}
@media (max-width: 640px) {
.workspace-banner {
padding: 13px 0;
}
.content-workspace {
margin-top: 100px;
}
.hero-showcase {
padding: 42px 21px;
}
.hero-headline {
font-size: 2rem;
margin-bottom: 21px;
}
.hero-description {
font-size: 1.1rem;
margin-bottom: 34px;
}
.action-area {
flex-direction: column;
gap: 21px;
}
.primary-action-btn,
.secondary-action-btn {
width: 100%;
padding: 16px 24px;
}
.site-foundation {
padding: 42px 21px 21px;
}
}
/* About Us Section Styles */
.about-journey-space {
padding: 97px 34px 84px;
background: linear-gradient(165deg, var(--misty-background) 0%, rgba(255,255,255,0.6) 50%, var(--neutral-light) 100%);
}
.about-content-wrapper {
max-width: 1440px;
margin: 0 auto;
}
.section-intro-area {
text-align: center;
margin-bottom: 76px;
max-width: 890px;
margin-left: auto;
margin-right: auto;
}
.about-main-title {
font-family: 'Raleway', sans-serif;
font-size: 2.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 27px;
line-height: 1.2;
}
.intro-narrative {
font-size: 1.3rem;
color: var(--charcoal-text);
line-height: 1.6;
opacity: 0.9;
}
/* Story Timeline */
.story-timeline-grid {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 63px;
margin-bottom: 89px;
align-items: start;
}
.history-block {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
padding: 47px;
border-radius: 27px;
box-shadow: 0 13px 42px rgba(7, 59, 76, 0.1);
}
.timeline-header {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 34px;
}
.story-content p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 21px;
color: var(--charcoal-text);
}
.story-content p:last-child {
margin-bottom: 0;
}
/* Photo Gallery */
.experience-showcase {
position: relative;
}
.photo-gallery-area {
position: relative;
height: 520px;
}
.primary-photo {
width: 100%;
height: 340px;
object-fit: cover;
border-radius: 21px;
box-shadow: 0 21px 47px rgba(7, 59, 76, 0.2);
transform: rotate(2deg);
position: absolute;
top: 0;
left: 0;
}
.secondary-photos {
position: absolute;
bottom: 0;
right: -21px;
display: flex;
gap: 13px;
}
.workshop-image,
.consultation-image {
width: 140px;
height: 180px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 8px 27px rgba(7, 59, 76, 0.15);
}
.workshop-image {
transform: rotate(-3deg);
}
.consultation-image {
transform: rotate(1deg);
}
/* Credentials and Communication */
.credentials-communication-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 76px;
margin-bottom: 97px;
}
.credentials-title,
.style-title {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 42px;
}
.credentials-grid {
display: flex;
flex-direction: column;
gap: 34px;
}
.credential-header {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--charcoal-text);
margin-bottom: 18px;
}
.credential-list {
list-style: none;
padding-left: 0;
}
.credential-list li {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 13px;
padding-left: 27px;
position: relative;
color: var(--charcoal-text);
}
.credential-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--ocean-depth);
font-weight: bold;
}
/* Communication Style */
.style-description p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 34px;
color: var(--charcoal-text);
}
.style-highlights {
display: flex;
flex-direction: column;
gap: 27px;
}
.style-point {
background: rgba(255, 255, 255, 0.7);
padding: 24px;
border-radius: 18px;
backdrop-filter: blur(5px);
}
.point-title {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 13px;
}
.style-point p {
font-size: 1rem;
line-height: 1.6;
margin: 0;
color: var(--charcoal-text);
}
/* Trust Foundation */
.trust-foundation-area {
margin-bottom: 76px;
}
.trust-title {
font-family: 'Raleway', sans-serif;
font-size: 2.1rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 63px;
}
.trust-reasons-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 42px;
}
.trust-reason {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
padding: 38px;
border-radius: 24px;
text-align: center;
box-shadow: 0 13px 34px rgba(7, 59, 76, 0.08);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.trust-reason:hover {
transform: translateY(-8px);
}
.reason-icon-space {
margin-bottom: 27px;
}
.custom-icon {
width: 63px;
height: 63px;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
.experience-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.results-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.approach-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.support-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.reason-title {
font-family: 'Raleway', sans-serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 18px;
}
.reason-text {
font-size: 1.05rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
}
/* Call to Connection */
.call-to-connection {
background: var(--ocean-depth);
border-radius: 34px;
padding: 63px;
text-align: center;
position: relative;
overflow: hidden;
}
.call-to-connection::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
50% { transform: translate(-50%, -50%) rotate(180deg); }
}
.connection-content {
position: relative;
z-index: 2;
}
.connection-title {
font-family: 'Raleway', sans-serif;
font-size: 2.2rem;
font-weight: 600;
color: white;
margin-bottom: 24px;
}
.connection-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 38px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.connection-button {
background: var(--accent-color);
color: white;
border: none;
padding: 21px 47px;
font-size: 1.15rem;
font-weight: 600;
border-radius: 42px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 13px 27px rgba(231, 76, 60, 0.3);
}
.connection-button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 21px 42px rgba(231, 76, 60, 0.4);
background: #c0392b;
}
/* Responsive Design */
@media (max-width: 1280px) {
.story-timeline-grid {
grid-template-columns: 1fr;
gap: 47px;
}
.photo-gallery-area {
height: 380px;
margin-top: 34px;
}
.credentials-communication-area {
grid-template-columns: 1fr;
gap: 47px;
}
}
@media (max-width: 890px) {
.about-main-title {
font-size: 2.2rem;
}
.intro-narrative {
font-size: 1.15rem;
}
.trust-reasons-grid {
grid-template-columns: 1fr;
gap: 27px;
}
.call-to-connection {
padding: 42px 27px;
}
.connection-title {
font-size: 1.8rem;
}
}
@media (max-width: 640px) {
.about-journey-space {
padding: 63px 21px;
}
.history-block {
padding: 34px 24px;
}
.photo-gallery-area {
height: 280px;
}
.primary-photo {
height: 240px;
}
.secondary-photos {
display: none;
}
.trust-reason {
padding: 27px 21px;
}
.connection-button {
width: 100%;
padding: 18px 24px;
}
}
/* Services Section Styles */
.services-landscape {
padding: 103px 34px 91px;
background: linear-gradient(145deg, var(--misty-background) 0%, rgba(255,255,255,0.4) 60%, var(--neutral-light) 100%);
position: relative;
}
.services-landscape::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.services-container-flow {
max-width: 1520px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Services Introduction */
.services-intro-zone {
text-align: center;
margin-bottom: 87px;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.services-primary-title {
font-family: 'Raleway', sans-serif;
font-size: 3.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 31px;
line-height: 1.2;
text-shadow: 0 3px 6px rgba(7, 59, 76, 0.1);
}
.services-intro-text {
font-size: 1.25rem;
color: var(--charcoal-text);
line-height: 1.7;
opacity: 0.9;
}
/* Services Grid */
.services-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
gap: 43px;
margin-bottom: 97px;
}
/* Individual Service Card */
.service-card-element {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: 31px;
overflow: hidden;
box-shadow: 0 17px 54px rgba(7, 59, 76, 0.12);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.service-card-element:hover {
transform: translateY(-13px) scale(1.02);
box-shadow: 0 34px 89px rgba(7, 59, 76, 0.18);
}
.service-card-element:nth-child(odd) {
transform: rotate(0.5deg);
}
.service-card-element:nth-child(even) {
transform: rotate(-0.3deg);
}
.service-card-element:hover:nth-child(odd),
.service-card-element:hover:nth-child(even) {
transform: translateY(-13px) scale(1.02) rotate(0deg);
}
/* Service Visual Area */
.service-visual-area {
position: relative;
height: 220px;
overflow: hidden;
}
.service-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.service-card-element:hover .service-image {
transform: scale(1.08);
}
.service-overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(7, 59, 76, 0.1) 0%, rgba(7, 59, 76, 0.3) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card-element:hover .service-overlay-gradient {
opacity: 1;
}
/* Service Content */
.service-content-space {
padding: 39px 42px 47px;
}
.service-title {
font-family: 'Raleway', sans-serif;
font-size: 1.7rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 19px;
line-height: 1.3;
}
.service-description {
font-size: 1.05rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 34px;
opacity: 0.9;
}
/* Problems Solved Block */
.problems-solved-block {
margin-bottom: 29px;
background: rgba(230, 235, 238, 0.6);
padding: 27px;
border-radius: 19px;
border-left: 4px solid var(--ocean-depth);
}
.problems-header {
font-family: 'Raleway', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--charcoal-text);
margin-bottom: 17px;
}
.problems-list {
list-style: none;
padding: 0;
margin: 0;
}
.problems-list li {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 11px;
padding-left: 23px;
position: relative;
color: var(--charcoal-text);
}
.problems-list li:last-child {
margin-bottom: 0;
}
.problems-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--ocean-depth);
font-weight: bold;
font-size: 1.2rem;
}
/* Service Benefits */
.service-benefits-area {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.benefit-tag {
background: var(--ocean-depth);
color: white;
padding: 8px 16px;
border-radius: 17px;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: all 0.3s ease;
}
.benefit-tag:hover {
background: var(--charcoal-text);
transform: scale(1.05);
}
/* Consultation Banner */
.services-consultation-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 42px;
padding: 71px 47px;
text-align: center;
position: relative;
overflow: hidden;
}
.services-consultation-banner::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
border-radius: 50%;
animation: float-slow 8s ease-in-out infinite;
}
.services-consultation-banner::after {
content: '';
position: absolute;
bottom: -25%;
left: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
border-radius: 50%;
animation: float-slow 10s ease-in-out infinite reverse;
}
@keyframes float-slow {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-20px, -30px) rotate(90deg); }
50% { transform: translate(20px, -40px) rotate(180deg); }
75% { transform: translate(-30px, -20px) rotate(270deg); }
}
.consultation-content-wrapper {
position: relative;
z-index: 2;
max-width: 890px;
margin: 0 auto;
}
.consultation-title {
font-family: 'Raleway', sans-serif;
font-size: 2.3rem;
font-weight: 600;
color: white;
margin-bottom: 23px;
line-height: 1.3;
}
.consultation-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 43px;
}
.consultation-actions {
display: flex;
justify-content: center;
gap: 31px;
flex-wrap: wrap;
}
.consultation-primary-btn {
background: var(--accent-color);
color: white;
border: none;
padding: 19px 41px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 37px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 13px 29px rgba(231, 76, 60, 0.3);
}
.consultation-primary-btn:hover {
transform: translateY(-6px) scale(1.05);
box-shadow: 0 23px 47px rgba(231, 76, 60, 0.4);
background: #c0392b;
}
.consultation-secondary-btn {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.8);
padding: 17px 39px;
font-size: 1.1rem;
font-weight: 500;
border-radius: 37px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.consultation-secondary-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: white;
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 1280px) {
.services-showcase-grid {
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 37px;
}
}
@media (max-width: 890px) {
.services-landscape {
padding: 73px 27px 67px;
}
.services-primary-title {
font-size: 2.4rem;
}
.services-intro-text {
font-size: 1.1rem;
}
.services-showcase-grid {
grid-template-columns: 1fr;
gap: 31px;
}
.service-content-space {
padding: 31px 27px 37px;
}
.services-consultation-banner {
padding: 47px 31px;
}
.consultation-title {
font-size: 1.9rem;
}
.consultation-actions {
flex-direction: column;
align-items: center;
gap: 19px;
}
.consultation-primary-btn,
.consultation-secondary-btn {
width: 100%;
max-width: 320px;
}
}
@media (max-width: 640px) {
.services-landscape {
padding: 53px 19px 47px;
}
.services-intro-zone {
margin-bottom: 57px;
}
.services-primary-title {
font-size: 2rem;
margin-bottom: 21px;
}
.service-visual-area {
height: 180px;
}
.service-content-space {
padding: 23px 19px 27px;
}
.service-title {
font-size: 1.4rem;
margin-bottom: 15px;
}
.problems-solved-block {
padding: 19px;
margin-bottom: 23px;
}
.benefit-tag {
font-size: 0.8rem;
padding: 6px 12px;
}
.services-consultation-banner {
padding: 37px 19px;
border-radius: 27px;
}
.consultation-title {
font-size: 1.6rem;
margin-bottom: 17px;
}
.consultation-text {
font-size: 1.05rem;
margin-bottom: 31px;
}
}
/* Pricing Section Styles */
.pricing-universe {
padding: 94px 34px 87px;
background: linear-gradient(155deg, var(--misty-background) 0%, rgba(255,255,255,0.8) 45%, var(--neutral-light) 100%);
position: relative;
}
.pricing-content-flow {
max-width: 1480px;
margin: 0 auto;
}
/* Pricing Header */
.pricing-header-zone {
text-align: center;
margin-bottom: 67px;
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.pricing-main-headline {
font-family: 'Raleway', sans-serif;
font-size: 2.9rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 29px;
line-height: 1.2;
}
.pricing-intro-description {
font-size: 1.2rem;
color: var(--charcoal-text);
line-height: 1.6;
opacity: 0.9;
}
/* Format Selector */
.format-selector-area {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 73px;
gap: 17px;
}
.format-toggle-wrapper {
display: flex;
align-items: center;
gap: 23px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 19px 31px;
border-radius: 47px;
box-shadow: 0 11px 29px rgba(7, 59, 76, 0.1);
}
.format-label {
font-weight: 600;
font-size: 1.1rem;
color: var(--charcoal-text);
transition: color 0.3s ease;
}
.format-label.active {
color: var(--ocean-depth);
}
.toggle-switch-element {
width: 67px;
height: 34px;
background: var(--neutral-light);
border-radius: 34px;
position: relative;
cursor: pointer;
transition: background 0.3s ease;
}
.toggle-switch-element.active {
background: var(--ocean-depth);
}
.toggle-slider {
width: 26px;
height: 26px;
background: white;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.toggle-switch-element.active .toggle-slider {
transform: translateX(33px);
}
.format-description {
font-size: 0.95rem;
color: var(--charcoal-text);
opacity: 0.7;
text-align: center;
}
/* Pricing Cards Grid */
.tariffs-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 39px;
margin-bottom: 89px;
}
/* Individual Pricing Card */
.pricing-card-block {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
border-radius: 29px;
padding: 43px;
box-shadow: 0 19px 61px rgba(7, 59, 76, 0.12);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: 2px solid transparent;
}
.pricing-card-block:hover {
transform: translateY(-11px);
box-shadow: 0 31px 89px rgba(7, 59, 76, 0.18);
border-color: rgba(7, 59, 76, 0.1);
}
.pricing-card-block:nth-child(1) {
transform: rotate(0.8deg);
}
.pricing-card-block:nth-child(3) {
transform: rotate(-0.6deg);
}
.pricing-card-block:hover:nth-child(1),
.pricing-card-block:hover:nth-child(3) {
transform: translateY(-11px) rotate(0deg);
}
/* Featured Package */
.featured-package {
border: 3px solid var(--ocean-depth);
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(230, 235, 238, 0.8) 100%);
transform: scale(1.05) rotate(0deg) !important;
}
.featured-package:hover {
transform: translateY(-11px) scale(1.05) !important;
}
.popular-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-color);
color: white;
padding: 8px 24px;
border-radius: 19px;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 7px 19px rgba(231, 76, 60, 0.3);
}
/* Card Header */
.card-header-section {
text-align: center;
margin-bottom: 37px;
padding-bottom: 31px;
border-bottom: 2px solid rgba(7, 59, 76, 0.1);
}
.tariff-title {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 21px;
}
.price-display-area {
margin-bottom: 19px;
}
.price-amount {
font-family: 'Raleway', sans-serif;
font-size: 2.4rem;
font-weight: 700;
color: var(--ocean-depth);
display: inline-block;
}
.price-period {
font-size: 1.1rem;
color: var(--charcoal-text);
opacity: 0.7;
margin-left: 8px;
}
.savings-indicator {
margin-top: 11px;
}
.savings-text {
background: var(--success-color);
color: white;
padding: 6px 16px;
border-radius: 17px;
font-size: 0.85rem;
font-weight: 600;
display: inline-block;
}
.tariff-subtitle {
font-size: 1.05rem;
color: var(--charcoal-text);
line-height: 1.5;
opacity: 0.8;
}
/* Advantages Section */
.advantages-section {
margin-bottom: 33px;
}
.advantages-header {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--charcoal-text);
margin-bottom: 19px;
}
.advantages-listing {
list-style: none;
padding: 0;
margin: 0 0 27px 0;
}
.advantages-listing li {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 13px;
padding-left: 27px;
position: relative;
color: var(--charcoal-text);
}
.advantages-listing li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success-color);
font-weight: bold;
font-size: 1.1rem;
}
/* Format Benefits */
.format-benefits {
background: rgba(230, 235, 238, 0.5);
padding: 23px;
border-radius: 17px;
margin-bottom: 31px;
transition: all 0.3s ease;
}
.benefits-subheader {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 15px;
}
.benefits-list {
list-style: none;
padding: 0;
margin: 0;
}
.benefits-list li {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 9px;
padding-left: 19px;
position: relative;
color: var(--charcoal-text);
}
.benefits-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--ocean-depth);
font-weight: bold;
}
/* Action Buttons */
.tariff-action-btn {
width: 100%;
background: var(--ocean-depth);
color: white;
border: none;
padding: 17px 29px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 27px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 11px 23px rgba(7, 59, 76, 0.2);
}
.tariff-action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 17px 37px rgba(7, 59, 76, 0.3);
background: var(--charcoal-text);
}
.primary-btn {
background: var(--accent-color);
box-shadow: 0 11px 23px rgba(231, 76, 60, 0.2);
}
.primary-btn:hover {
background: #c0392b;
box-shadow: 0 17px 37px rgba(231, 76, 60, 0.3);
}
/* Additional Information */
.pricing-additional-info {
margin-bottom: 71px;
}
.info-blocks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 31px;
}
.info-block {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
padding: 31px;
border-radius: 23px;
text-align: center;
box-shadow: 0 9px 27px rgba(7, 59, 76, 0.08);
}
.info-title {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.info-text {
font-size: 1rem;
color: var(--charcoal-text);
line-height: 1.6;
opacity: 0.9;
}
/* Contact CTA */
.pricing-contact-section {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 37px;
padding: 59px 43px;
text-align: center;
position: relative;
overflow: hidden;
}
.pricing-contact-section::before {
content: '';
position: absolute;
top: -40%;
left: -30%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 60%);
animation: rotate-slow 15s linear infinite;
}
@keyframes rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.contact-cta-title {
font-family: 'Raleway', sans-serif;
font-size: 2.1rem;
font-weight: 600;
color: white;
margin-bottom: 21px;
position: relative;
z-index: 2;
}
.contact-cta-text {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 41px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
.contact-actions-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 27px;
position: relative;
z-index: 2;
}
.contact-primary-action {
background: var(--accent-color);
color: white;
border: none;
padding: 19px 43px;
font-size: 1.15rem;
font-weight: 600;
border-radius: 31px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 13px 29px rgba(231, 76, 60, 0.3);
}
.contact-primary-action:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 21px 43px rgba(231, 76, 60, 0.4);
background: #c0392b;
}
.contact-info-quick {
display: flex;
gap: 31px;
flex-wrap: wrap;
justify-content: center;
}
.phone-quick,
.email-quick {
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.phone-quick:hover,
.email-quick:hover {
color: white;
text-decoration: underline;
}
/* JavaScript Toggle States */
.format-benefits {
transition: all 0.4s ease;
}
.format-benefits[style*="display: none"] {
opacity: 0;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Responsive Design */
@media (max-width: 1280px) {
.tariffs-showcase-grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 31px;
}
}
@media (max-width: 890px) {
.pricing-universe {
padding: 67px 27px 59px;
}
.pricing-main-headline {
font-size: 2.3rem;
}
.pricing-intro-description {
font-size: 1.1rem;
}
.tariffs-showcase-grid {
grid-template-columns: 1fr;
gap: 27px;
}
.featured-package {
transform: scale(1) rotate(0deg) !important;
}
.pricing-card-block {
padding: 31px 23px;
}
.info-blocks-grid {
grid-template-columns: 1fr;
gap: 21px;
}
.pricing-contact-section {
padding: 43px 27px;
}
.contact-info-quick {
flex-direction: column;
gap: 17px;
}
}
@media (max-width: 640px) {
.pricing-universe {
padding: 47px 19px 43px;
}
.pricing-header-zone {
margin-bottom: 47px;
}
.pricing-main-headline {
font-size: 1.9rem;
margin-bottom: 19px;
}
.format-selector-area {
margin-bottom: 53px;
}
.format-toggle-wrapper {
padding: 15px 23px;
gap: 17px;
}
.format-label {
font-size: 1rem;
}
.pricing-card-block {
padding: 23px 17px;
}
.price-amount {
font-size: 2rem;
}
.contact-cta-title {
font-size: 1.7rem;
margin-bottom: 17px;
}
.contact-cta-text {
font-size: 1.05rem;
margin-bottom: 31px;
}
}
/* Site-wide Increased Margins CSS */
/* Header Section - Increased Margins */
.workspace-banner {
padding: 34px 0;
}
.navigation-flow {
padding: 0 57px;
}
/* Hero Section - Increased Margins */
.hero-showcase {
padding: 134px 57px 119px;
}
.hero-content-area {
gap: 89px;
}
.primary-message-zone {
padding: 67px 0;
}
.hero-headline {
margin-bottom: 51px;
}
.hero-description {
margin-bottom: 67px;
}
.action-area {
gap: 42px;
}
/* Footer Section - Increased Margins */
.site-foundation {
padding: 89px 57px 51px;
margin-top: 134px;
}
.footer-content-grid {
gap: 71px;
}
.footer-brand {
margin-bottom: 34px;
}
.contact-header,
.links-header {
margin-bottom: 34px;
}
.contact-item {
margin-bottom: 21px;
}
.footer-navigation li {
margin-bottom: 21px;
}
.copyright-zone {
margin: 67px auto 0;
padding-top: 51px;
}
/* About Section - Increased Margins */
.about-journey-space {
padding: 147px 57px 127px;
}
.section-intro-area {
margin-bottom: 114px;
}
.about-main-title {
margin-bottom: 42px;
}
.story-timeline-grid {
gap: 94px;
margin-bottom: 134px;
}
.history-block {
padding: 71px;
}
.timeline-header {
margin-bottom: 51px;
}
.story-content p {
margin-bottom: 34px;
}
.credentials-communication-area {
gap: 114px;
margin-bottom: 147px;
}
.credentials-title,
.style-title {
margin-bottom: 63px;
}
.credentials-grid {
gap: 51px;
}
.credential-header {
margin-bottom: 29px;
}
.credential-list li {
margin-bottom: 21px;
padding-left: 42px;
}
.style-description p {
margin-bottom: 51px;
}
.style-highlights {
gap: 42px;
}
.style-point {
padding: 38px;
}
.point-title {
margin-bottom: 21px;
}
.trust-foundation-area {
margin-bottom: 114px;
}
.trust-title {
margin-bottom: 94px;
}
.trust-reasons-grid {
gap: 63px;
}
.trust-reason {
padding: 57px;
}
.reason-icon-space {
margin-bottom: 42px;
}
.reason-title {
margin-bottom: 29px;
}
.call-to-connection {
padding: 94px;
}
.connection-title {
margin-bottom: 38px;
}
.connection-text {
margin-bottom: 57px;
}
/* Services Section - Increased Margins */
.services-landscape {
padding: 154px 57px 137px;
}
.services-intro-zone {
margin-bottom: 131px;
}
.services-primary-title {
margin-bottom: 47px;
}
.services-showcase-grid {
gap: 64px;
margin-bottom: 147px;
}
.service-content-space {
padding: 58px 63px 71px;
}
.service-title {
margin-bottom: 29px;
}
.service-description {
margin-bottom: 51px;
}
.problems-solved-block {
margin-bottom: 44px;
padding: 42px;
}
.problems-header {
margin-bottom: 27px;
}
.problems-list li {
margin-bottom: 17px;
padding-left: 34px;
}
.services-consultation-banner {
padding: 107px 71px;
}
.consultation-title {
margin-bottom: 34px;
}
.consultation-text {
margin-bottom: 64px;
}
.consultation-actions {
gap: 47px;
}
/* Pricing Section - Increased Margins */
.pricing-universe {
padding: 142px 57px 131px;
}
.pricing-header-zone {
margin-bottom: 101px;
}
.pricing-main-headline {
margin-bottom: 44px;
}
.format-selector-area {
margin-bottom: 110px;
gap: 27px;
}
.format-toggle-wrapper {
padding: 29px 47px;
gap: 34px;
}
.tariffs-showcase-grid {
gap: 58px;
margin-bottom: 134px;
}
.pricing-card-block {
padding: 64px;
}
.card-header-section {
margin-bottom: 56px;
padding-bottom: 47px;
}
.tariff-title {
margin-bottom: 32px;
}
.price-display-area {
margin-bottom: 29px;
}
.savings-indicator {
margin-top: 17px;
}
.tariff-subtitle {
margin-top: 21px;
}
.advantages-section {
margin-bottom: 49px;
}
.advantages-header {
margin-bottom: 29px;
}
.advantages-listing {
margin: 0 0 41px 0;
}
.advantages-listing li {
margin-bottom: 20px;
padding-left: 42px;
}
.format-benefits {
padding: 34px;
margin-bottom: 47px;
}
.benefits-subheader {
margin-bottom: 23px;
}
.benefits-list li {
margin-bottom: 14px;
padding-left: 29px;
}
.pricing-additional-info {
margin-bottom: 107px;
}
.info-blocks-grid {
gap: 47px;
}
.info-block {
padding: 47px;
}
.info-title {
margin-bottom: 26px;
}
.pricing-contact-section {
padding: 89px 64px;
}
.contact-cta-title {
margin-bottom: 32px;
}
.contact-cta-text {
margin-bottom: 62px;
}
.contact-actions-area {
gap: 41px;
}
.contact-info-quick {
gap: 47px;
}
/* Responsive Adjustments for Increased Margins */
@media (max-width: 1280px) {
/* Reduce margins slightly for medium screens */
.hero-showcase {
padding: 94px 42px 84px;
}
.about-journey-space {
padding: 104px 42px 89px;
}
.services-landscape {
padding: 109px 42px 97px;
}
.pricing-universe {
padding: 101px 42px 93px;
}
.navigation-flow {
padding: 0 42px;
}
.site-foundation {
padding: 67px 42px 38px;
margin-top: 94px;
}
}
@media (max-width: 890px) {
/* Further margin reduction for tablets */
.workspace-banner {
padding: 21px 0;
}
.navigation-flow {
padding: 0 34px;
}
.hero-showcase {
padding: 67px 34px 59px;
}
.hero-content-area {
gap: 63px;
}
.primary-message-zone {
padding: 42px 0;
}
.about-journey-space {
padding: 84px 34px 71px;
}
.services-landscape {
padding: 89px 34px 79px;
}
.pricing-universe {
padding: 81px 34px 73px;
}
.site-foundation {
padding: 51px 34px 27px;
margin-top: 67px;
}
.story-timeline-grid {
gap: 67px;
margin-bottom: 94px;
}
.credentials-communication-area {
gap: 67px;
margin-bottom: 104px;
}
.trust-reasons-grid {
gap: 42px;
}
.services-showcase-grid {
gap: 47px;
margin-bottom: 104px;
}
.tariffs-showcase-grid {
gap: 42px;
margin-bottom: 94px;
}
.pricing-card-block {
padding: 47px 34px;
}
.history-block {
padding: 51px;
}
.trust-reason {
padding: 42px;
}
.call-to-connection {
padding: 67px 42px;
}
.services-consultation-banner {
padding: 71px 47px;
}
.pricing-contact-section {
padding: 67px 42px;
}
}
@media (max-width: 640px) {
/* Mobile-optimized margins */
.workspace-banner {
padding: 17px 0;
}
.navigation-flow {
padding: 0 27px;
}
.hero-showcase {
padding: 51px 27px 47px;
}
.hero-content-area {
gap: 47px;
}
.primary-message-zone {
padding: 34px 0;
}
.hero-headline {
margin-bottom: 34px;
}
.hero-description {
margin-bottom: 51px;
}
.action-area {
gap: 27px;
}
.about-journey-space {
padding: 71px 27px 59px;
}
.services-landscape {
padding: 73px 27px 67px;
}
.pricing-universe {
padding: 67px 27px 59px;
}
.site-foundation {
padding: 42px 27px 21px;
margin-top: 51px;
}
.section-intro-area {
margin-bottom: 71px;
}
.story-timeline-grid {
gap: 51px;
margin-bottom: 71px;
}
.credentials-communication-area {
gap: 51px;
margin-bottom: 84px;
}
.trust-foundation-area {
margin-bottom: 71px;
}
.trust-title {
margin-bottom: 67px;
}
.trust-reasons-grid {
gap: 34px;
}
.services-intro-zone {
margin-bottom: 84px;
}
.services-showcase-grid {
gap: 38px;
margin-bottom: 84px;
}
.pricing-header-zone {
margin-bottom: 67px;
}
.pricing-main-headline {
margin-bottom: 29px;
}
.format-selector-area {
margin-bottom: 73px;
}
.tariffs-showcase-grid {
gap: 34px;
margin-bottom: 71px;
}
.pricing-card-block {
padding: 34px 24px;
}
.history-block {
padding: 38px 29px;
}
.trust-reason {
padding: 34px 27px;
}
.call-to-connection {
padding: 51px 27px;
}
.services-consultation-banner {
padding: 51px 27px;
}
.pricing-contact-section {
padding: 51px 27px;
}
.service-content-space {
padding: 38px 27px 47px;
}
.footer-content-grid {
gap: 51px;
}
.copyright-zone {
margin: 51px auto 0;
padding-top: 34px;
}
.info-blocks-grid {
gap: 34px;
}
.info-block {
padding: 34px;
}
.pricing-additional-info {
margin-bottom: 71px;
}
}
/* Methodology Section Styles */
.methodology-framework {
padding: 157px 57px 143px;
background: linear-gradient(160deg, var(--misty-background) 0%, rgba(255,255,255,0.7) 40%, var(--neutral-light) 100%);
position: relative;
}
.methodology-framework::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.methodology-content-container {
max-width: 1560px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Methodology Introduction */
.methodology-intro-header {
text-align: center;
margin-bottom: 119px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.methodology-primary-title {
font-family: 'Raleway', sans-serif;
font-size: 3.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 49px;
line-height: 1.2;
text-shadow: 0 4px 8px rgba(7, 59, 76, 0.1);
}
.methodology-intro-text {
font-size: 1.3rem;
color: var(--charcoal-text);
line-height: 1.7;
opacity: 0.9;
}
/* Foundation Principles */
.foundation-principles-area {
margin-bottom: 151px;
}
.foundation-title {
font-family: 'Raleway', sans-serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 89px;
}
.foundation-content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 67px;
}
.foundation-pillar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(18px);
border-radius: 34px;
padding: 53px;
box-shadow: 0 23px 71px rgba(7, 59, 76, 0.12);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.foundation-pillar:hover {
transform: translateY(-17px) scale(1.02);
box-shadow: 0 41px 107px rgba(7, 59, 76, 0.18);
}
.foundation-pillar:nth-child(1) {
transform: rotate(1.2deg);
}
.foundation-pillar:nth-child(2) {
transform: rotate(-0.8deg);
}
.foundation-pillar:nth-child(3) {
transform: rotate(0.5deg);
}
.foundation-pillar:hover:nth-child(1),
.foundation-pillar:hover:nth-child(2),
.foundation-pillar:hover:nth-child(3) {
transform: translateY(-17px) scale(1.02) rotate(0deg);
}
.pillar-visual-element {
margin-bottom: 38px;
text-align: center;
}
.pillar-image {
width: 160px;
height: 120px;
object-fit: cover;
border-radius: 23px;
box-shadow: 0 11px 31px rgba(7, 59, 76, 0.15);
transition: transform 0.5s ease;
}
.foundation-pillar:hover .pillar-image {
transform: scale(1.08) rotate(-2deg);
}
.pillar-content-zone {
text-align: center;
}
.pillar-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 27px;
}
.pillar-description {
font-size: 1.1rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 34px;
opacity: 0.9;
}
.pillar-benefits {
display: flex;
flex-wrap: wrap;
gap: 13px;
justify-content: center;
}
.benefit-point {
background: var(--ocean-depth);
color: white;
padding: 9px 18px;
border-radius: 19px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.benefit-point:hover {
background: var(--charcoal-text);
transform: scale(1.08);
}
/* Techniques Implementation */
.techniques-implementation-space {
margin-bottom: 137px;
}
.techniques-main-title {
font-family: 'Raleway', sans-serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 97px;
}
.techniques-showcase-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 59px;
}
.technique-category-block {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border-radius: 27px;
padding: 47px;
box-shadow: 0 17px 53px rgba(7, 59, 76, 0.1);
transition: transform 0.4s ease;
}
.technique-category-block:hover {
transform: translateY(-8px);
}
.category-header {
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 39px;
text-align: center;
padding-bottom: 23px;
border-bottom: 3px solid var(--ocean-depth);
}
.technique-items-list {
display: flex;
flex-direction: column;
gap: 31px;
}
.technique-item {
background: rgba(230, 235, 238, 0.6);
padding: 29px;
border-radius: 19px;
border-left: 5px solid var(--secondary-color);
transition: all 0.3s ease;
}
.technique-item:hover {
background: rgba(230, 235, 238, 0.8);
transform: translateX(7px);
border-left-color: var(--ocean-depth);
}
.technique-name {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.technique-explanation {
font-size: 1rem;
color: var(--charcoal-text);
line-height: 1.6;
margin: 0;
}
/* Effectiveness Explanation */
.effectiveness-explanation-zone {
margin-bottom: 143px;
}
.effectiveness-title {
font-family: 'Raleway', sans-serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 73px;
}
.effectiveness-content-flow {
display: grid;
grid-template-columns: 1fr;
gap: 67px;
}
.effectiveness-main-text {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
padding: 51px;
border-radius: 31px;
box-shadow: 0 19px 59px rgba(7, 59, 76, 0.1);
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.effectiveness-paragraph {
font-size: 1.2rem;
color: var(--charcoal-text);
line-height: 1.7;
margin-bottom: 29px;
opacity: 0.9;
}
.effectiveness-paragraph:last-child {
margin-bottom: 0;
}
.effectiveness-factors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 43px;
}
.factor-element {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
padding: 41px;
border-radius: 25px;
text-align: center;
box-shadow: 0 15px 47px rgba(7, 59, 76, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.factor-element:hover {
transform: translateY(-11px) scale(1.03);
box-shadow: 0 27px 79px rgba(7, 59, 76, 0.15);
}
.factor-icon-area {
margin-bottom: 31px;
}
.custom-factor-icon {
width: 71px;
height: 71px;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
.practical-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.adaptive-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.measurable-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.sustainable-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.factor-title {
font-family: 'Raleway', sans-serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 21px;
}
.factor-description {
font-size: 1.05rem;
color: var(--charcoal-text);
line-height: 1.6;
margin: 0;
}
/* Author's System */
.authors-system-presentation {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 83px;
align-items: center;
margin-bottom: 121px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
padding: 71px;
border-radius: 39px;
box-shadow: 0 31px 97px rgba(7, 59, 76, 0.12);
}
.system-visual-side {
display: flex;
justify-content: center;
align-items: center;
}
.system-diagram {
width: 100%;
max-width: 380px;
height: auto;
border-radius: 27px;
box-shadow: 0 23px 67px rgba(7, 59, 76, 0.2);
transition: transform 0.6s ease;
}
.system-diagram:hover {
transform: scale(1.05) rotate(1deg);
}
.system-description-side {
padding-left: 34px;
}
.system-title {
font-family: 'Raleway', sans-serif;
font-size: 2.8rem;
font-weight: 700;
color: var(--ocean-depth);
margin-bottom: 19px;
}
.system-subtitle {
font-size: 1.2rem;
color: var(--charcoal-text);
opacity: 0.8;
margin-bottom: 43px;
font-style: italic;
}
.system-intro {
font-size: 1.15rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 47px;
}
.grip-components {
display: flex;
flex-direction: column;
gap: 27px;
}
.grip-component {
display: flex;
align-items: flex-start;
gap: 23px;
padding: 23px;
background: rgba(230, 235, 238, 0.5);
border-radius: 17px;
transition: all 0.3s ease;
}
.grip-component:hover {
background: rgba(230, 235, 238, 0.7);
transform: translateX(9px);
}
.component-letter {
font-family: 'Raleway', sans-serif;
font-size: 2.2rem;
font-weight: 700;
color: white;
background: var(--ocean-depth);
width: 51px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
margin: 0;
}
.component-content {
flex: 1;
}
.component-name {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 11px;
}
.component-description {
font-size: 1rem;
color: var(--charcoal-text);
line-height: 1.5;
margin: 0;
}
/* Call to Action */
.methodology-action-invitation {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 47px;
padding: 83px 59px;
text-align: center;
position: relative;
overflow: hidden;
}
.methodology-action-invitation::before {
content: '';
position: absolute;
top: -25%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
animation: float-gentle 12s ease-in-out infinite;
}
.methodology-action-invitation::after {
content: '';
position: absolute;
bottom: -30%;
left: -25%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
border-radius: 50%;
animation: float-gentle 15s ease-in-out infinite reverse;
}
@keyframes float-gentle {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-15px, -25px) rotate(120deg); }
66% { transform: translate(20px, -35px) rotate(240deg); }
}
.invitation-content-wrapper {
position: relative;
z-index: 2;
max-width: 890px;
margin: 0 auto;
}
.invitation-title {
font-family: 'Raleway', sans-serif;
font-size: 2.4rem;
font-weight: 600;
color: white;
margin-bottom: 31px;
line-height: 1.3;
}
.invitation-text {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 53px;
}
.invitation-actions {
display: flex;
justify-content: center;
gap: 37px;
flex-wrap: wrap;
}
.invitation-primary-btn {
background: var(--accent-color);
color: white;
border: none;
padding: 21px 47px;
font-size: 1.15rem;
font-weight: 600;
border-radius: 41px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 15px 31px rgba(231, 76, 60, 0.3);
}
.invitation-primary-btn:hover {
transform: translateY(-7px) scale(1.05);
box-shadow: 0 25px 47px rgba(231, 76, 60, 0.4);
background: #c0392b;
}
.invitation-secondary-btn {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.8);
padding: 19px 45px;
font-size: 1.15rem;
font-weight: 500;
border-radius: 41px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.invitation-secondary-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: white;
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 1280px) {
.methodology-framework {
padding: 111px 42px 101px;
}
.foundation-content-grid {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 51px;
}
.techniques-showcase-layout {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 43px;
}
.authors-system-presentation {
grid-template-columns: 1fr;
gap: 59px;
text-align: center;
}
.system-description-side {
padding-left: 0;
}
.effectiveness-factors-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 37px;
}
}
@media (max-width: 890px) {
.methodology-framework {
padding: 89px 34px 79px;
}
.methodology-primary-title {
font-size: 2.6rem;
margin-bottom: 37px;
}
.methodology-intro-text {
font-size: 1.15rem;
}
.methodology-intro-header {
margin-bottom: 84px;
}
.foundation-principles-area {
margin-bottom: 107px;
}
.foundation-title {
font-size: 2.1rem;
margin-bottom: 63px;
}
.foundation-content-grid {
grid-template-columns: 1fr;
gap: 37px;
}
.foundation-pillar {
padding: 39px;
}
.techniques-implementation-space {
margin-bottom: 97px;
}
.techniques-main-title {
font-size: 2.1rem;
margin-bottom: 67px;
}
.techniques-showcase-layout {
grid-template-columns: 1fr;
gap: 31px;
}
.technique-category-block {
padding: 34px;
}
.effectiveness-explanation-zone {
margin-bottom: 101px;
}
.effectiveness-title {
font-size: 2.1rem;
margin-bottom: 53px;
}
.effectiveness-main-text {
padding: 37px;
}
.effectiveness-factors-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 29px;
}
.factor-element {
padding: 31px;
}
.authors-system-presentation {
padding: 51px 37px;
margin-bottom: 89px;
}
.system-title {
font-size: 2.3rem;
}
.grip-components {
gap: 21px;
}
.grip-component {
gap: 17px;
padding: 19px;
}
.component-letter {
width: 43px;
height: 43px;
font-size: 1.8rem;
}
.methodology-action-invitation {
padding: 59px 37px;
}
.invitation-title {
font-size: 2rem;
margin-bottom: 23px;
}
.invitation-text {
font-size: 1.1rem;
margin-bottom: 41px;
}
.invitation-actions {
flex-direction: column;
align-items: center;
gap: 23px;
}
.invitation-primary-btn,
.invitation-secondary-btn {
width: 100%;
max-width: 320px;
}
}
@media (max-width: 640px) {
.methodology-framework {
padding: 71px 27px 63px;
}
.methodology-intro-header {
margin-bottom: 67px;
}
.methodology-primary-title {
font-size: 2.1rem;
margin-bottom: 29px;
}
.methodology-intro-text {
font-size: 1.05rem;
}
.foundation-principles-area {
margin-bottom: 84px;
}
.foundation-title {
font-size: 1.8rem;
margin-bottom: 51px;
}
.foundation-content-grid {
gap: 29px;
}
.foundation-pillar {
padding: 29px 23px;
}
.pillar-image {
width: 120px;
height: 90px;
}
.pillar-heading {
font-size: 1.5rem;
margin-bottom: 21px;
}
.pillar-description {
font-size: 1rem;
margin-bottom: 27px;
}
.techniques-implementation-space {
margin-bottom: 79px;
}
.techniques-main-title {
font-size: 1.8rem;
margin-bottom: 53px;
}
.techniques-showcase-layout {
gap: 23px;
}
.technique-category-block {
padding: 27px 21px;
}
.category-header {
font-size: 1.4rem;
margin-bottom: 29px;
padding-bottom: 17px;
}
.technique-items-list {
gap: 23px;
}
.technique-item {
padding: 21px;
}
.technique-name {
font-size: 1.1rem;
margin-bottom: 13px;
}
.technique-explanation {
font-size: 0.95rem;
}
.effectiveness-explanation-zone {
margin-bottom: 83px;
}
.effectiveness-title {
font-size: 1.8rem;
margin-bottom: 41px;
}
.effectiveness-content-flow {
gap: 51px;
}
.effectiveness-main-text {
padding: 29px 23px;
}
.effectiveness-paragraph {
font-size: 1.05rem;
margin-bottom: 23px;
}
.effectiveness-factors-grid {
grid-template-columns: 1fr;
gap: 23px;
}
.factor-element {
padding: 23px 19px;
}
.custom-factor-icon {
width: 59px;
height: 59px;
}
.factor-title {
font-size: 1.2rem;
margin-bottom: 17px;
}
.factor-description {
font-size: 1rem;
}
.authors-system-presentation {
padding: 39px 23px;
margin-bottom: 71px;
}
.system-title {
font-size: 1.9rem;
margin-bottom: 15px;
}
.system-subtitle {
font-size: 1.05rem;
margin-bottom: 31px;
}
.system-intro {
font-size: 1.05rem;
margin-bottom: 37px;
}
.grip-components {
gap: 17px;
}
.grip-component {
flex-direction: column;
text-align: center;
gap: 13px;
padding: 17px;
}
.component-letter {
align-self: center;
width: 37px;
height: 37px;
font-size: 1.5rem;
}
.component-name {
font-size: 1.15rem;
margin-bottom: 9px;
}
.component-description {
font-size: 0.95rem;
}
.methodology-action-invitation {
padding: 47px 23px;
border-radius: 31px;
}
.invitation-title {
font-size: 1.7rem;
margin-bottom: 19px;
}
.invitation-text {
font-size: 1.05rem;
margin-bottom: 37px;
}
.invitation-actions {
gap: 19px;
}
.invitation-primary-btn,
.invitation-secondary-btn {
padding: 17px 29px;
font-size: 1.05rem;
}
}
/* About/Methodology Page Specific Styles */
.methodology-exploration {
padding: 127px 57px 104px;
background: linear-gradient(168deg, var(--misty-background) 0%, rgba(255,255,255,0.7) 55%, var(--neutral-light) 100%);
position: relative;
}
.methodology-exploration::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
opacity: 0.4;
}
.methodology-content-flow {
max-width: 1360px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Introduction Area */
.intro-positioning-area {
text-align: center;
margin-bottom: 97px;
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.methodology-main-title {
font-family: 'Raleway', sans-serif;
font-size: 2.7rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 38px;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(7, 59, 76, 0.08);
}
.methodology-intro-text {
font-size: 1.2rem;
color: var(--charcoal-text);
line-height: 1.6;
opacity: 0.9;
}
/* Approach Foundation Grid */
.approach-foundation-grid {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 71px;
margin-bottom: 94px;
align-items: start;
}
.philosophy-block {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(13px);
padding: 53px;
border-radius: 29px;
box-shadow: 0 17px 47px rgba(7, 59, 76, 0.11);
transform: rotate(-0.4deg);
transition: transform 0.5s ease;
}
.philosophy-block:hover {
transform: rotate(0deg) translateY(-7px);
}
.philosophy-title {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 34px;
}
.philosophy-content p {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 43px;
color: var(--charcoal-text);
}
.key-principles-area {
display: flex;
flex-direction: column;
gap: 28px;
}
.principle-element {
background: rgba(230, 235, 238, 0.6);
padding: 27px;
border-radius: 19px;
border-left: 3px solid var(--ocean-depth);
}
.principle-name {
font-family: 'Raleway', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--charcoal-text);
margin-bottom: 11px;
}
.principle-element p {
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
color: var(--charcoal-text);
opacity: 0.9;
}
/* Visual Representation */
.visual-representation {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.methodology-visual {
width: 100%;
max-width: 420px;
height: auto;
border-radius: 23px;
box-shadow: 0 19px 53px rgba(7, 59, 76, 0.18);
transform: rotate(1.2deg);
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.methodology-visual:hover {
transform: rotate(0deg) scale(1.03);
}
/* Techniques Arsenal Section */
.techniques-arsenal-section {
margin-bottom: 89px;
}
.techniques-header {
font-family: 'Raleway', sans-serif;
font-size: 2.1rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 67px;
}
.techniques-showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 37px;
}
.technique-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(9px);
padding: 41px;
border-radius: 24px;
text-align: center;
box-shadow: 0 13px 38px rgba(7, 59, 76, 0.09);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.technique-card:hover {
transform: translateY(-9px);
box-shadow: 0 23px 64px rgba(7, 59, 76, 0.14);
}
.technique-card:nth-child(odd) {
transform: rotate(0.3deg);
}
.technique-card:nth-child(even) {
transform: rotate(-0.5deg);
}
.technique-card:hover:nth-child(odd),
.technique-card:hover:nth-child(even) {
transform: translateY(-9px) rotate(0deg);
}
.technique-icon {
width: 67px;
height: 67px;
margin: 0 auto 29px;
border-radius: 50%;
position: relative;
}
.strategic-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.systems-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.coaching-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.metrics-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.technique-title {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 19px;
}
.technique-description {
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Methodology Foundation */
.methodology-foundation {
margin-bottom: 83px;
}
.foundation-title {
font-family: 'Raleway', sans-serif;
font-size: 2rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 47px;
text-align: center;
}
.foundation-explanation p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 49px;
color: var(--charcoal-text);
text-align: center;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.sources-framework {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 41px;
}
.source-item {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(7px);
padding: 37px;
border-radius: 21px;
box-shadow: 0 11px 31px rgba(7, 59, 76, 0.08);
transition: transform 0.3s ease;
}
.source-item:hover {
transform: translateY(-5px);
}
.source-name {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.source-item p {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Why It Works Section */
.why-it-works-section {
margin-bottom: 76px;
}
.effectiveness-title {
font-family: 'Raleway', sans-serif;
font-size: 2rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 47px;
text-align: center;
}
.effectiveness-explanation {
max-width: 1120px;
margin: 0 auto;
}
.reason-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 39px;
}
.effectiveness-reason {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(11px);
padding: 43px;
border-radius: 27px;
box-shadow: 0 15px 43px rgba(7, 59, 76, 0.1);
transition: all 0.4s ease;
border-left: 4px solid var(--ocean-depth);
}
.effectiveness-reason:hover {
transform: translateY(-7px);
box-shadow: 0 25px 61px rgba(7, 59, 76, 0.15);
}
.reason-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 19px;
}
.effectiveness-reason p {
font-size: 1.02rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Unique System Highlight */
.unique-system-highlight {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 37px;
padding: 73px;
position: relative;
overflow: hidden;
}
.unique-system-highlight::before {
content: '';
position: absolute;
top: -25%;
right: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
border-radius: 50%;
animation: float-gentle 12s ease-in-out infinite;
}
.unique-system-highlight::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
border-radius: 50%;
animation: float-gentle 15s ease-in-out infinite reverse;
}
@keyframes float-gentle {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-15px, -25px) rotate(120deg); }
66% { transform: translate(20px, -30px) rotate(240deg); }
}
.system-presentation {
position: relative;
z-index: 2;
text-align: center;
}
.system-title {
font-family: 'Raleway', sans-serif;
font-size: 2.2rem;
font-weight: 600;
color: white;
margin-bottom: 31px;
line-height: 1.3;
}
.system-description {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 59px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.evolution-phases {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 31px;
}
.phase-element {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
padding: 37px 23px;
border-radius: 23px;
text-align: center;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.phase-element:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-7px);
}
.phase-number {
font-family: 'Raleway', sans-serif;
font-size: 2.1rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 19px;
display: block;
}
.phase-name {
font-family: 'Raleway', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: white;
margin-bottom: 15px;
line-height: 1.3;
}
.phase-element p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
margin: 0;
}
/* Responsive Design */
@media (max-width: 1280px) {
.approach-foundation-grid {
grid-template-columns: 1fr;
gap: 53px;
}
.visual-representation {
margin-top: 29px;
}
.techniques-showcase {
grid-template-columns: 1fr;
gap: 31px;
}
.sources-framework {
grid-template-columns: 1fr;
gap: 31px;
}
.reason-grid {
grid-template-columns: 1fr;
gap: 31px;
}
.evolution-phases {
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
}
@media (max-width: 890px) {
.methodology-exploration {
padding: 89px 42px 73px;
}
.methodology-main-title {
font-size: 2.2rem;
}
.methodology-intro-text {
font-size: 1.1rem;
}
.philosophy-block {
padding: 39px;
transform: rotate(0deg);
}
.technique-card {
padding: 31px;
transform: rotate(0deg) !important;
}
.technique-card:hover {
transform: translateY(-9px) rotate(0deg) !important;
}
.unique-system-highlight {
padding: 51px 31px;
}
.system-title {
font-size: 1.8rem;
}
.system-description {
font-size: 1.05rem;
margin-bottom: 43px;
}
.evolution-phases {
grid-template-columns: 1fr;
gap: 21px;
}
}
@media (max-width: 640px) {
.methodology-exploration {
padding: 67px 27px 59px;
}
.intro-positioning-area {
margin-bottom: 71px;
}
.methodology-main-title {
font-size: 1.9rem;
margin-bottom: 27px;
}
.methodology-intro-text {
font-size: 1.05rem;
}
.approach-foundation-grid {
gap: 41px;
margin-bottom: 71px;
}
.philosophy-block {
padding: 29px;
}
.philosophy-title {
font-size: 1.6rem;
margin-bottom: 27px;
}
.key-principles-area {
gap: 21px;
}
.principle-element {
padding: 19px;
}
.principle-name {
font-size: 1.05rem;
margin-bottom: 9px;
}
.techniques-arsenal-section {
margin-bottom: 67px;
}
.techniques-header {
font-size: 1.7rem;
margin-bottom: 47px;
}
.technique-card {
padding: 23px;
}
.technique-icon {
width: 53px;
height: 53px;
margin-bottom: 21px;
}
.technique-title {
font-size: 1.15rem;
margin-bottom: 15px;
}
.technique-description {
font-size: 0.95rem;
}
.methodology-foundation {
margin-bottom: 63px;
}
.foundation-title {
font-size: 1.7rem;
margin-bottom: 34px;
}
.foundation-explanation p {
font-size: 1.05rem;
margin-bottom: 37px;
}
.source-item {
padding: 27px;
}
.source-name {
font-size: 1.15rem;
margin-bottom: 13px;
}
.source-item p {
font-size: 0.93rem;
}
.why-it-works-section {
margin-bottom: 57px;
}
.effectiveness-title {
font-size: 1.7rem;
margin-bottom: 34px;
}
.effectiveness-reason {
padding: 29px;
}
.reason-heading {
font-size: 1.15rem;
margin-bottom: 15px;
}
.effectiveness-reason p {
font-size: 0.97rem;
}
.unique-system-highlight {
padding: 37px 21px;
border-radius: 27px;
}
.system-title {
font-size: 1.6rem;
margin-bottom: 23px;
}
.system-description {
font-size: 1rem;
margin-bottom: 37px;
}
.phase-element {
padding: 27px 17px;
}
.phase-number {
font-size: 1.7rem;
margin-bottom: 15px;
}
.phase-name {
font-size: 1.05rem;
margin-bottom: 13px;
}
.phase-element p {
font-size: 0.85rem;
}
}
/* Additional Human-like Imperfections */
.technique-card:nth-child(2) {
margin-top: 7px;
}
.source-item:nth-child(3) {
margin-left: -3px;
}
.effectiveness-reason:nth-child(1) {
padding: 41px;
}
.effectiveness-reason:nth-child(4) {
padding: 45px;
}
.principle-element:nth-child(2) {
margin-right: 2px;
}
.phase-element:nth-child(3) {
margin-top: -2px;
}
/* Contacts Page Styles */
.contact-universe {
padding: 119px 57px 97px;
background: linear-gradient(148deg, var(--misty-background) 0%, rgba(255,255,255,0.9) 60%, var(--neutral-light) 100%);
position: relative;
}
.contact-universe::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.contact-flow-container {
max-width: 1420px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Contact Information Section */
.contact-info-showcase {
margin-bottom: 127px;
}
.contact-intro-space {
text-align: center;
margin-bottom: 84px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.contact-main-heading {
font-family: 'Raleway', sans-serif;
font-size: 2.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 34px;
line-height: 1.2;
}
.contact-description {
font-size: 1.2rem;
color: var(--charcoal-text);
line-height: 1.6;
opacity: 0.9;
}
.contact-details-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 47px;
}
.contact-detail-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
padding: 53px 39px;
border-radius: 27px;
text-align: center;
box-shadow: 0 19px 57px rgba(7, 59, 76, 0.12);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.contact-detail-card:hover {
transform: translateY(-11px);
box-shadow: 0 31px 84px rgba(7, 59, 76, 0.18);
}
.contact-detail-card:nth-child(1) {
transform: rotate(0.6deg);
}
.contact-detail-card:nth-child(3) {
transform: rotate(-0.4deg);
}
.contact-detail-card:hover:nth-child(1),
.contact-detail-card:hover:nth-child(3) {
transform: translateY(-11px) rotate(0deg);
}
.contact-icon-area {
margin-bottom: 31px;
}
.custom-contact-icon {
width: 71px;
height: 71px;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
.location-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.phone-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.hours-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.contact-detail-title {
font-family: 'Raleway', sans-serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 21px;
}
.contact-detail-info {
font-size: 1.05rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
.contact-link {
color: var(--ocean-depth);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.contact-link:hover {
color: var(--accent-color);
text-decoration: underline;
}
/* Contact Form Section */
.contact-form-territory {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 89px;
margin-bottom: 94px;
align-items: start;
}
.form-presentation-area {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
padding: 67px;
border-radius: 31px;
box-shadow: 0 23px 71px rgba(7, 59, 76, 0.14);
transform: rotate(-0.3deg);
transition: transform 0.5s ease;
}
.form-presentation-area:hover {
transform: rotate(0deg) translateY(-7px);
}
.form-section-title {
font-family: 'Raleway', sans-serif;
font-size: 2.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 23px;
}
.form-intro-text {
font-size: 1.05rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 43px;
opacity: 0.9;
}
.contact-form-element {
display: flex;
flex-direction: column;
gap: 31px;
}
.form-input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 27px;
}
.input-field-wrapper {
display: flex;
flex-direction: column;
gap: 11px;
}
.form-label {
font-family: 'Raleway', sans-serif;
font-size: 1.05rem;
font-weight: 500;
color: var(--charcoal-text);
}
.form-input-field,
.form-textarea-field {
padding: 17px 23px;
border: 2px solid rgba(7, 59, 76, 0.15);
border-radius: 13px;
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
color: var(--charcoal-text);
}
.form-input-field:focus,
.form-textarea-field:focus {
outline: none;
border-color: var(--ocean-depth);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 7px 19px rgba(7, 59, 76, 0.1);
}
.form-textarea-field {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
.form-textarea-field::placeholder {
color: rgba(5, 38, 51, 0.5);
font-style: italic;
}
.form-submission-area {
display: flex;
flex-direction: column;
gap: 19px;
align-items: flex-start;
}
.contact-submit-btn {
background: var(--ocean-depth);
color: white;
border: none;
padding: 19px 47px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 29px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 13px 31px rgba(7, 59, 76, 0.25);
font-family: 'Raleway', sans-serif;
}
.contact-submit-btn:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 21px 47px rgba(7, 59, 76, 0.35);
background: var(--charcoal-text);
}
.privacy-notice {
font-size: 0.9rem;
color: var(--charcoal-text);
opacity: 0.7;
line-height: 1.5;
margin: 0;
}
.privacy-link {
color: var(--ocean-depth);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.privacy-link:hover {
color: var(--accent-color);
text-decoration: underline;
}
/* Map Section */
.location-map-area {
position: relative;
}
.map-section-title {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 29px;
text-align: center;
}
.map-container-wrapper {
position: relative;
border-radius: 23px;
overflow: hidden;
box-shadow: 0 17px 49px rgba(7, 59, 76, 0.15);
height: 420px;
}
.location-map-embed {
width: 100%;
height: 100%;
border: none;
filter: grayscale(20%) contrast(1.1);
transition: filter 0.4s ease;
}
.location-map-embed:hover {
filter: grayscale(0%) contrast(1.2);
}
.map-info-overlay {
position: absolute;
top: 23px;
left: 23px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 19px 27px;
border-radius: 17px;
box-shadow: 0 9px 23px rgba(7, 59, 76, 0.2);
}
.overlay-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 7px;
}
.overlay-address {
font-size: 0.9rem;
color: var(--charcoal-text);
margin: 0;
opacity: 0.8;
}
/* Quick Contact Banner */
.quick-contact-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 37px;
padding: 59px;
text-align: center;
position: relative;
overflow: hidden;
}
.quick-contact-banner::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 140%;
height: 160%;
background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 55%);
animation: rotate-gentle 20s linear infinite;
}
@keyframes rotate-gentle {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.banner-content-flow {
position: relative;
z-index: 2;
}
.banner-headline {
font-family: 'Raleway', sans-serif;
font-size: 2rem;
font-weight: 600;
color: white;
margin-bottom: 21px;
}
.banner-text {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 37px;
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.banner-actions {
display: flex;
justify-content: center;
}
.quick-call-btn {
background: var(--accent-color);
color: white;
text-decoration: none;
padding: 17px 41px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 31px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 11px 27px rgba(231, 76, 60, 0.3);
font-family: 'Raleway', sans-serif;
}
.quick-call-btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 19px 41px rgba(231, 76, 60, 0.4);
background: #c0392b;
}
/* Responsive Design */
@media (max-width: 1280px) {
.contact-details-grid {
grid-template-columns: 1fr;
gap: 37px;
}
.contact-form-territory {
grid-template-columns: 1fr;
gap: 59px;
}
.map-container-wrapper {
height: 350px;
}
}
@media (max-width: 890px) {
.contact-universe {
padding: 84px 42px 71px;
}
.contact-main-heading {
font-size: 2.3rem;
}
.contact-description {
font-size: 1.1rem;
}
.contact-detail-card {
padding: 39px 29px;
transform: rotate(0deg) !important;
}
.contact-detail-card:hover {
transform: translateY(-11px) rotate(0deg) !important;
}
.form-presentation-area {
padding: 47px;
transform: rotate(0deg);
}
.form-input-grid {
grid-template-columns: 1fr;
gap: 21px;
}
.quick-contact-banner {
padding: 43px 31px;
}
.banner-headline {
font-size: 1.7rem;
}
}
@media (max-width: 640px) {
.contact-universe {
padding: 67px 27px 59px;
}
.contact-info-showcase {
margin-bottom: 84px;
}
.contact-intro-space {
margin-bottom: 57px;
}
.contact-main-heading {
font-size: 2rem;
margin-bottom: 27px;
}
.contact-description {
font-size: 1.05rem;
}
.contact-details-grid {
gap: 29px;
}
.contact-detail-card {
padding: 31px 23px;
}
.custom-contact-icon {
width: 57px;
height: 57px;
}
.contact-detail-title {
font-size: 1.2rem;
margin-bottom: 17px;
}
.contact-detail-info {
font-size: 1rem;
}
.contact-form-territory {
gap: 47px;
margin-bottom: 71px;
}
.form-presentation-area {
padding: 34px 23px;
}
.form-section-title {
font-size: 1.7rem;
margin-bottom: 19px;
}
.form-intro-text {
font-size: 1rem;
margin-bottom: 34px;
}
.contact-form-element {
gap: 25px;
}
.form-input-field,
.form-textarea-field {
padding: 15px 19px;
}
.form-textarea-field {
min-height: 120px;
}
.contact-submit-btn {
width: 100%;
padding: 17px 34px;
}
.map-section-title {
font-size: 1.5rem;
margin-bottom: 23px;
}
.map-container-wrapper {
height: 280px;
}
.map-info-overlay {
top: 17px;
left: 17px;
padding: 15px 21px;
}
.overlay-title {
font-size: 1rem;
margin-bottom: 5px;
}
.overlay-address {
font-size: 0.85rem;
}
.quick-contact-banner {
padding: 37px 21px;
border-radius: 27px;
}
.banner-headline {
font-size: 1.5rem;
margin-bottom: 17px;
}
.banner-text {
font-size: 1.05rem;
margin-bottom: 31px;
}
.quick-call-btn {
width: 100%;
max-width: 280px;
padding: 15px 31px;
}
}
/* Human-like Imperfections */
.contact-detail-card:nth-child(2) {
margin-top: 5px;
}
.form-input-field:nth-child(2) {
padding: 16px 23px;
}
.contact-submit-btn {
margin-left: 2px;
}
.map-info-overlay {
top: 21px;
left: 25px;
}
.input-field-wrapper:nth-child(1) {
margin-right: -1px;
}
/* Cookies Page Styles */
.cookies-landscape {
padding: 97px 57px 84px;
background: linear-gradient(142deg, var(--misty-background) 0%, rgba(255,255,255,0.8) 50%, var(--neutral-light) 100%);
position: relative;
}
.cookies-landscape::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.cookies-content-wrapper {
max-width: 1180px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Introduction */
.cookies-intro-zone {
text-align: center;
margin-bottom: 89px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.cookies-main-title {
font-family: 'Raleway', sans-serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 31px;
line-height: 1.2;
}
.cookies-intro-text {
font-size: 1.15rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 27px;
opacity: 0.9;
}
.last-update-info {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
padding: 13px 27px;
border-radius: 19px;
display: inline-flex;
align-items: center;
gap: 11px;
box-shadow: 0 7px 19px rgba(7, 59, 76, 0.08);
}
.update-label {
font-size: 0.9rem;
color: var(--charcoal-text);
opacity: 0.7;
}
.update-date {
font-size: 0.9rem;
font-weight: 600;
color: var(--ocean-depth);
}
/* Cookie Explanation */
.cookies-explanation-area {
margin-bottom: 71px;
}
.section-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 34px;
text-align: center;
}
.explanation-content p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--charcoal-text);
margin-bottom: 43px;
text-align: center;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.cookie-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 37px;
}
.benefit-item {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 31px;
border-radius: 21px;
text-align: center;
box-shadow: 0 11px 29px rgba(7, 59, 76, 0.09);
transition: transform 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-7px);
}
.benefit-item:nth-child(1) {
transform: rotate(0.4deg);
}
.benefit-item:nth-child(3) {
transform: rotate(-0.6deg);
}
.benefit-item:hover:nth-child(1),
.benefit-item:hover:nth-child(3) {
transform: translateY(-7px) rotate(0deg);
}
.benefit-title {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 15px;
}
.benefit-item p {
font-size: 0.95rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Cookie Types */
.cookie-types-showcase {
margin-bottom: 67px;
}
.cookie-type-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 41px;
}
.cookie-type-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
padding: 43px;
border-radius: 27px;
box-shadow: 0 17px 47px rgba(7, 59, 76, 0.12);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-left: 4px solid transparent;
}
.cookie-type-card:hover {
transform: translateY(-9px);
box-shadow: 0 27px 71px rgba(7, 59, 76, 0.18);
}
.cookie-type-card.essential {
border-left-color: var(--accent-color);
}
.cookie-type-card.analytical {
border-left-color: var(--secondary-color);
}
.cookie-type-card.functional {
border-left-color: var(--success-color);
}
.type-icon {
width: 59px;
height: 59px;
border-radius: 50%;
margin-bottom: 23px;
}
.essential-icon {
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}
.analytical-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.functional-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.type-title {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.type-description {
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal-text);
margin-bottom: 27px;
opacity: 0.9;
}
.type-examples {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 21px;
}
.example-tag {
background: rgba(230, 235, 238, 0.8);
color: var(--charcoal-text);
padding: 6px 14px;
border-radius: 13px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}
.type-status {
display: flex;
justify-content: flex-start;
}
.status-badge {
padding: 7px 17px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.required {
background: var(--accent-color);
color: white;
}
.status-badge.optional {
background: var(--secondary-light);
color: var(--secondary-color);
}
/* Cookie Management */
.cookie-management-section {
margin-bottom: 59px;
}
.management-content p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--charcoal-text);
margin-bottom: 41px;
text-align: center;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.control-options-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 33px;
}
.control-option {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(7px);
padding: 33px;
border-radius: 19px;
text-align: center;
box-shadow: 0 9px 23px rgba(7, 59, 76, 0.08);
transition: transform 0.3s ease;
}
.control-option:hover {
transform: translateY(-5px);
}
.option-title {
font-family: 'Raleway', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 13px;
}
.control-option p {
font-size: 0.95rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Browser Instructions */
.browser-instructions-area {
margin-bottom: 73px;
}
.browser-guides {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 27px;
}
.browser-guide {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(9px);
padding: 29px;
border-radius: 17px;
box-shadow: 0 7px 19px rgba(7, 59, 76, 0.07);
transition: all 0.3s ease;
border-left: 3px solid var(--ocean-depth);
}
.browser-guide:hover {
transform: translateX(5px);
box-shadow: 0 11px 29px rgba(7, 59, 76, 0.12);
}
.browser-name {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 11px;
}
.browser-guide p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.8;
font-style: italic;
}
/* Questions Banner */
.cookies-questions-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 31px;
padding: 53px;
text-align: center;
position: relative;
overflow: hidden;
}
.cookies-questions-banner::before {
content: '';
position: absolute;
top: -20%;
right: -25%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
border-radius: 50%;
animation: float-soft 10s ease-in-out infinite;
}
.cookies-questions-banner::after {
content: '';
position: absolute;
bottom: -15%;
left: -20%;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
border-radius: 50%;
animation: float-soft 12s ease-in-out infinite reverse;
}
@keyframes float-soft {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-10px, -20px) rotate(180deg); }
}
.questions-content {
position: relative;
z-index: 2;
}
.questions-title {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: white;
margin-bottom: 19px;
}
.questions-text {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* Responsive Design */
@media (max-width: 1280px) {
.cookie-benefits-grid {
grid-template-columns: 1fr;
gap: 29px;
}
.control-options-area {
grid-template-columns: 1fr;
gap: 27px;
}
.browser-guides {
grid-template-columns: 1fr;
gap: 21px;
}
}
@media (max-width: 890px) {
.cookies-landscape {
padding: 73px 42px 63px;
}
.cookies-main-title {
font-size: 2.2rem;
}
.cookies-intro-text {
font-size: 1.05rem;
}
.benefit-item {
transform: rotate(0deg) !important;
}
.benefit-item:hover {
transform: translateY(-7px) rotate(0deg) !important;
}
.cookie-type-cards {
grid-template-columns: 1fr;
gap: 31px;
}
.cookie-type-card {
padding: 33px;
}
}
@media (max-width: 640px) {
.cookies-landscape {
padding: 59px 27px 51px;
}
.cookies-intro-zone {
margin-bottom: 67px;
}
.cookies-main-title {
font-size: 1.9rem;
margin-bottom: 23px;
}
.cookies-intro-text {
font-size: 1rem;
margin-bottom: 21px;
}
.last-update-info {
padding: 11px 21px;
gap: 9px;
}
.section-heading {
font-size: 1.6rem;
margin-bottom: 27px;
}
.cookies-explanation-area {
margin-bottom: 57px;
}
.explanation-content p {
font-size: 1rem;
margin-bottom: 34px;
}
.benefit-item {
padding: 23px;
}
.benefit-title {
font-size: 1.1rem;
margin-bottom: 13px;
}
.cookie-types-showcase {
margin-bottom: 53px;
}
.cookie-type-card {
padding: 27px;
}
.type-icon {
width: 47px;
height: 47px;
margin-bottom: 19px;
}
.type-title {
font-size: 1.15rem;
margin-bottom: 15px;
}
.type-description {
font-size: 0.95rem;
margin-bottom: 21px;
}
.type-examples {
gap: 7px;
margin-bottom: 17px;
}
.example-tag {
padding: 5px 11px;
font-size: 0.75rem;
}
.cookie-management-section {
margin-bottom: 47px;
}
.management-content p {
font-size: 1rem;
margin-bottom: 31px;
}
.control-option {
padding: 25px;
}
.option-title {
font-size: 1.05rem;
margin-bottom: 11px;
}
.control-option p {
font-size: 0.9rem;
}
.browser-instructions-area {
margin-bottom: 57px;
}
.browser-guide {
padding: 23px;
}
.browser-name {
font-size: 1.05rem;
margin-bottom: 9px;
}
.browser-guide p {
font-size: 0.85rem;
}
.cookies-questions-banner {
padding: 39px 23px;
border-radius: 23px;
}
.questions-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
.questions-text {
font-size: 1rem;
}
}
/* Human-like Imperfections */
.benefit-item:nth-child(2) {
margin-top: 3px;
}
.cookie-type-card:nth-child(1) {
padding: 41px;
}
.cookie-type-card:nth-child(3) {
padding: 45px;
}
.control-option:nth-child(2) {
margin-left: 2px;
}
.browser-guide:nth-child(3) {
margin-top: -1px;
}
.type-examples {
gap: 8px 11px;
}
.example-tag:nth-child(2) {
margin-left: 1px;
}
.status-badge.optional {
padding: 6px 17px;
}
.browser-guide:nth-child(4) {
margin-right: -2px;
}
.questions-content {
margin-left: 1px;
}
/* Privacy Page Styles */
.privacy-territory {
padding: 104px 57px 87px;
background: linear-gradient(156deg, var(--misty-background) 0%, rgba(255,255,255,0.9) 55%, var(--neutral-light) 100%);
position: relative;
}
.privacy-territory::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
opacity: 0.6;
}
.privacy-content-flow {
max-width: 1240px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Introduction */
.privacy-intro-sphere {
text-align: center;
margin-bottom: 97px;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.privacy-main-headline {
font-family: 'Raleway', sans-serif;
font-size: 2.7rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 32px;
line-height: 1.2;
}
.privacy-intro-statement {
font-size: 1.2rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 34px;
opacity: 0.9;
}
.compliance-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 23px;
flex-wrap: wrap;
}
.compliance-badge {
background: var(--success-color);
color: white;
padding: 9px 21px;
border-radius: 17px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}
.update-timestamp {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
color: var(--charcoal-text);
padding: 9px 19px;
border-radius: 15px;
font-size: 0.9rem;
font-weight: 500;
opacity: 0.8;
}
/* Protection Principles */
.protection-principles-area {
margin-bottom: 83px;
}
.principles-title {
font-family: 'Raleway', sans-serif;
font-size: 2rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 59px;
}
.principles-showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 39px;
}
.principle-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(11px);
padding: 41px;
border-radius: 25px;
text-align: center;
box-shadow: 0 15px 43px rgba(7, 59, 76, 0.11);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.principle-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 67px rgba(7, 59, 76, 0.16);
}
.principle-card.transparency {
transform: rotate(0.5deg);
}
.principle-card.security {
transform: rotate(-0.4deg);
}
.principle-card:hover.transparency,
.principle-card:hover.security {
transform: translateY(-8px) rotate(0deg);
}
.principle-symbol {
width: 63px;
height: 63px;
margin: 0 auto 27px;
border-radius: 50%;
}
.transparency-symbol {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.minimization-symbol {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.security-symbol {
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}
.control-symbol {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.principle-name {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.principle-explanation {
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Data Collection */
.data-collection-section {
margin-bottom: 71px;
}
.collection-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 53px;
}
.collection-categories {
display: flex;
flex-direction: column;
gap: 33px;
}
.data-category {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(9px);
border-radius: 23px;
overflow: hidden;
box-shadow: 0 13px 37px rgba(7, 59, 76, 0.09);
transition: transform 0.3s ease;
}
.data-category:hover {
transform: translateX(7px);
}
.data-category.basic-info {
border-left: 4px solid var(--secondary-color);
}
.data-category.technical-info {
border-left: 4px solid var(--tertiary-color);
}
.data-category.communication-info {
border-left: 4px solid var(--success-color);
}
.category-header {
display: flex;
align-items: center;
gap: 21px;
padding: 31px 39px 19px;
}
.category-icon {
width: 47px;
height: 47px;
border-radius: 50%;
}
.basic-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.technical-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.communication-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.category-title {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--ocean-depth);
margin: 0;
}
.category-content {
padding: 0 39px 31px;
}
.data-items {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-bottom: 21px;
}
.data-item {
background: rgba(230, 235, 238, 0.7);
color: var(--charcoal-text);
padding: 7px 15px;
border-radius: 13px;
font-size: 0.85rem;
font-weight: 500;
}
.collection-purpose {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* User Rights */
.user-rights-territory {
margin-bottom: 67px;
}
.rights-headline {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 49px;
}
.rights-matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 29px;
}
.right-item {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(7px);
padding: 31px;
border-radius: 19px;
box-shadow: 0 9px 25px rgba(7, 59, 76, 0.08);
transition: all 0.3s ease;
border-top: 3px solid transparent;
}
.right-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 39px rgba(7, 59, 76, 0.12);
}
.access-right { border-top-color: var(--info-color); }
.correction-right { border-top-color: var(--secondary-color); }
.erasure-right { border-top-color: var(--accent-color); }
.portability-right { border-top-color: var(--tertiary-color); }
.objection-right { border-top-color: var(--success-color); }
.restriction-right { border-top-color: var(--neutral-color); }
.right-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 13px;
}
.right-description {
font-size: 0.95rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Security Measures */
.security-measures-zone {
margin-bottom: 61px;
}
.security-title {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 47px;
}
.security-elements {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
.security-measure {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 37px;
border-radius: 21px;
box-shadow: 0 11px 31px rgba(7, 59, 76, 0.09);
transition: transform 0.4s ease;
}
.security-measure:hover {
transform: translateY(-6px);
}
.measure-visual {
display: flex;
align-items: center;
gap: 19px;
margin-bottom: 19px;
}
.security-icon {
width: 51px;
height: 51px;
border-radius: 50%;
}
.encryption-icon {
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}
.access-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.backup-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.monitoring-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.measure-name {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--ocean-depth);
margin: 0;
}
.measure-detail {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Data Retention Timeline */
.retention-policy-area {
margin-bottom: 79px;
}
.retention-title {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 51px;
}
.retention-timeline {
position: relative;
max-width: 680px;
margin: 0 auto;
}
.retention-timeline::before {
content: '';
position: absolute;
left: 31px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--secondary-color), var(--neutral-color));
border-radius: 2px;
}
.timeline-item {
position: relative;
padding-left: 89px;
margin-bottom: 43px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-marker {
position: absolute;
left: 19px;
top: 8px;
width: 27px;
height: 27px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 3px 9px rgba(7, 59, 76, 0.2);
}
.active-marker {
background: var(--success-color);
}
.completion-marker {
background: var(--tertiary-color);
}
.deletion-marker {
background: var(--accent-color);
}
.timeline-content {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
padding: 25px;
border-radius: 17px;
box-shadow: 0 7px 21px rgba(7, 59, 76, 0.08);
}
.timeline-title {
font-family: 'Raleway', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 11px;
}
.timeline-description {
font-size: 0.95rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Privacy Commitment Banner */
.privacy-commitment-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 33px;
padding: 57px;
text-align: center;
position: relative;
overflow: hidden;
}
.privacy-commitment-banner::before {
content: '';
position: absolute;
top: -25%;
left: -20%;
width: 140%;
height: 150%;
background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 60%);
animation: pulse-gentle 8s ease-in-out infinite;
}
@keyframes pulse-gentle {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(180deg); }
}
.commitment-content {
position: relative;
z-index: 2;
}
.commitment-title {
font-family: 'Raleway', sans-serif;
font-size: 2rem;
font-weight: 600;
color: white;
margin-bottom: 23px;
}
.commitment-text {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 37px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.compliance-certifications {
display: flex;
justify-content: center;
gap: 19px;
flex-wrap: wrap;
}
.cert-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: white;
padding: 9px 19px;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.cert-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 1280px) {
.principles-showcase {
grid-template-columns: 1fr;
gap: 31px;
}
.rights-matrix {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.security-elements {
grid-template-columns: 1fr;
gap: 29px;
}
}
@media (max-width: 890px) {
.privacy-territory {
padding: 79px 42px 67px;
}
.privacy-main-headline {
font-size: 2.3rem;
}
.privacy-intro-statement {
font-size: 1.1rem;
}
.principle-card {
padding: 31px;
transform: rotate(0deg) !important;
}
.principle-card:hover {
transform: translateY(-8px) rotate(0deg) !important;
}
.rights-matrix {
grid-template-columns: 1fr;
gap: 23px;
}
.privacy-commitment-banner {
padding: 43px 31px;
}
.commitment-title {
font-size: 1.7rem;
}
}
@media (max-width: 640px) {
.privacy-territory {
padding: 63px 27px 53px;
}
.privacy-intro-sphere {
margin-bottom: 71px;
}
.privacy-main-headline {
font-size: 2rem;
margin-bottom: 25px;
}
.privacy-intro-statement {
font-size: 1.05rem;
margin-bottom: 27px;
}
.compliance-indicator {
flex-direction: column;
gap: 15px;
}
.protection-principles-area {
margin-bottom: 67px;
}
.principles-title {
font-size: 1.7rem;
margin-bottom: 43px;
}
.principle-card {
padding: 25px;
}
.principle-symbol {
width: 51px;
height: 51px;
margin-bottom: 21px;
}
.principle-name {
font-size: 1.15rem;
margin-bottom: 15px;
}
.data-collection-section {
margin-bottom: 57px;
}
.collection-heading {
font-size: 1.6rem;
margin-bottom: 39px;
}
.collection-categories {
gap: 27px;
}
.category-header {
padding: 25px 23px 15px;
gap: 17px;
}
.category-icon {
width: 39px;
height: 39px;
}
.category-title {
font-size: 1.1rem;
}
.category-content {
padding: 0 23px 25px;
}
.data-items {
gap: 9px;
margin-bottom: 17px;
}
.data-item {
padding: 6px 12px;
font-size: 0.8rem;
}
.collection-purpose {
font-size: 0.93rem;
}
.user-rights-territory {
margin-bottom: 53px;
}
.rights-headline {
font-size: 1.6rem;
margin-bottom: 37px;
}
.right-item {
padding: 25px;
}
.right-title {
font-size: 1.05rem;
margin-bottom: 11px;
}
.right-description {
font-size: 0.9rem;
}
.security-measures-zone {
margin-bottom: 49px;
}
.security-title {
font-size: 1.6rem;
margin-bottom: 35px;
}
.security-measure {
padding: 27px;
}
.measure-visual {
gap: 15px;
margin-bottom: 17px;
}
.security-icon {
width: 43px;
height: 43px;
}
.measure-name {
font-size: 1.1rem;
}
.measure-detail {
font-size: 0.93rem;
}
.retention-policy-area {
margin-bottom: 63px;
}
.retention-title {
font-size: 1.6rem;
margin-bottom: 39px;
}
.retention-timeline::before {
left: 23px;
}
.timeline-item {
padding-left: 67px;
margin-bottom: 33px;
}
.timeline-marker {
left: 11px;
width: 23px;
height: 23px;
}
.timeline-content {
padding: 19px;
}
.timeline-title {
font-size: 1.05rem;
margin-bottom: 9px;
}
.timeline-description {
font-size: 0.9rem;
}
.privacy-commitment-banner {
padding: 37px 21px;
border-radius: 25px;
}
.commitment-title {
font-size: 1.5rem;
margin-bottom: 19px;
}
.commitment-text {
font-size: 1.05rem;
margin-bottom: 31px;
}
.compliance-certifications {
gap: 13px;
}
.cert-badge {
padding: 7px 15px;
font-size: 0.8rem;
}
}
/* Human-like Imperfections */
.principle-card:nth-child(2) {
margin-top: 4px;
}
.data-category:nth-child(2) {
margin-left: 2px;
}
.right-item:nth-child(3) {
padding: 29px;
}
.right-item:nth-child(5) {
padding: 33px;
}
.security-measure:nth-child(1) {
margin-right: -1px;
}
.timeline-item:nth-child(2) {
margin-left: 3px;
}
.cert-badge:nth-child(2) {
margin-top: 1px;
}
/* Thank You Page Styles */
.thankyou-universe {
padding: 89px 57px 79px;
background: linear-gradient(162deg, var(--misty-background) 0%, rgba(255,255,255,0.95) 50%, var(--neutral-light) 100%);
position: relative;
min-height: 70vh;
}
.thankyou-universe::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.thankyou-content-wrapper {
max-width: 1080px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Success Announcement */
.success-announcement-area {
text-align: center;
margin-bottom: 97px;
}
.success-visual-element {
margin-bottom: 43px;
}
/* Animated Checkmark */
.checkmark-animation {
display: inline-block;
animation: checkmark-appear 0.8s ease-in-out;
}
@keyframes checkmark-appear {
0% { transform: scale(0) rotate(-45deg); opacity: 0; }
50% { transform: scale(1.2) rotate(-45deg); opacity: 0.8; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.checkmark-circle {
width: 89px;
height: 89px;
border-radius: 50%;
background: linear-gradient(135deg, var(--success-color), #58d68d);
position: relative;
margin: 0 auto;
box-shadow: 0 13px 34px rgba(39, 174, 96, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.checkmark-circle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--success-color), #58d68d);
animation: pulse-success 2s ease-in-out infinite;
}
@keyframes pulse-success {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.checkmark-stem,
.checkmark-kick {
position: absolute;
background: white;
border-radius: 3px;
}
.checkmark-stem {
width: 3px;
height: 19px;
top: 35px;
left: 43px;
transform: rotate(45deg);
animation: checkmark-stem 0.3s ease-in-out 0.5s both;
}
.checkmark-kick {
width: 3px;
height: 11px;
top: 47px;
left: 35px;
transform: rotate(-45deg);
animation: checkmark-kick 0.3s ease-in-out 0.7s both;
}
@keyframes checkmark-stem {
0% { height: 0; }
100% { height: 19px; }
}
@keyframes checkmark-kick {
0% { height: 0; }
100% { height: 11px; }
}
.thankyou-main-title {
font-family: 'Raleway', sans-serif;
font-size: 2.4rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 27px;
line-height: 1.2;
}
.thankyou-main-message {
font-size: 1.15rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 39px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
.confirmation-details {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 23px 31px;
border-radius: 19px;
display: inline-block;
box-shadow: 0 9px 23px rgba(7, 59, 76, 0.08);
}
.detail-item {
display: flex;
gap: 13px;
margin-bottom: 7px;
align-items: center;
}
.detail-item:last-child {
margin-bottom: 0;
}
.detail-label {
font-size: 0.9rem;
color: var(--charcoal-text);
opacity: 0.7;
font-weight: 500;
}
.detail-value {
font-size: 0.9rem;
color: var(--ocean-depth);
font-weight: 600;
}
/* Next Steps Timeline */
.next-steps-territory {
margin-bottom: 79px;
}
.steps-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 47px;
}
.steps-timeline {
display: flex;
justify-content: space-between;
position: relative;
max-width: 780px;
margin: 0 auto;
}
.steps-timeline::before {
content: '';
position: absolute;
top: 23px;
left: 47px;
right: 47px;
height: 3px;
background: linear-gradient(to right, var(--success-color), var(--secondary-color), var(--tertiary-color));
border-radius: 2px;
z-index: 1;
}
.step-item {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}
.step-number {
width: 47px;
height: 47px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: white;
margin: 0 auto 21px;
box-shadow: 0 7px 19px rgba(0, 0, 0, 0.15);
}
.step-item.immediate .step-number {
background: var(--success-color);
}
.step-item.review .step-number {
background: var(--secondary-color);
}
.step-item.contact .step-number {
background: var(--tertiary-color);
}
.step-content {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
padding: 23px;
border-radius: 17px;
box-shadow: 0 7px 19px rgba(7, 59, 76, 0.08);
}
.step-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 11px;
}
.step-description {
font-size: 0.9rem;
line-height: 1.5;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Waiting Suggestions */
.waiting-suggestions-area {
margin-bottom: 71px;
}
.suggestions-title {
font-family: 'Raleway', sans-serif;
font-size: 1.7rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 43px;
}
.suggestion-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 33px;
}
.suggestion-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(11px);
padding: 35px;
border-radius: 23px;
text-align: center;
box-shadow: 0 11px 29px rgba(7, 59, 76, 0.09);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.suggestion-card:hover {
transform: translateY(-7px);
box-shadow: 0 19px 47px rgba(7, 59, 76, 0.14);
}
.suggestion-card.explore {
transform: rotate(0.4deg);
}
.suggestion-card.prepare {
transform: rotate(-0.3deg);
}
.suggestion-card:hover.explore,
.suggestion-card:hover.prepare {
transform: translateY(-7px) rotate(0deg);
}
.suggestion-icon {
width: 59px;
height: 59px;
border-radius: 50%;
margin: 0 auto 21px;
}
.explore-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.learn-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.prepare-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.suggestion-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 15px;
}
.suggestion-text {
font-size: 0.95rem;
line-height: 1.5;
color: var(--charcoal-text);
margin-bottom: 21px;
opacity: 0.9;
}
.suggestion-link {
display: inline-block;
color: var(--ocean-depth);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
padding: 9px 19px;
border: 2px solid var(--ocean-depth);
border-radius: 17px;
transition: all 0.3s ease;
}
.suggestion-link:hover {
background: var(--ocean-depth);
color: white;
transform: scale(1.05);
}
.suggestion-link.disabled {
color: var(--neutral-color);
border-color: var(--neutral-color);
cursor: default;
opacity: 0.6;
}
.suggestion-link.disabled:hover {
background: transparent;
color: var(--neutral-color);
transform: none;
}
/* Quick Navigation */
.quick-navigation-section {
margin-bottom: 67px;
}
.navigation-title {
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 37px;
}
.navigation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.nav-tile {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(9px);
padding: 27px;
border-radius: 19px;
text-align: center;
text-decoration: none;
color: var(--charcoal-text);
box-shadow: 0 7px 19px rgba(7, 59, 76, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 13px;
}
.nav-tile:hover {
transform: translateY(-5px);
box-shadow: 0 13px 31px rgba(7, 59, 76, 0.12);
color: var(--ocean-depth);
}
.tile-icon {
width: 43px;
height: 43px;
border-radius: 50%;
}
.home-icon {
background: linear-gradient(135deg, var(--ocean-depth), var(--charcoal-text));
}
.services-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.about-icon {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.contact-icon {
background: linear-gradient(135deg, var(--success-color), #58d68d);
}
.tile-label {
font-size: 0.9rem;
font-weight: 500;
}
/* Appreciation Banner */
.appreciation-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 29px;
padding: 47px;
text-align: center;
position: relative;
overflow: hidden;
}
.appreciation-banner::before {
content: '';
position: absolute;
top: -30%;
right: -25%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
border-radius: 50%;
animation: gratitude-float 8s ease-in-out infinite;
}
@keyframes gratitude-float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-15px, -20px) rotate(180deg); }
}
.appreciation-content {
position: relative;
z-index: 2;
}
.appreciation-title {
font-family: 'Raleway', sans-serif;
font-size: 1.7rem;
font-weight: 600;
color: white;
margin-bottom: 19px;
}
.appreciation-text {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 29px;
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.appreciation-signature {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 19px;
}
.signature-text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
font-style: italic;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 1280px) {
.suggestion-cards {
grid-template-columns: 1fr;
gap: 27px;
}
.navigation-grid {
grid-template-columns: repeat(2, 1fr);
gap: 21px;
}
.steps-timeline {
flex-direction: column;
gap: 31px;
}
.steps-timeline::before {
display: none;
}
}
@media (max-width: 890px) {
.thankyou-universe {
padding: 67px 42px 59px;
}
.thankyou-main-title {
font-size: 2rem;
}
.thankyou-main-message {
font-size: 1.05rem;
}
.suggestion-card {
padding: 27px;
transform: rotate(0deg) !important;
}
.suggestion-card:hover {
transform: translateY(-7px) rotate(0deg) !important;
}
.navigation-grid {
grid-template-columns: 1fr;
gap: 19px;
}
}
@media (max-width: 640px) {
.thankyou-universe {
padding: 53px 27px 47px;
}
.success-announcement-area {
margin-bottom: 71px;
}
.checkmark-circle {
width: 71px;
height: 71px;
}
.checkmark-stem {
height: 15px;
top: 28px;
left: 34px;
}
.checkmark-kick {
height: 9px;
top: 37px;
left: 28px;
}
.thankyou-main-title {
font-size: 1.7rem;
margin-bottom: 21px;
}
.thankyou-main-message {
font-size: 1rem;
margin-bottom: 31px;
}
.confirmation-details {
padding: 19px 23px;
}
.next-steps-territory {
margin-bottom: 59px;
}
.steps-heading {
font-size: 1.5rem;
margin-bottom: 35px;
}
.step-number {
width: 39px;
height: 39px;
font-size: 1.05rem;
margin-bottom: 17px;
}
.step-content {
padding: 19px;
}
.step-title {
font-size: 1.05rem;
margin-bottom: 9px;
}
.step-description {
font-size: 0.85rem;
}
.waiting-suggestions-area {
margin-bottom: 57px;
}
.suggestions-title {
font-size: 1.4rem;
margin-bottom: 33px;
}
.suggestion-card {
padding: 21px;
}
.suggestion-icon {
width: 47px;
height: 47px;
margin-bottom: 17px;
}
.suggestion-heading {
font-size: 1.1rem;
margin-bottom: 13px;
}
.suggestion-text {
font-size: 0.9rem;
margin-bottom: 17px;
}
.quick-navigation-section {
margin-bottom: 53px;
}
.navigation-title {
font-size: 1.3rem;
margin-bottom: 29px;
}
.nav-tile {
padding: 21px;
gap: 11px;
}
.tile-icon {
width: 35px;
height: 35px;
}
.tile-label {
font-size: 0.85rem;
}
.appreciation-banner {
padding: 35px 21px;
border-radius: 21px;
}
.appreciation-title {
font-size: 1.4rem;
margin-bottom: 15px;
}
.appreciation-text {
font-size: 1rem;
margin-bottom: 23px;
}
.appreciation-signature {
padding-top: 15px;
}
.signature-text {
font-size: 0.9rem;
}
}
/* Human-like Imperfections */
.step-item:nth-child(2) {
margin-top: 3px;
}
.suggestion-card:nth-child(1) {
padding: 33px;
}
.suggestion-card:nth-child(3) {
padding: 37px;
}
.nav-tile:nth-child(2) {
margin-left: 1px;
}
.nav-tile:nth-child(4) {
margin-right: -2px;
}
.detail-item:nth-child(1) {
margin-bottom: 9px;
}
.checkmark-circle {
margin-left: 2px;
}
/* Terms and Conditions Page Styles */
.terms-environment {
padding: 101px 57px 83px;
background: linear-gradient(151deg, var(--misty-background) 0%, rgba(255,255,255,0.85) 50%, var(--neutral-light) 100%);
position: relative;
}
.terms-environment::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
opacity: 0.5;
}
.terms-content-container {
max-width: 1120px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Introduction */
.terms-intro-area {
text-align: center;
margin-bottom: 89px;
max-width: 740px;
margin-left: auto;
margin-right: auto;
}
.terms-main-heading {
font-family: 'Raleway', sans-serif;
font-size: 2.6rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 29px;
line-height: 1.2;
}
.terms-intro-description {
font-size: 1.15rem;
color: var(--charcoal-text);
line-height: 1.6;
margin-bottom: 31px;
opacity: 0.9;
}
.effective-date-info {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(9px);
padding: 15px 29px;
border-radius: 19px;
display: inline-flex;
align-items: center;
gap: 13px;
box-shadow: 0 9px 21px rgba(7, 59, 76, 0.08);
}
.date-label {
font-size: 0.9rem;
color: var(--charcoal-text);
opacity: 0.7;
font-weight: 500;
}
.date-value {
font-size: 0.9rem;
font-weight: 600;
color: var(--ocean-depth);
}
/* Key Principles Framework */
.principles-framework {
margin-bottom: 73px;
}
.framework-title {
font-family: 'Raleway', sans-serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--ocean-depth);
text-align: center;
margin-bottom: 51px;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 37px;
}
.principle-block {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 37px;
border-radius: 23px;
text-align: center;
box-shadow: 0 13px 35px rgba(7, 59, 76, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-top: 4px solid transparent;
}
.principle-block:hover {
transform: translateY(-8px);
box-shadow: 0 21px 53px rgba(7, 59, 76, 0.15);
}
.principle-block.educational {
border-top-color: var(--info-color);
transform: rotate(0.5deg);
}
.principle-block.advisory {
border-top-color: var(--secondary-color);
}
.principle-block.responsibility {
border-top-color: var(--accent-color);
transform: rotate(-0.4deg);
}
.principle-block:hover.educational,
.principle-block:hover.responsibility {
transform: translateY(-8px) rotate(0deg);
}
.principle-indicator {
width: 57px;
height: 57px;
border-radius: 50%;
margin: 0 auto 23px;
}
.educational-indicator {
background: linear-gradient(135deg, var(--info-color), #85c1e9);
}
.advisory-indicator {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.responsibility-indicator {
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}
.principle-heading {
font-family: 'Raleway', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 17px;
}
.principle-text {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Terms Sections */
.terms-sections-area {
display: flex;
flex-direction: column;
gap: 47px;
margin-bottom: 67px;
}
.terms-section {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(11px);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 15px 41px rgba(7, 59, 76, 0.09);
transition: transform 0.3s ease;
}
.terms-section:hover {
transform: translateY(-5px);
}
.section-title {
background: var(--ocean-depth);
color: white;
font-family: 'Raleway', sans-serif;
font-size: 1.4rem;
font-weight: 600;
padding: 23px 39px;
margin: 0;
}
.section-content {
padding: 37px 39px;
}
/* Service Provision Section */
.content-point {
margin-bottom: 29px;
}
.content-point:last-child {
margin-bottom: 0;
}
.point-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 11px;
}
.point-description {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Limitations Section */
.disclaimer-block {
display: flex;
gap: 21px;
margin-bottom: 31px;
padding: 25px;
background: rgba(230, 235, 238, 0.4);
border-radius: 17px;
border-left: 4px solid transparent;
}
.disclaimer-block:last-child {
margin-bottom: 0;
}
.primary-disclaimer {
border-left-color: var(--accent-color);
}
.consultation-disclaimer {
border-left-color: var(--tertiary-color);
}
.results-disclaimer {
border-left-color: var(--secondary-color);
}
.disclaimer-icon {
width: 43px;
height: 43px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 3px;
}
.warning-icon {
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
}
.advice-icon {
background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-light));
}
.results-icon {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
}
.disclaimer-content {
flex: 1;
}
.disclaimer-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 9px;
}
.disclaimer-text {
font-size: 0.95rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Client Obligations */
.obligation-list {
display: flex;
flex-direction: column;
gap: 19px;
}
.obligation-item {
display: flex;
align-items: flex-start;
gap: 17px;
}
.obligation-marker {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ocean-depth);
margin-top: 8px;
flex-shrink: 0;
}
.obligation-text {
font-size: 0.98rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Intellectual Property */
.property-blocks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 31px;
}
.property-block {
background: rgba(230, 235, 238, 0.5);
padding: 27px;
border-radius: 17px;
border-top: 3px solid var(--ocean-depth);
}
.property-title {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ocean-depth);
margin-bottom: 13px;
}
.property-description {
font-size: 0.95rem;
line-height: 1.6;
color: var(--charcoal-text);
margin: 0;
opacity: 0.9;
}
/* Important Notice Banner */
.important-notice-banner {
background: linear-gradient(135deg, var(--ocean-depth) 0%, var(--charcoal-text) 100%);
border-radius: 27px;
padding: 51px;
text-align: center;
position: relative;
overflow: hidden;
}
.important-notice-banner::before {
content: '';
position: absolute;
top: -20%;
left: -15%;
width: 130%;
height: 140%;
background: radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 60%);
animation: notice-pulse 6s ease-in-out infinite;
}
@keyframes notice-pulse {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.05) rotate(180deg); }
}
.notice-content {
position: relative;
z-index: 2;
}
.notice-title {
font-family: 'Raleway', sans-serif;
font-size: 1.7rem;
font-weight: 600;
color: white;
margin-bottom: 21px;
}
.notice-text {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 27px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.notice-highlight {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 15px 27px;
border-radius: 17px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
}
.highlight-text {
color: white;
font-size: 0.9rem;
font-weight: 600;
font-style: italic;
}
/* Responsive Design */
@media (max-width: 1280px) {
.principles-grid {
grid-template-columns: 1fr;
gap: 29px;
}
.property-blocks {
grid-template-columns: 1fr;
gap: 23px;
}
}
@media (max-width: 890px) {
.terms-environment {
padding: 76px 42px 63px;
}
.terms-main-heading {
font-size: 2.2rem;
}
.terms-intro-description {
font-size: 1.05rem;
}
.principle-block {
padding: 29px;
transform: rotate(0deg) !important;
}
.principle-block:hover {
transform: translateY(-8px) rotate(0deg) !important;
}
.section-title {
padding: 19px 27px;
font-size: 1.25rem;
}
.section-content {
padding: 29px 27px;
}
.disclaimer-block {
flex-direction: column;
gap: 15px;
padding: 21px;
}
.disclaimer-icon {
align-self: flex-start;
margin-top: 0;
}
}
@media (max-width: 640px) {
.terms-environment {
padding: 61px 27px 51px;
}
.terms-intro-area {
margin-bottom: 67px;
}
.terms-main-heading {
font-size: 1.9rem;
margin-bottom: 23px;
}
.terms-intro-description {
font-size: 1rem;
margin-bottom: 25px;
}
.effective-date-info {
padding: 13px 23px;
gap: 11px;
}
.principles-framework {
margin-bottom: 57px;
}
.framework-title {
font-size: 1.6rem;
margin-bottom: 37px;
}
.principle-block {
padding: 23px;
}
.principle-indicator {
width: 47px;
height: 47px;
margin-bottom: 19px;
}
.principle-heading {
font-size: 1.1rem;
margin-bottom: 15px;
}
.principle-text {
font-size: 0.93rem;
}
.terms-sections-area {
gap: 35px;
margin-bottom: 53px;
}
.section-title {
padding: 17px 21px;
font-size: 1.15rem;
}
.section-content {
padding: 23px 21px;
}
.content-point {
margin-bottom: 23px;
}
.point-title {
font-size: 1.05rem;
margin-bottom: 9px;
}
.point-description {
font-size: 0.93rem;
}
.disclaimer-block {
padding: 17px;
gap: 13px;
}
.disclaimer-icon {
width: 35px;
height: 35px;
}
.disclaimer-title {
font-size: 1.05rem;
margin-bottom: 7px;
}
.disclaimer-text {
font-size: 0.9rem;
}
.obligation-list {
gap: 15px;
}
.obligation-item {
gap: 13px;
}
.obligation-marker {
width: 6px;
height: 6px;
margin-top: 6px;
}
.obligation-text {
font-size: 0.93rem;
}
.property-block {
padding: 21px;
}
.property-title {
font-size: 1.05rem;
margin-bottom: 11px;
}
.property-description {
font-size: 0.9rem;
}
.important-notice-banner {
padding: 37px 21px;
border-radius: 21px;
}
.notice-title {
font-size: 1.4rem;
margin-bottom: 17px;
}
.notice-text {
font-size: 1rem;
margin-bottom: 21px;
}
.notice-highlight {
padding: 13px 21px;
}
.highlight-text {
font-size: 0.85rem;
}
}
/* Human-like Imperfections */
.principle-block:nth-child(2) {
margin-top: 4px;
}
.terms-section:nth-child(1) {
margin-left: 1px;
}
.terms-section:nth-child(3) {
margin-right: -2px;
}
.disclaimer-block:nth-child(2) {
padding: 23px;
}
.content-point:nth-child(1) {
margin-bottom: 31px;
}
.property-block:nth-child(1) {
padding: 25px;
}
.obligation-item:nth-child(3) {
margin-left: 2px;
}
.effective-date-info {
margin-left: 1px;
}