/* =====================================================
 Hoays Landing Page Styles
 Extracted from index.php inline CSS
 NOTE:Element-level resets removed - Tailwind v4 preflight handles them.
 ===================================================== */
 
:root{
 --primary:#0f172a;
 --primary-light:#1e293b;
 --accent:#f59e0b;
 --accent-dark:#d97706;
 --accent-light:#fef3c7;
 --blue:#0ea5e9;
 --success:#10b981;
 --danger:#ef4444;
 --white:#ffffff;
 --gray-50:#f8fafc;
 --gray-100:#f1f5f9;
 --gray-200:#e2e8f0;
 --gray-300:#cbd5e1;
 --gray-400:#6b7280;
 --gray-500:#64748b;
 --gray-600:#475569;
 --gray-700:#334155;
}
 
 /* Element-level resets (*, html, body, a) removed:Tailwind v4 preflight
 handles these in @layer base. Keeping them as unlayered CSS would override
 ALL Tailwind utility classes due to CSS cascade layer rules. */
 .container{max-width:1200px;margin:0 auto;padding:0 20px}
 
 /* Header */
 .header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-100)}
 .header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
 .logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--primary)}
 .logo-icon{width:38px;height:38px;background:linear-gradient(135deg, #f59e0b, #d97706);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--primary)}
 .nav{display:flex;gap:28px}
 .nav a{font-size:14px;font-weight:500;color:var(--gray-600);transition:0.2s}
 .nav a:hover{color:var(--accent-dark)}
 .header-actions{display:flex;align-items:center;gap:12px}
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:0.2s}
 .btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:var(--primary)}
 .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,182,212,0.3)}
 .btn-outline{background:transparent;border:1.5px solid var(--gray-200);color:var(--gray-700)}
 .btn-outline:hover{border-color:var(--accent);color:var(--accent-dark)}
 .btn-ghost{background:transparent;color:var(--gray-600)}
 .btn-white{background:var(--white);color:var(--primary)}
 .btn-lg{padding:14px 28px;font-size:15px}
 .btn-sm{padding:8px 16px;font-size:13px}
 
 /* Hero Section */
 .hero{
 background:linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #0c4a6e 70%, #0369a1 100%);
 padding:80px 0 160px;
 position:relative;
 overflow:hidden;
}
 .hero::before{
 content:'';
 position:absolute;
 top:0;left:0;right:0;bottom:0;
 background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 opacity:0.5;
}
 .hero::after{
 content:'';
 position:absolute;
 top:-50%;right:-20%;
 width:80%;height:200%;
 background:radial-gradient(ellipse, rgba(251,191,36,0.15) 0%, transparent 60%);
 pointer-events:none;
 animation:heroGlow 4s ease-in-out infinite;
}
 @keyframes heroGlow{
 0%, 100%{transform:translate(0, 0) scale(1);opacity:0.8}
 50%{transform:translate(-20px, 10px) scale(1.1);opacity:1}
}
 
 /* Hero particles effect */
 .hero .container{
 position:relative;
}
 .hero .container::before,
 .hero .container::after{
 content:'✦';
 position:absolute;
 font-size:12px;
 color:rgba(251,191,36,0.4);
 animation:sparkle 3s ease-in-out infinite;
 pointer-events:none;
}
 .hero .container::before{
 top:20%;
 right:15%;
 animation-delay:0s;
}
 .hero .container::after{
 bottom:30%;
 left:10%;
 animation-delay:1.5s;
}
 @keyframes sparkle{
 0%, 100%{opacity:0;transform:scale(0.5) rotate(0deg)}
 50%{opacity:1;transform:scale(1.2) rotate(180deg)}
}
 
 /* Hero Animated Background Elements */
 .hero-bg-elements{
 position:absolute;
 inset:0;
 overflow:hidden;
 pointer-events:none;
 z-index:0;
}
 .hero-orb{
 position:absolute;
 border-radius:50%;
 filter:blur(80px);
}
 .hero-orb-1{
 width:500px;
 height:500px;
 background:radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
 top:-15%;
 right:5%;
 animation:orbFloat1 8s ease-in-out infinite;
}
 .hero-orb-2{
 width:400px;
 height:400px;
 background:radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, transparent 70%);
 bottom:-10%;
 left:0%;
 animation:orbFloat2 10s ease-in-out infinite;
}
 .hero-orb-3{
 width:300px;
 height:300px;
 background:radial-gradient(circle, rgba(244, 63, 94, 0.35) 0%, transparent 70%);
 top:30%;
 left:25%;
 animation:orbFloat3 12s ease-in-out infinite;
}
 @keyframes orbFloat1{
 0%, 100%{transform:translate(0, 0) scale(1)}
 33%{transform:translate(30px, 20px) scale(1.1)}
 66%{transform:translate(-20px, -10px) scale(0.95)}
}
 @keyframes orbFloat2{
 0%, 100%{transform:translate(0, 0) scale(1)}
 33%{transform:translate(-25px, -15px) scale(1.05)}
 66%{transform:translate(15px, 25px) scale(0.9)}
}
 @keyframes orbFloat3{
 0%, 100%{transform:translate(0, 0) scale(1)}
 50%{transform:translate(40px, -30px) scale(1.15)}
}
 .hero-shape{
 position:absolute;
 opacity:0.15;
 color:rgba(255, 255, 255, 0.6);
}
 .hero-shape svg{
 width:100%;
 height:100%;
}
 .hero-shape-1{
 width:120px;
 height:120px;
 top:15%;
 left:8%;
 animation:shapeRotate1 20s linear infinite;
}
 .hero-shape-2{
 width:80px;
 height:80px;
 bottom:20%;
 right:15%;
 animation:shapeRotate2 25s linear infinite reverse;
}
 .hero-shape-3{
 width:100px;
 height:100px;
 top:60%;
 right:30%;
 animation:shapeRotate3 30s linear infinite;
}
 @keyframes shapeRotate1{
 from{transform:rotate(0deg) translateY(0)}
 to{transform:rotate(360deg) translateY(0)}
}
 @keyframes shapeRotate2{
 from{transform:rotate(0deg) scale(1)}
 to{transform:rotate(-360deg) scale(1)}
}
 @keyframes shapeRotate3{
 0%{transform:rotate(0deg) translateX(0)}
 50%{transform:rotate(180deg) translateX(20px)}
 100%{transform:rotate(360deg) translateX(0)}
}
 .hero-grid-pattern{
 position:absolute;
 inset:0;
 background-image:
 linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
 background-size:50px 50px;
 animation:gridMove 20s linear infinite;
}
 @keyframes gridMove{
 0%{transform:translate(0, 0)}
 100%{transform:translate(50px, 50px)}
}
 
 /* Hide animated elements on mobile for performance */
 @media (max-width:768px){
 .hero-bg-elements{display:none}
}
 
 .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
 .hero-content{position:relative;z-index:2}
 .hero-subtitle{font-size:16px;color:rgba(255,255,255,0.8);margin-bottom:16px;font-weight:500}
 .hero-title{font-size:48px;font-weight:800;line-height:1.2;margin-bottom:16px;color:var(--white)}
 .hero-title span{color:#fbbf24;text-shadow:0 0 40px rgba(251,191,36,0.4)}
 .hero-desc{font-size:22px;font-weight:600;color:var(--white);margin-bottom:24px}
 .hero-highlight{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
 border:1px solid rgba(255,255,255,0.3);
 padding:10px 20px;border-radius:50px;
 font-size:14px;font-weight:600;color:var(--white);margin-bottom:24px;
}
 .hero-highlight svg{color:#fbbf24}
 .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
 .hero-buttons .btn{padding:16px 32px;font-size:15px;border-radius:8px}
 .btn-orange{background:linear-gradient(135deg, #f59e0b, #d97706);color:var(--primary)}
 .btn-orange:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,0.4)}
 .btn-white-solid{background:var(--white);color:var(--primary);font-weight:700}
 .btn-white-solid:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,255,255,0.3)}
 .btn-glass{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);color:var(--white)}
 .btn-glass:hover{background:rgba(255,255,255,0.25)}
 
 /* Hero Visual */
 .hero-visual{position:relative;z-index:1;display:flex;justify-content:flex-end}
 .hero-image-area{position:relative;width:100%}
 
 /* Hero Device Mockups */
 .hero-devices{
 position:relative;
}
 
 /* Laptop */
 .device-laptop{
 position:relative;
 width:100%;
 animation:deviceSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
 transform-style:preserve-3d;
 will-change:transform;
 transition:transform 0.15s ease-out;
}
 .laptop-screen{
 background:#1a1a2e;
 border-radius:12px 12px 0 0;
 border:2px solid #2a2a3e;
 border-bottom:none;
 overflow:hidden;
 box-shadow:0 25px 60px rgba(0,0,0,0.4);
 font-size:0;
 line-height:0;
 margin-bottom:-5px;
}
 .laptop-topbar{
 display:flex;
 align-items:center;
 gap:6px;
 padding:8px 12px;
 background:#12121f;
 border-bottom:1px solid #2a2a3e;
 font-size:14px;
 line-height:normal;
}
 .topbar-dot{
 width:8px;
 height:8px;
 border-radius:50%;
 background:#ff5f57;
}
 .topbar-dot:nth-child(2){background:#ffbd2e}
 .topbar-dot:nth-child(3){background:#28c840}
 .topbar-url{
 margin-left:12px;
 font-size:11px;
 color:rgba(255,255,255,0.4);
 font-family:monospace;
 background:rgba(255,255,255,0.06);
 padding:3px 10px;
 border-radius:4px;
 transition:color 0.3s ease;
}
 .laptop-display{
 position:relative;
 overflow:hidden;
 background:#0f0f1a;
 aspect-ratio:16 / 10;
}
 .laptop-display .screen-img{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 object-fit:contain;
 -webkit-user-select:none;
 user-select:none;
 -webkit-user-drag:none;
 opacity:0;
 transition:opacity 0.5s ease;
 pointer-events:none;
}
 .laptop-display .screen-img.active{
 opacity:1;
 pointer-events:auto;
}
 .laptop-base{
 height:14px;
 background:linear-gradient(to bottom, #2a2a3e, #1f1f30);
 border-radius:0 0 4px 4px;
 position:relative;
 box-shadow:0 4px 15px rgba(0,0,0,0.3);
}
 .laptop-base::after{
 content:'';
 position:absolute;
 bottom:-6px;
 left:50%;
 transform:translateX(-50%);
 width:40%;
 height:6px;
 background:linear-gradient(to bottom, #252535, #1a1a28);
 border-radius:0 0 8px 8px;
}
 .laptop-notch{
 width:60px;
 height:4px;
 background:rgba(255,255,255,0.08);
 border-radius:2px;
 margin:5px auto 0;
}
 
 /* Thumbnails */
 .screen-thumbs{
 display:flex;
 justify-content:center;
 gap:12px;
 margin-top:16px;
 animation:deviceSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
 .screen-thumb{
 width:120px;
 cursor:pointer;
 border-radius:8px;
 overflow:hidden;
 border:2px solid rgba(255,255,255,0.15);
 background:rgba(255,255,255,0.05);
 transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 opacity:0.6;
}
 .screen-thumb img{
 width:100%;
 display:block;
 -webkit-user-select:none;
 user-select:none;
 -webkit-user-drag:none;
}
 .screen-thumb span{
 display:block;
 text-align:center;
 font-size:11px;
 font-weight:600;
 color:rgba(255,255,255,0.6);
 padding:5px 0;
 transition:color 0.3s ease;
}
 .screen-thumb:hover{
 opacity:0.9;
 border-color:rgba(255,255,255,0.3);
 transform:translateY(-2px);
}
 .screen-thumb.active{
 opacity:1;
 border-color:#fbbf24;
 box-shadow:0 0 20px rgba(251,191,36,0.3);
}
 .screen-thumb.active span{
 color:#fbbf24;
}
 
 /* Device animations */
 @keyframes deviceSlideUp{
 from{opacity:0;transform:translateY(50px) scale(0.92)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
 
 @media (max-width:768px){
 .laptop-topbar{padding:5px 8px}
 .topbar-dot{width:6px;height:6px}
 .topbar-url{font-size:9px}
 .laptop-screen{border-radius:8px 8px 0 0}
 .laptop-base{height:10px}
 .screen-thumbs{gap:8px;margin-top:10px}
 .screen-thumb{width:90px}
 .screen-thumb span{font-size:9px}
}
 
 /* Integration Logos - Horizontal Bar */
 .integration-logos{
 padding:28px 0;
 background:var(--white);
 border-bottom:1px solid var(--gray-100);
}
 .integration-logos-label{
 text-align:center;
 font-size:11px;
 font-weight:600;
 color:var(--gray-500);
 text-transform:uppercase;
 letter-spacing:1.5px;
 margin-bottom:20px;
}
 /* Scroll wrapper for mobile marquee */
 .integration-logos-scroll{
 overflow:hidden;
 position:relative;
 width:100%;
 max-width:100vw;
 -webkit-overflow-scrolling:touch;
}
 /* Desktop:hide duplicate items (compound selector beats .logo-item) */
 .logo-item.logo-dup{display:none}
 
 .integration-logos-track{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 flex-wrap:nowrap;
}
 
 .logo-item{
 display:inline-flex;
 align-items:center;
 gap:6px;
 padding:8px 12px;
 background:var(--gray-50);
 border:1px solid var(--gray-100);
 border-radius:50px;
 font-weight:700;
 font-size:12px;
 transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 cursor:default;
 white-space:nowrap;
 opacity:0;
 animation:logoFadeIn 0.4s ease forwards;
}
 .logo-item:nth-child(1){animation-delay:0.05s}
 .logo-item:nth-child(2){animation-delay:0.1s}
 .logo-item:nth-child(3){animation-delay:0.15s}
 .logo-item:nth-child(4){animation-delay:0.2s}
 .logo-item:nth-child(6){animation-delay:0.25s}
 .logo-item:nth-child(7){animation-delay:0.3s}
 .logo-item:nth-child(9){animation-delay:0.35s}
 .logo-item:nth-child(10){animation-delay:0.4s}
 .logo-item:nth-child(11){animation-delay:0.45s}
 
 @keyframes logoFadeIn{
 from{opacity:0;transform:scale(0.8)}
 to{opacity:1;transform:scale(1)}
}
 
 .logo-dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:currentColor;
 flex-shrink:0;
 transition:transform 0.3s ease;
}
 .logo-text{
 color:var(--gray-700);
 transition:color 0.3s ease;
}
 .logo-item:hover{
 transform:translateY(-3px) scale(1.05);
 box-shadow:0 8px 20px rgba(0,0,0,0.1);
 border-color:currentColor;
}
 .logo-item:hover .logo-dot{
 transform:scale(1.3);
 box-shadow:0 0 12px currentColor;
}
 .logo-item:hover .logo-text{
 color:currentColor;
}
 
 /* Brand colors */
 .logo-item.trendyol{color:#f27a1a}
 .logo-item.hepsiburada{color:#ff6000}
 .logo-item.n11{color:#7b2cbf}
 .logo-item.amazon{color:#ff9900}
 .logo-item.paytr{color:#0066cc}
 .logo-item.iyzico{color:#1d3557}
 .logo-item.beko{color:#e11d48}
 .logo-item.birfatura{color:#2563eb}
 .logo-item.netgsm{color:#16a34a}
 .logo-item.kargonomi{color:#0369a1}
 .logo-item.claude-ai{color:#d97706;background:linear-gradient(135deg, #fef3c7, #fde68a);border-color:#fbbf24}.logo-item.gemini{color:#1a73e8;background:linear-gradient(135deg, #e8f0fe, #dbeafe);border-color:#93c5fd}
 
 @media (max-width:768px){
 .integration-logos{padding:20px 0}
 /* Mobile:marquee scrolling */
 .integration-logos-scroll::before,
 .integration-logos-scroll::after{
 content:'';
 position:absolute;
 top:0;
 width:30px;
 height:100%;
 z-index:2;
 pointer-events:none;
}
 .integration-logos-scroll::before{
 left:0;
 background:linear-gradient(to right, var(--white), transparent);
}
 .integration-logos-scroll::after{
 right:0;
 background:linear-gradient(to left, var(--white), transparent);
}
 .integration-logos-track{
 justify-content:flex-start;
 flex-wrap:nowrap;
 gap:8px;
 width:max-content;
}
 .logo-item.logo-dup{display:inline-flex}
 .logo-item{
 padding:8px 12px;
 font-size:12px;
 opacity:1;
 animation:none;
}
 .logo-dot{width:8px;height:8px}
}
 @keyframes integrationMarquee{
 0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}
 100%{-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}
}
 
 /* Guarantees Bar */
 .guarantees-bar{
 padding:16px 0;
 background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 position:relative;
 overflow:hidden;
}
 .guarantees-bar::before{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:200%;
 height:100%;
 background:linear-gradient(90deg, transparent, rgba(251,191,36,0.1), transparent);
 animation:shimmer 3s infinite;
}
 @keyframes shimmer{
 0%{transform:translateX(0)}
 100%{transform:translateX(50%)}
}
 .guarantees-grid{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:32px;
 flex-wrap:wrap;
 position:relative;
 z-index:1;
}
 .guarantee-item{
 display:flex;
 align-items:center;
 gap:8px;
 color:rgba(255,255,255,0.9);
 font-size:13px;
 font-weight:500;
 opacity:0;
 animation:guaranteeFadeIn 0.5s ease forwards;
 transition:all 0.3s ease;
 padding:8px 12px;
 border-radius:8px;
}
 .guarantee-item:nth-child(1){animation-delay:0.2s}
 .guarantee-item:nth-child(2){animation-delay:0.35s}
 .guarantee-item:nth-child(3){animation-delay:0.5s}
 .guarantee-item:nth-child(4){animation-delay:0.65s}
 
 .guarantee-item:hover{
 background:rgba(251,191,36,0.15);
 transform:translateY(-2px);
}
 .guarantee-item svg{
 color:#fbbf24;
 flex-shrink:0;
 transition:transform 0.3s ease;
}
 .guarantee-item:hover svg{
 transform:scale(1.2) rotate(-10deg);
}
 @keyframes guaranteeFadeIn{
 from{opacity:0;transform:translateX(-20px)}
 to{opacity:1;transform:translateX(0)}
}
 
 @media (max-width:768px){
 .guarantees-grid{gap:16px 24px}
 .guarantee-item{font-size:12px;padding:6px 10px}
}
 
 /* Trust */
 .trust-section{background:var(--gray-50);border-bottom:1px solid var(--gray-100);padding:20px 0;overflow:hidden}
 /* Scroll wrapper for mobile marquee */
 .trust-scroll{overflow:hidden;position:relative;width:100%;max-width:100vw;-webkit-overflow-scrolling:touch}
 /* Desktop:hide duplicate items (compound selector beats .trust-item) */
 .trust-item.trust-dup{display:none}
 .trust-content{display:flex;align-items:center;justify-content:center;gap:8px 20px;flex-wrap:nowrap}
 .trust-item{
 display:flex;align-items:center;gap:6px;color:var(--gray-500);font-size:12px;font-weight:500;
 padding:6px 10px;border-radius:8px;transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);white-space:nowrap;
 opacity:0;
 animation:trustItemFadeIn 0.5s ease forwards;
}
 .trust-item:nth-child(1){animation-delay:0.1s}
 .trust-item:nth-child(2){animation-delay:0.15s}
 .trust-item:nth-child(3){animation-delay:0.2s}
 .trust-item:nth-child(4){animation-delay:0.25s}
 .trust-item:nth-child(5){animation-delay:0.3s}
 .trust-item:nth-child(6){animation-delay:0.35s}
 .trust-item:nth-child(7){animation-delay:0.4s}
 .trust-item:nth-child(8){animation-delay:0.45s}
 .trust-item:nth-child(9){animation-delay:0.5s}
 
 @keyframes trustItemFadeIn{
 from{opacity:0;transform:scale(0.8)}
 to{opacity:1;transform:scale(1)}
}
 
 .trust-item svg{color:var(--accent);transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);flex-shrink:0}
 .trust-item strong{color:var(--gray-700);transition:color 0.3s ease}
 
 .trust-item:hover{
 transform:translateY(-3px) scale(1.05);
 background:rgba(245, 158, 11, 0.1);
 box-shadow:0 8px 25px rgba(245, 158, 11, 0.2);
}
 .trust-item:hover svg{
 transform:rotate(-15deg) scale(1.2);
}
 
 /* Pulse glow animation */
 .trust-item.glow{
 background:rgba(245, 158, 11, 0.15);
 box-shadow:0 0 30px rgba(245, 158, 11, 0.5), 0 0 60px rgba(245, 158, 11, 0.2);
 transform:scale(1.08);
}
 .trust-item.glow svg{
 transform:scale(1.3) rotate(-10deg);
 filter:drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
 animation:iconPulse 0.6s ease;
}
 @keyframes iconPulse{
 0%, 100%{transform:scale(1.3) rotate(-10deg)}
 50%{transform:scale(1.5) rotate(5deg)}
}
 .trust-item.glow strong{
 color:var(--accent-dark);
}
 
 /* Trust:mobile marquee */
 @media (max-width:768px){
 .trust-scroll::before,
 .trust-scroll::after{
 content:'';
 position:absolute;
 top:0;
 width:30px;
 height:100%;
 z-index:2;
 pointer-events:none;
}
 .trust-scroll::before{
 left:0;
 background:linear-gradient(to right, var(--gray-50), transparent);
}
 .trust-scroll::after{
 right:0;
 background:linear-gradient(to left, var(--gray-50), transparent);
}
 .trust-content{
 justify-content:flex-start;
 flex-wrap:nowrap;
 gap:8px 16px;
 width:max-content;
}
 .trust-item.trust-dup{display:flex}
 .trust-item{
 opacity:1;
 animation:none;
}
}
 @keyframes trustMarquee{
 0%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}
 100%{-webkit-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}
}
 
 /* Partners Marquee */
 .partners-section{padding:32px 0;background:var(--primary);overflow:hidden}
 .partners-title{text-align:center;font-size:12px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
 .marquee-wrapper{position:relative;width:100%;overflow:hidden}
 .marquee-wrapper::before, .marquee-wrapper::after{content:'';position:absolute;top:0;width:150px;height:100%;z-index:2;pointer-events:none}
 .marquee-wrapper::before{left:0;background:linear-gradient(to right, var(--primary), transparent)}
 .marquee-wrapper::after{right:0;background:linear-gradient(to left, var(--primary), transparent)}
 .marquee-track{display:flex;animation:marquee 25s linear infinite;width:max-content}
 .marquee-track:hover{animation-play-state:paused}
 .partner-item{display:flex;align-items:center;justify-content:center;padding:8px 48px;min-width:160px}
 .partner-item img{max-height:36px;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.5;transition:0.3s}
 .partner-item img:hover{opacity:1}
 .partner-item .partner-text{font-size:15px;font-weight:700;color:rgba(255,255,255,0.5);transition:0.3s;white-space:nowrap;letter-spacing:0.5px}
 .partner-item:hover .partner-text{color:var(--white)}
 @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
 
 /* Section */
 .section{padding:80px 0}
 .section-header{text-align:center;max-width:600px;margin:0 auto 48px}
 .section-badge{display:inline-flex;background:var(--accent-light);color:var(--accent-dark);padding:6px 14px;border-radius:50px;font-size:12px;font-weight:700;margin-bottom:12px;text-transform:uppercase}
 .section-title{font-size:32px;font-weight:800;color:var(--primary);margin-bottom:12px}
 .section-title span{color:var(--accent)}
 .section-desc{font-size:16px;color:var(--gray-500)}
 
 /* Why Hoays Section */
 .why-section{padding:80px 0;background:var(--white)}
 .why-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
 .why-card{
 background:var(--gray-50);border:1px solid var(--gray-100);border-radius:16px;
 padding:32px 24px;text-align:center;
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position:relative;
 overflow:hidden;
}
 .why-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg, rgba(245,158,11,0.05), transparent);
 opacity:0;
 transition:opacity 0.3s ease;
}
 .why-card:hover::before{opacity:1}
 .why-card:hover{
 transform:translateY(-8px) scale(1.02);
 box-shadow:0 20px 40px rgba(0,0,0,0.12);
 border-color:var(--accent);
}
 .why-card .icon{
 width:64px;height:64px;background:linear-gradient(135deg, var(--accent-light), #fff7ed);
 border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--accent);
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position:relative;
}
 .why-card:hover .icon{
 transform:scale(1.15) rotate(-5deg);
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 color:white;
 box-shadow:0 10px 30px rgba(245,158,11,0.4);
}
 .why-card .icon svg{
 transition:transform 0.3s ease;
}
 .why-card:hover .icon svg{
 animation:iconBounce 0.5s ease;
}
 @keyframes iconBounce{
 0%, 100%{transform:scale(1)}
 50%{transform:scale(1.2)}
}
 .why-card h3{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:10px;transition:color 0.3s ease}
 .why-card:hover h3{color:var(--accent-dark)}
 .why-card p{font-size:14px;color:var(--gray-500);line-height:1.6;position:relative}
 
 /* How It Works Section */
 .how-it-works-section{
 padding:80px 0;
 background:linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}
 .steps-container{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:20px;
 margin-bottom:48px;
}
 .step-item{
 flex:1;
 max-width:300px;
 background:var(--white);
 border:1px solid var(--gray-200);
 border-radius:20px;
 padding:32px 24px;
 text-align:center;
 position:relative;
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .step-item:hover{
 border-color:var(--accent);
 box-shadow:0 25px 50px rgba(245, 158, 11, 0.2);
 transform:translateY(-10px) scale(1.02);
}
 .step-number{
 position:absolute;
 top:-16px;
 left:50%;
 transform:translateX(-50%);
 width:32px;
 height:32px;
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 color:var(--white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:14px;
 font-weight:800;
 box-shadow:0 4px 12px rgba(245, 158, 11, 0.4);
}
 .step-icon{
 width:72px;
 height:72px;
 background:linear-gradient(135deg, var(--accent-light), #fff7ed);
 border-radius:20px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 20px;
 color:var(--accent-dark);
 transition:all 0.3s ease;
}
 .step-item:hover .step-icon{
 transform:scale(1.1) rotate(-5deg);
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 color:var(--white);
}
 .step-item h3{
 font-size:18px;
 font-weight:700;
 color:var(--primary);
 margin-bottom:10px;
}
 .step-item p{
 font-size:14px;
 color:var(--gray-500);
 line-height:1.6;
}
 .step-connector{
 color:var(--gray-300);
 flex-shrink:0;
 animation:connectorPulse 2s ease-in-out infinite;
}
 @keyframes connectorPulse{
 0%, 100%{opacity:0.5;transform:translateX(0)}
 50%{opacity:1;transform:translateX(5px)}
}
 .steps-cta{
 text-align:center;
}
 .steps-cta .btn{
 padding:16px 40px;
 font-size:16px;
 border-radius:12px;
}
 .steps-cta-note{
 display:block;
 margin-top:16px;
 font-size:13px;
 color:var(--gray-500);
}
 
 @media (max-width:900px){
 .steps-container{
 flex-direction:column;
 gap:32px;
}
 .step-connector{
 transform:rotate(90deg);
}
 .step-item{
 max-width:100%;
}
}
 
 /* Integrations Section */
 .integrations-section{padding:60px 0 80px;background:var(--gray-50)}
 .integrations-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:16px;margin-top:40px}
 .integration-card{
 background:var(--white);border:1px solid var(--gray-200);border-radius:12px;
 padding:24px 16px;text-align:center;
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position:relative;
 overflow:hidden;
}
 .integration-card::after{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 background:radial-gradient(circle, rgba(245,158,11,0.1), transparent);
 border-radius:50%;
 transform:translate(-50%, -50%);
 transition:all 0.5s ease;
}
 .integration-card:hover::after{
 width:200%;
 height:200%;
}
 .integration-card:hover{
 border-color:var(--accent);
 box-shadow:0 15px 35px rgba(0,0,0,0.1);
 transform:translateY(-6px);
}
 .integration-card .int-icon{
 width:48px;height:48px;background:var(--gray-100);border-radius:10px;
 display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--gray-600);
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position:relative;
 z-index:1;
}
 .integration-card:hover .int-icon{
 transform:scale(1.15) rotate(-5deg);
 background:var(--accent);
 color:white;
 box-shadow:0 8px 20px rgba(245,158,11,0.3);
}
 .integration-card .int-name{font-size:13px;font-weight:600;color:var(--primary);position:relative;z-index:1;transition:color 0.3s ease}
 .integration-card:hover .int-name{color:var(--accent-dark)}
 .integration-card .int-type{font-size:11px;color:var(--gray-400);margin-top:4px;position:relative;z-index:1}
 .integration-card.featured{border-color:var(--accent);background:linear-gradient(135deg, #fffbeb, var(--white))}
 .integration-card.featured .int-icon{background:var(--accent-light);color:var(--accent)}
 .integration-card.featured:hover .int-icon{background:var(--accent);color:var(--primary)}
 .integration-card.coming-soon{opacity:0.7;border-style:dashed}
 .integration-card.coming-soon .int-type{color:var(--accent);font-weight:600}
 .integration-card.ai{
 background:linear-gradient(135deg, #fef3c7, #fde68a);
 border-color:var(--accent);
 border-width:2px;
 animation:aiGlow 2s ease-in-out infinite;
}
 @keyframes aiGlow{
 0%, 100%{box-shadow:0 0 20px rgba(245,158,11,0.2)}
 50%{box-shadow:0 0 40px rgba(245,158,11,0.4)}
}
 .integration-card.ai .int-icon{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:var(--primary)}
 .integration-card.ai .int-type{color:var(--accent-dark);font-weight:600}
 
 @media (max-width:1024px){
 .why-grid{grid-template-columns:repeat(2, 1fr)}
 .integrations-grid{grid-template-columns:repeat(3, 1fr)}
}
 @media (max-width:640px){
 .why-grid{grid-template-columns:1fr}
 .integrations-grid{grid-template-columns:repeat(2, 1fr)}
}
 
 /* Pricing Comparison Table */
 .pricing-section{padding:80px 0;background:var(--white)}
 .pricing-table-wrapper{overflow-x:auto}
 .pricing-table{width:100%;border-collapse:collapse;min-width:800px}
 .pricing-table th, .pricing-table td{padding:16px;text-align:center;border-bottom:1px solid var(--gray-200)}
 .pricing-table th{background:var(--gray-50);font-weight:600;color:var(--gray-600);font-size:13px}
 .pricing-table th.feature-col{text-align:left;width:300px}
 .pricing-table td.feature-col{text-align:left;font-size:14px;color:var(--gray-700)}
 .pricing-table td.feature-col small{display:block;font-size:12px;color:var(--gray-500);margin-top:2px}
 
 /* Package Header Cells */
 .pkg-header{background:var(--gray-100) !important;vertical-align:top;padding:20px 16px !important}
 .pkg-header.featured{background:var(--primary) !important;color:var(--white)}
 .pkg-name{font-size:16px;font-weight:700;margin-bottom:4px}
 .pkg-header.featured .pkg-name{color:var(--white)}
 .pkg-price{font-size:28px;font-weight:800;color:var(--primary)}
 .pkg-header.featured .pkg-price{color:var(--accent)}
 .pkg-price-old{font-size:14px;color:var(--gray-400);text-decoration:line-through}
 .pkg-period{font-size:12px;color:var(--gray-500)}
 .pkg-header.featured .pkg-period{color:rgba(255,255,255,0.7)}
 .pkg-badge{display:inline-block;background:var(--accent);color:var(--primary);padding:3px 10px;border-radius:50px;font-size:10px;font-weight:700;margin-bottom:8px;text-transform:uppercase}
 
 /* Category Header - Accordion */
 .category-header td{
 background:var(--gray-50) !important;font-weight:700;font-size:14px;color:var(--primary);
 padding:14px 16px !important;text-align:left !important;cursor:pointer;user-select:none;transition:background 0.2s;
}
 .category-header:hover td{background:var(--gray-100) !important}
 .category-header td .cat-toggle{display:inline-flex;align-items:center;gap:10px;width:100%}
 .category-header td .cat-icon{transition:transform 0.2s;color:var(--gray-400);flex-shrink:0}
 .category-header.open td .cat-icon{transform:rotate(180deg);color:var(--accent)}
 .category-header td .cat-count{margin-left:auto;font-size:12px;font-weight:500;color:var(--gray-400);background:var(--gray-200);padding:2px 8px;border-radius:10px}
 .feature-row{display:none}
 .feature-row.visible{display:table-row}
 
 /* Check/X icons */
 .check{color:var(--success)}
 .cross{color:var(--gray-300)}
 .text-value{font-size:13px;font-weight:500;color:var(--gray-600)}
 .text-accent{color:var(--accent-dark);font-weight:600}
 
 /* Buy buttons row */
 .btn-row td{padding:24px 16px !important;background:var(--gray-50)}
 .btn-row .btn{width:100%}
 
 /* Pricing Tabs */
 .pricing-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:32px;flex-wrap:wrap}
 .pricing-tab{display:flex;align-items:center;gap:8px;padding:12px 24px;border:2px solid var(--gray-200);border-radius:50px;background:var(--white);font-size:14px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:0.2s}
 .pricing-tab:hover{border-color:var(--accent);color:var(--accent-dark)}
 .pricing-tab.active{background:var(--primary);border-color:var(--primary);color:var(--white)}
 .pricing-tab.active svg{color:var(--accent)}
 .pricing-tab svg{width:18px;height:18px}
 
 /* Tab Content */
 .tab-content{display:none}
 .tab-content.active{display:block}
 
 /* Package Tags */
 .pkg-tags{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:8px 0}
 .pkg-tag{background:var(--accent-light);color:var(--accent-dark);padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700}
 .pkg-header.featured .pkg-tag{background:rgba(6,182,212,0.2)}
 
 /* Empty Tab */
 .empty-tab{padding:60px 20px;text-align:center;color:var(--gray-500);background:var(--gray-50);border-radius:12px}
 
 /* Comparison Table Section */
 .comparison-section{
 padding:80px 0;
 background:linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
 overflow:hidden;
}
 .comparison-table-wrapper{
 overflow-x:auto;
 margin:0 -16px;
 padding:0 16px;
 -webkit-overflow-scrolling:touch;
}
 .comparison-table{
 width:100%;
 min-width:700px;
 border-collapse:separate;
 border-spacing:0;
 background:var(--white);
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 10px 40px rgba(0, 0, 0, 0.08);
}
 .comparison-table thead{
 background:var(--gray-50);
}
 .comparison-table th{
 padding:20px 16px;
 text-align:center;
 font-weight:600;
 font-size:14px;
 color:var(--gray-600);
 border-bottom:2px solid var(--gray-100);
}
 .comparison-table th.feature-col{
 text-align:left;
 width:30%;
 color:var(--primary);
 font-size:15px;
}
 .comparison-table th.hoays-col{
 background:linear-gradient(135deg, #fef3c7, #fde68a);
 border-bottom-color:var(--accent);
}
 .competitor-header{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
}
 .competitor-icon{
 font-size:24px;
}
 .hoays-header{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
}
 .hoays-badge{
 background:var(--accent);
 color:var(--primary);
 font-size:10px;
 font-weight:700;
 padding:3px 10px;
 border-radius:20px;
 text-transform:uppercase;
 letter-spacing:0.5px;
}
 .hoays-logo{
 font-size:20px;
 font-weight:800;
 color:var(--accent-dark);
 font-style:italic;
}
 .comparison-table td{
 padding:18px 16px;
 border-bottom:1px solid var(--gray-100);
 vertical-align:middle;
}
 .comparison-table tbody tr:last-child td{
 border-bottom:none;
}
 .comparison-table tbody tr{
 transition:background 0.2s ease;
}
 .comparison-table tbody tr:hover{
 background:var(--gray-50);
}
 .comparison-table tbody tr.highlight-row{
 background:linear-gradient(135deg, #fef3c7 0%, #fefce8 100%);
}
 .comparison-table tbody tr.highlight-row:hover{
 background:linear-gradient(135deg, #fde68a 0%, #fef3c7 100%);
}
 .feature-name{
 text-align:left;
}
 .feature-name strong{
 display:block;
 color:var(--primary);
 font-size:14px;
 font-weight:600;
 margin-bottom:2px;
}
 .feature-name small{
 color:var(--gray-500);
 font-size:12px;
}
 .status-cell{
 text-align:center;
 font-size:14px;
}
 .status-cell.hoays{
 background:rgba(245, 158, 11, 0.05);
}
 .status-cell small{
 display:block;
 font-size:11px;
 color:var(--gray-500);
 margin-top:2px;
}
 .status-cell.hoays small{
 color:var(--accent-dark);
 font-weight:600;
}
 .status-yes{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:28px;
 height:28px;
 background:linear-gradient(135deg, #10b981, #059669);
 color:var(--white);
 border-radius:50%;
 font-weight:700;
 font-size:14px;
 box-shadow:0 4px 12px rgba(16, 185, 129, 0.3);
}
 .status-no{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:28px;
 height:28px;
 background:var(--gray-200);
 color:var(--gray-500);
 border-radius:50%;
 font-weight:700;
 font-size:14px;
}
 .status-partial{
 display:inline-block;
 background:#fef3c7;
 color:#b45309;
 padding:4px 12px;
 border-radius:20px;
 font-size:12px;
 font-weight:600;
}
 /* Expandable rows */
 .comparison-table .expandable-row{
 display:none;
 opacity:0;
 transform:translateY(-10px);
}
 .comparison-table.expanded .expandable-row{
 display:table-row;
 animation:rowFadeIn 0.4s ease forwards;
}
 .comparison-table.expanded .expandable-row:nth-child(7){animation-delay:0.02s}
 .comparison-table.expanded .expandable-row:nth-child(8){animation-delay:0.04s}
 .comparison-table.expanded .expandable-row:nth-child(9){animation-delay:0.06s}
 .comparison-table.expanded .expandable-row:nth-child(10){animation-delay:0.08s}
 .comparison-table.expanded .expandable-row:nth-child(11){animation-delay:0.1s}
 .comparison-table.expanded .expandable-row:nth-child(12){animation-delay:0.12s}
 .comparison-table.expanded .expandable-row:nth-child(13){animation-delay:0.14s}
 .comparison-table.expanded .expandable-row:nth-child(14){animation-delay:0.16s}
 .comparison-table.expanded .expandable-row:nth-child(15){animation-delay:0.18s}
 .comparison-table.expanded .expandable-row:nth-child(16){animation-delay:0.2s}
 .comparison-table.expanded .expandable-row:nth-child(17){animation-delay:0.22s}
 .comparison-table.expanded .expandable-row:nth-child(18){animation-delay:0.24s}
 .comparison-table.expanded .expandable-row:nth-child(19){animation-delay:0.26s}
 .comparison-table.expanded .expandable-row:nth-child(20){animation-delay:0.28s}
 .comparison-table.expanded .expandable-row:nth-child(21){animation-delay:0.3s}
 
 @keyframes rowFadeIn{
 to{opacity:1;transform:translateY(0)}
}
 
 /* Toggle button */
 .comparison-expand{
 display:flex;
 justify-content:center;
 margin-top:24px;
}
 .comparison-toggle-btn{
 display:inline-flex;
 align-items:center;
 gap:10px;
 padding:14px 28px;
 background:var(--white);
 border:2px solid var(--gray-200);
 border-radius:50px;
 font-size:14px;
 font-weight:600;
 color:var(--primary);
 cursor:pointer;
 transition:all 0.3s ease;
 box-shadow:0 4px 15px rgba(0, 0, 0, 0.05);
}
 .comparison-toggle-btn:hover{
 border-color:var(--accent);
 background:var(--accent-light);
 color:var(--accent-dark);
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(245, 158, 11, 0.15);
}
 .comparison-toggle-btn .toggle-text{
 font-weight:700;
}
 .comparison-toggle-btn .toggle-count{
 font-size:12px;
 color:var(--gray-500);
 background:var(--gray-100);
 padding:4px 10px;
 border-radius:20px;
}
 .comparison-toggle-btn:hover .toggle-count{
 background:rgba(245, 158, 11, 0.2);
 color:var(--accent-dark);
}
 .comparison-toggle-btn .toggle-icon{
 transition:transform 0.3s ease;
}
 .comparison-toggle-btn.expanded .toggle-icon{
 transform:rotate(180deg);
}
 .comparison-toggle-btn.expanded .toggle-count{
 display:none;
}
 
 .comparison-cta{
 margin-top:40px;
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:16px;
}
 .comparison-cta p{
 color:var(--gray-500);
 font-size:15px;
}
 .comparison-cta .btn{
 padding:14px 32px;
 font-size:15px;
}
 
 @media (max-width:768px){
 .comparison-section{padding:60px 0}
 .comparison-table th, .comparison-table td{padding:14px 12px}
 .comparison-table th.feature-col{font-size:13px}
 .feature-name strong{font-size:13px}
 .feature-name small{font-size:11px}
 .hoays-logo{font-size:16px}
 .competitor-icon{font-size:20px}
}
 
 /* Pricing Cards Section */
 .pricing-cards-section{
 padding:80px 0;
 background:linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
 .pricing-cards-grid{
 display:grid;
 grid-template-columns:repeat(5, 1fr);
 gap:20px;
 margin-bottom:48px;
 padding-top:16px;
}
 .pricing-card{
 background:var(--white);
 border:2px solid var(--gray-200);
 border-radius:20px;
 padding:28px 24px;
 text-align:center;
 position:relative;
 transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 overflow:visible;
}
 .pricing-card::before{
 content:'';
 position:absolute;
 inset:0;
 border-radius:20px;
 background:conic-gradient(from 0deg, transparent, rgba(245,158,11,0.08), transparent, transparent);
 animation:cardRotate 8s linear infinite;
 opacity:0;
 transition:opacity 0.3s ease;
 z-index:0;
}
 .pricing-card:hover::before{opacity:1}
 @keyframes cardRotate{
 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
 .pricing-card:hover{
 border-color:var(--accent);
 box-shadow:0 25px 50px rgba(0, 0, 0, 0.15);
 transform:translateY(-10px);
}
 .pricing-card-featured{
 border-color:var(--accent);
 background:linear-gradient(135deg, #fffbeb 0%, var(--white) 100%);
 transform:scale(1.02);
 animation:featuredFloat 3s ease-in-out infinite;
}
 @keyframes featuredFloat{
 0%, 100%{transform:scale(1.02) translateY(0)}
 50%{transform:scale(1.02) translateY(-5px)}
}
 .pricing-card-featured:hover{
 transform:scale(1.05) translateY(-8px);
 animation:none;
}
 .pricing-card-coming{
 opacity:0.8;
 border-style:dashed;
}
 .pricing-card-badge{
 position:absolute;
 top:-12px;
 left:50%;
 transform:translateX(-50%);
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 color:var(--white);
 padding:6px 18px;
 border-radius:20px;
 font-size:11px;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:0.5px;
 white-space:nowrap;
 z-index:10;
 box-shadow:0 4px 12px rgba(245, 158, 11, 0.4);
}
 .pricing-card-badge-coming{
 background:linear-gradient(135deg, #6b7280, #4b5563);
 box-shadow:0 4px 12px rgba(107, 114, 128, 0.4);
}
 .pricing-card-badge-bestseller{
 background:linear-gradient(135deg, #22c55e, #16a34a);
 box-shadow:0 4px 12px rgba(34, 197, 94, 0.4);
}
 .pricing-card-icon{
 width:64px;
 height:64px;
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 16px;
 color:var(--white);
 transition:transform 0.3s ease;
}
 .pricing-card:hover .pricing-card-icon{
 transform:scale(1.1) rotate(-5deg);
}
 .pricing-card-title{
 font-size:18px;
 font-weight:700;
 color:var(--primary);
 margin-bottom:8px;
}
 .pricing-card-desc{
 font-size:13px;
 color:var(--gray-500);
 margin-bottom:20px;
 min-height:36px;
}
 .pricing-card-features{
 list-style:none;
 text-align:left;
 margin-bottom:24px;
}
 .pricing-card-features li{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:13px;
 color:var(--gray-600);
 padding:6px 0;
 border-bottom:1px solid var(--gray-100);
}
 .pricing-card-features li:last-child{
 border-bottom:none;
}
 .pricing-card-features li svg{
 color:var(--success);
 flex-shrink:0;
}
 .pricing-card-coming .pricing-card-features li svg{
 color:var(--gray-400);
}
 
 /* Fiyat gösterimi */
 .pricing-card-price{
 margin-bottom:16px;
 padding:16px 0;
 border-top:1px solid var(--gray-100);
}
 .pricing-card-price-original{
 display:block;
 font-size:14px;
 color:var(--gray-400);
 text-decoration:line-through;
 margin-bottom:4px;
}
 .pricing-card-price-current{
 display:block;
 font-size:28px;
 font-weight:800;
 color:var(--primary);
 line-height:1.2;
}
 .pricing-card-price-current small{
 font-size:14px;
 font-weight:500;
 color:var(--gray-500);
}
 .pricing-card-featured .pricing-card-price-current{
 color:var(--accent-dark);
}
 
 /* Pricing card buttons container */
 .pricing-card-buttons{
 display:flex;
 gap:8px;
}
 .pricing-card-btn{
 display:block;
 flex:1;
 padding:10px 12px;
 background:var(--white);
 border:2px solid var(--gray-200);
 border-radius:8px;
 font-size:13px;
 font-weight:600;
 color:var(--primary);
 text-align:center;
 transition:all 0.2s ease;
 cursor:pointer;
}
 .pricing-card-btn:hover{
 border-color:var(--accent);
 color:var(--accent-dark);
 background:var(--accent-light);
}
 .pricing-card-btn-outline{
 background:transparent;
 border-color:var(--gray-300);
 color:var(--gray-600);
}
 .pricing-card-btn-outline:hover{
 background:var(--gray-50);
 border-color:var(--gray-400);
 color:var(--primary);
}
 .pricing-card-btn-primary{
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 border-color:var(--accent);
 color:var(--white);
}
 .pricing-card-btn-primary:hover{
 background:linear-gradient(135deg, var(--accent-dark), #b45309);
 border-color:var(--accent-dark);
 color:var(--white);
}
 .pricing-card-btn-featured{
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 border-color:var(--accent);
 color:var(--white);
}
 .pricing-card-btn-featured:hover{
 background:linear-gradient(135deg, var(--accent-dark), #b45309);
 color:var(--white);
}
 .pricing-card-btn-coming{
 width:100%;
 background:var(--gray-100);
 border-color:var(--gray-200);
 color:var(--gray-400);
 cursor:not-allowed;
}
 .pricing-card-btn-coming:hover{
 background:var(--gray-100);
 border-color:var(--gray-200);
 color:var(--gray-400);
}
 .pricing-note{
 text-align:center;
 padding:32px;
 background:var(--gray-50);
 border-radius:16px;
 border:1px solid var(--gray-200);
}
 .pricing-note p{
 font-size:15px;
 color:var(--gray-600);
 margin-bottom:16px;
}
 .pricing-note .btn{
 display:inline-flex;
}
 
 @media (max-width:1200px){
 .pricing-cards-grid{
 grid-template-columns:repeat(3, 1fr);
}
 .pricing-card-featured{
 transform:none;
}
}
 @media (max-width:768px){
 .pricing-cards-grid{
 grid-template-columns:repeat(2, 1fr);
}
}
 @media (max-width:500px){
 .pricing-cards-grid{
 grid-template-columns:1fr;
}
}
 
 /* CTA */
 .cta-section{padding:80px 0;background:var(--gray-50)}
 .cta-box{
 background:linear-gradient(135deg, var(--primary), var(--primary-light));border-radius:24px;
 padding:60px;text-align:center;position:relative;overflow:hidden;
 transition:all 0.4s ease;
}
 .cta-box:hover{
 transform:scale(1.01);
 box-shadow:0 30px 60px rgba(0,0,0,0.3);
}
 .cta-box::before{
 content:'';
 position:absolute;
 top:-100px;
 right:-100px;
 width:400px;
 height:400px;
 background:radial-gradient(circle, rgba(245,158,11,0.2), transparent 60%);
 animation:ctaOrb1 6s ease-in-out infinite;
}
 .cta-box::after{
 content:'';
 position:absolute;
 bottom:-150px;
 left:-100px;
 width:500px;
 height:500px;
 background:radial-gradient(circle, rgba(6,182,212,0.15), transparent 60%);
 animation:ctaOrb2 8s ease-in-out infinite reverse;
}
 @keyframes ctaOrb1{
 0%, 100%{transform:translate(0, 0) scale(1)}
 50%{transform:translate(-30px, 30px) scale(1.1)}
}
 @keyframes ctaOrb2{
 0%, 100%{transform:translate(0, 0) scale(1)}
 50%{transform:translate(40px, -20px) scale(1.15)}
}
 .cta-box h2{font-size:32px;font-weight:800;color:var(--white);margin-bottom:12px;position:relative;z-index:1}
 .cta-box p{font-size:16px;color:rgba(255,255,255,0.7);margin-bottom:28px;position:relative;z-index:1}
 .cta-buttons{display:flex;gap:12px;justify-content:center;position:relative;z-index:1;flex-wrap:wrap}
 .cta-buttons .btn{
 transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .cta-buttons .btn:hover{
 transform:translateY(-3px) scale(1.05);
}
 
 /* FAQ */
 .faq-section{padding:80px 0;background:var(--white)}
 .faq-grid{max-width:800px;margin:0 auto}
 .faq-item{background:var(--gray-50);border-radius:12px;margin-bottom:12px;overflow:hidden}
 .faq-question{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;font-weight:600;color:var(--primary);font-size:15px}
 .faq-question svg{transition:0.2s;color:var(--gray-400)}
 .faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--accent)}
 .faq-answer{padding:0 24px 18px;font-size:14px;color:var(--gray-600);line-height:1.7;display:none}
 .faq-item.open .faq-answer{display:block}
 
 /* Footer */
 .footer{background:var(--primary);color:var(--white);padding:60px 0 40px}
 .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
 .footer-brand p{font-size:14px;color:var(--gray-400);margin-top:16px;line-height:1.7}
 .footer-title{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
 .footer-links{list-style:none}
 .footer-links li{margin-bottom:10px}
 .footer-links a{font-size:14px;color:var(--gray-400);transition:0.2s}
 .footer-links a:hover{color:var(--white)}
 .footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);text-align:center}
 .footer-bottom p{font-size:13px;color:var(--gray-400)}
 
 /* WhatsApp */
 .whatsapp-btn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:99}
 .whatsapp-btn:hover{transform:scale(1.05)}
 
 /* Callback Modal */
 .callback-modal{
 position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
 z-index:1000;display:flex;align-items:center;justify-content:center;
 opacity:0;visibility:hidden;transition:all 0.3s ease;
}
 .callback-modal.active{opacity:1;visibility:visible}
 .callback-modal-content{
 background:var(--white);border-radius:16px;padding:32px;max-width:400px;width:90%;
 position:relative;transform:translateY(20px);transition:transform 0.3s ease;
}
 .callback-modal.active .callback-modal-content{transform:translateY(0)}
 .callback-modal-close{
 position:absolute;top:12px;right:12px;width:32px;height:32px;
 border:none;background:var(--gray-100);border-radius:8px;font-size:20px;
 cursor:pointer;color:var(--gray-500);transition:all 0.2s;
}
 .callback-modal-close:hover{background:var(--gray-200);color:var(--gray-700)}
 .callback-modal-content h3{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:8px}
 .callback-modal-content > p{font-size:14px;color:var(--gray-500);margin-bottom:20px}
 .callback-modal-content form{display:flex;flex-direction:column;gap:12px}
 .callback-modal-content input{
 padding:12px 16px;border:1.5px solid var(--gray-200);border-radius:8px;
 font-size:14px;transition:border-color 0.2s;
}
 .callback-modal-content input:focus{border-color:var(--accent);outline:none}
 .callback-modal-content form .btn{width:100%;padding:14px}
 #callbackSuccess{text-align:center;padding:20px 0}
 #callbackSuccess svg{margin-bottom:12px}
 #callbackSuccess p{font-size:14px;color:var(--gray-600)}
 
 /* =====================================================
 ENHANCED MICRO-INTERACTIONS
 ===================================================== */
 
 /* Button ripple effect */
 .btn{
 position:relative;
 overflow:hidden;
}
 .btn::after{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 background:rgba(255, 255, 255, 0.3);
 border-radius:50%;
 transform:translate(-50%, -50%);
 transition:width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
 opacity:0;
}
 .btn:active::after{
 width:250px;
 height:250px;
 opacity:1;
 transition:0s;
}
 
 /* Enhanced card hover with subtle tilt */
 .why-card, .integration-card{
 transform-style:preserve-3d;
 backface-visibility:hidden;
}
 .why-card:hover{
 transform:translateY(-8px) rotateX(2deg);
}
 .integration-card:hover{
 transform:translateY(-4px) scale(1.02);
}
 
 /* Icon animations */
 .why-card .icon svg,
 .integration-card .int-icon svg{
 transition:transform 0.3s ease;
}
 .why-card:hover .icon svg{
 transform:scale(1.15) rotate(-5deg);
}
 .integration-card:hover .int-icon svg{
 transform:scale(1.1);
}
 
 /* Trust item hover */
 .trust-item:hover{
 transform:translateY(-2px);
 background:rgba(245, 158, 11, 0.08);
}
 .trust-item:hover svg{
 transform:scale(1.2);
}
 
 /* Partner logo hover effect */
 .partner-item img, .partner-item .partner-text{
 transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 .partner-item:hover img{
 transform:scale(1.1);
 filter:brightness(0) invert(1);
}
 
 /* FAQ accordion animation */
 .faq-item{
 transition:all 0.3s ease;
}
 .faq-item:hover{
 transform:translateX(4px);
 border-left:3px solid var(--accent);
}
 .faq-answer{
 max-height:0;
 overflow:hidden;
 transition:max-height 0.3s ease, padding 0.3s ease;
 padding:0 24px;
}
 .faq-item.open .faq-answer{
 max-height:300px;
 padding:0 24px 18px;
 display:block;
}
 
 /* CTA box glow effect */
 .cta-box{
 transition:box-shadow 0.3s ease;
}
 .cta-box:hover{
 box-shadow:0 0 60px rgba(245, 158, 11, 0.2);
}
 
 /* Pricing tab active animation */
 .pricing-tab{
 position:relative;
 overflow:hidden;
}
 .pricing-tab::before{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
 opacity:0;
 transition:opacity 0.3s ease;
}
 .pricing-tab:hover::before{
 opacity:1;
}
 
 /* Table row hover */
 .pricing-table tbody tr:not(.category-header):not(.btn-row):hover{
 background:rgba(245, 158, 11, 0.03);
}
 
 /* Smooth focus states - scoped to landing page forms only */
 .hero input, .hero textarea, .hero select,
 .callback-modal input, .callback-modal textarea,
 .faq-section input, .cta-section input{
 transition:all 0.2s ease;
}
 .hero input:focus, .hero textarea:focus, .hero select:focus,
 .callback-modal input:focus, .callback-modal textarea:focus{
 transform:translateY(-1px);
}
 
 /* Loading skeleton shimmer */
 .skeleton{
 background:linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
 background-size:200% 100%;
 animation:skeleton-shimmer 1.5s infinite;
 border-radius:4px;
}
 @keyframes skeleton-shimmer{
 0%{background-position:200% 0}
 100%{background-position:-200% 0}
}
 
 /* Scroll indicator pulse */
 .scroll-indicator{
 animation:scrollPulse 2s ease-in-out infinite;
}
 @keyframes scrollPulse{
 0%, 100%{transform:translateY(0);opacity:1}
 50%{transform:translateY(8px);opacity:0.5}
}
 
 /* Tilt card - 3D effect on hover (requires JS) */
 .tilt-card{
 transition:transform 0.2s ease, box-shadow 0.2s ease;
 transform-style:preserve-3d;
 will-change:transform;
}
 .tilt-card:hover{
 box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
 
 /* Mobile */
 .mobile-menu-btn{display:none;background:none;border:none;cursor:pointer}
 @media (max-width:1024px){
 .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}
 .hero-visual{order:1}
 .hero-image-area{max-width:450px;margin:0 auto}
 .hero-buttons{justify-content:center}
 .hero-highlight{justify-content:center}
 .footer-grid{grid-template-columns:repeat(2, 1fr)}
}
 @media (max-width:768px){
 .nav{display:none}
 .mobile-menu-btn{display:block}
 .hero{padding:40px 0 50px;padding-top:100px;margin-top:-64px}
 .hero-title{font-size:32px}
 .hero-desc{font-size:16px}
 .hero-highlight{font-size:12px;padding:8px 14px}
 .hero-buttons{flex-direction:column}
 .hero-buttons .btn{width:100%;justify-content:center}
 .cta-box{padding:40px 24px}
 .cta-box h2{font-size:24px}
 .footer-grid{grid-template-columns:1fr}
 .pricing-table{font-size:13px}
 .pricing-table th, .pricing-table td{padding:12px 8px}
 .pkg-price{font-size:22px}
 .partner-item{padding:8px 24px}
}
 
 /* =====================================================
 PAKET QUIZ SECTION
 ===================================================== */
 
 .quiz-section{
 padding:80px 0;
 background:var(--gray-50);
}
 
 .quiz-container{
 max-width:700px;
 margin:0 auto;
 background:var(--white);
 border-radius:20px;
 padding:48px 40px;
 box-shadow:0 20px 40px -15px rgba(0,0,0,0.12);
 position:relative;
 overflow:hidden;
}
 
 .quiz-progress{
 height:6px;
 background:var(--gray-200);
 border-radius:50px;
 margin-bottom:8px;
 overflow:hidden;
}
 
 .quiz-progress-bar{
 height:100%;
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 border-radius:50px;
 transition:width 0.5s ease;
}
 
 .quiz-progress-text,
 .quiz-step-text{
 text-align:right;
 font-size:13px;
 color:var(--gray-500);
 margin-bottom:32px;
}
 
 @keyframes quizFadeIn{
 from{opacity:0;transform:translateY(20px)}
 to{opacity:1;transform:translateY(0)}
}
 
 .quiz-step{
 display:none;
 animation:quizFadeIn 0.4s ease-out;
}
 
 .quiz-step.active{
 display:block;
}
 
 .quiz-question,
 .quiz-step h3{
 font-size:22px;
 font-weight:700;
 color:var(--primary);
 text-align:center;
 margin-bottom:28px;
}
 
 .quiz-options{
 display:flex;
 flex-direction:column;
 gap:12px;
}
 
 .quiz-option{
 display:flex;
 align-items:center;
 gap:16px;
 padding:18px 24px;
 background:var(--white);
 border:2px solid var(--gray-200);
 border-radius:12px;
 cursor:pointer;
 transition:all 0.2s ease;
 text-align:left;
 font-family:inherit;
 width:100%;
}
 
 .quiz-option:hover{
 border-color:var(--accent);
 background:var(--accent-light);
 transform:translateX(4px);
}
 
 .quiz-option.selected{
 border-color:var(--accent);
 background:var(--accent-light);
 box-shadow:0 0 0 3px rgba(245, 158, 11, 0.15);
}
 
 .quiz-option-icon{
 font-size:28px;
 flex-shrink:0;
}
 
 .quiz-option-label,
 .quiz-option-title{
 font-size:16px;
 font-weight:600;
 color:var(--primary);
 display:block;
}
 
 .quiz-option-desc{
 font-size:13px;
 color:var(--gray-500);
 display:block;
}
 
 /* Quiz Result */
 .quiz-result{
 text-align:center;
 animation:quizFadeIn 0.5s ease-out;
}
 
 .quiz-result-icon{
 font-size:56px;
 margin-bottom:16px;
}
 
 .quiz-result-title{
 font-size:18px;
 color:var(--gray-500);
 margin-bottom:12px;
 font-weight:500;
}
 
 .quiz-result-package{
 font-size:32px;
 font-weight:800;
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 margin-bottom:12px;
}
 
 .quiz-result-desc{
 font-size:16px;
 color:var(--gray-500);
 margin-bottom:28px;
 line-height:1.7;
}
 
 .quiz-result-buttons{
 display:flex;
 gap:12px;
 justify-content:center;
 flex-wrap:wrap;
 margin-bottom:24px;
}
 
 .quiz-result-buttons .btn-secondary{
 background:var(--white);
 border:2px solid var(--gray-200);
 color:var(--gray-700);
}
 
 .quiz-result-buttons .btn-secondary:hover{
 border-color:var(--accent);
 color:var(--accent-dark);
}
 
 .quiz-restart{
 display:inline-flex;
 align-items:center;
 gap:6px;
 background:none;
 border:none;
 color:var(--gray-500);
 font-size:14px;
 cursor:pointer;
 transition:all 0.2s ease;
 font-family:inherit;
}
 
 .quiz-restart:hover{
 color:var(--accent-dark);
}
 
 /* =====================================================
 KONTRAST KUTULARI (Before/After)
 ===================================================== */
 
 .contrast-section{
 padding:80px 0;
 background:var(--white);
}
 
 .contrast-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:24px;
 align-items:stretch;
}
 
 .contrast-box{
 border-radius:20px;
 padding:36px 32px;
 position:relative;
}
 
 .contrast-old{
 background:#fef2f2;
 border:2px solid #fecaca;
}
 
 .contrast-new{
 background:#f0fdf4;
 border:2px solid #bbf7d0;
}
 
 .contrast-box-header{
 display:flex;
 align-items:center;
 gap:12px;
 margin-bottom:24px;
 padding-bottom:16px;
 border-bottom:2px solid rgba(0,0,0,0.06);
}
 
 .contrast-box-icon,
 .contrast-icon{
 font-size:28px;
}
 
 .contrast-box-header h3{
 font-size:20px;
 font-weight:700;
 color:var(--primary);
}
 
 .contrast-list{
 list-style:none;
 display:flex;
 flex-direction:column;
 gap:14px;
}
 
 .contrast-list li{
 display:flex;
 align-items:flex-start;
 gap:10px;
 font-size:15px;
 line-height:1.5;
 color:var(--gray-700);
}
 
 .contrast-list li svg{
 flex-shrink:0;
 margin-top:2px;
}
 
 .contrast-x,
 .contrast-check{
 flex-shrink:0;
 width:24px;
 height:24px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:13px;
 font-weight:700;
}
 
 .contrast-x{
 background:#fee2e2;
 color:#ef4444;
}
 
 .contrast-check{
 background:#dcfce7;
 color:#22c55e;
}
 
 .contrast-old .contrast-list li svg{
 color:#ef4444;
}
 
 .contrast-new .contrast-list li svg{
 color:#22c55e;
}
 
 .contrast-cta{
 text-align:center;
 margin-top:40px;
}
 
 /* =====================================================
 SCROLL HİKAYE (Storytelling)
 ===================================================== */
 
 .story-section{
 padding:80px 0;
 background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 position:relative;
 overflow:hidden;
}
 
 .story-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-image:radial-gradient(circle at 20% 30%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
 radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
}
 
 .story-section .section-header{
 position:relative;
 z-index:1;
}
 
 .story-section .section-badge{
 background:rgba(245, 158, 11, 0.2);
 color:#fbbf24;
}
 
 .story-section .section-title{
 color:var(--white);
}
 
 .story-section .section-title span{
 color:#fbbf24;
}
 
 .story-timeline{
 max-width:650px;
 margin:0 auto;
 position:relative;
 z-index:1;
}
 
 .story-timeline::before{
 content:'';
 position:absolute;
 left:28px;
 top:0;
 bottom:0;
 width:2px;
 background:rgba(255, 255, 255, 0.12);
}
 
 .story-step{
 display:flex;
 gap:24px;
 margin-bottom:40px;
 position:relative;
}
 
 .story-step-number{
 width:56px;
 height:56px;
 min-width:56px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.08);
 border:2px solid rgba(255, 255, 255, 0.15);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 font-weight:700;
 color:rgba(255, 255, 255, 0.7);
 position:relative;
 z-index:1;
}
 
 .story-step-content{
 padding-top:8px;
}
 
 .story-step-content h3{
 font-size:20px;
 font-weight:700;
 color:var(--white);
 margin-bottom:8px;
}
 
 .story-step-content p{
 font-size:15px;
 color:rgba(255, 255, 255, 0.65);
 line-height:1.7;
}
 
 .story-step-final .story-step-number{
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
 border-color:transparent;
 color:var(--white);
}
 
 .story-step-final .story-step-content h3{
 background:linear-gradient(135deg, var(--accent), #fbbf24);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 font-size:24px;
}
 
 /* =====================================================
 "BİR GÜNÜM" KARŞILAŞTIRMASI
 ===================================================== */
 
 .dayschedule-section{
 padding:80px 0;
 background:var(--gray-50);
}
 
 .dayschedule-grid{
 display:grid;
 grid-template-columns:1fr auto 1fr;
 gap:20px;
 align-items:start;
}
 
 .dayschedule-column{
 border-radius:20px;
 overflow:hidden;
 background:var(--white);
 box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
}
 
 .dayschedule-column-header{
 padding:20px 24px;
 font-size:18px;
 font-weight:700;
 color:var(--white);
 display:flex;
 align-items:center;
 gap:10px;
}
 
 .dayschedule-without .dayschedule-column-header{
 background:linear-gradient(135deg, #ef4444, #dc2626);
}
 
 .dayschedule-with .dayschedule-column-header{
 background:linear-gradient(135deg, var(--accent), var(--accent-dark));
}
 
 .dayschedule-item{
 display:flex;
 gap:14px;
 padding:16px 24px;
 border-bottom:1px solid var(--gray-100);
 transition:all 0.2s ease;
}
 
 .dayschedule-item:last-child{
 border-bottom:none;
}
 
 .dayschedule-item:hover{
 background:rgba(245, 158, 11, 0.03);
}
 
 .dayschedule-time{
 font-size:14px;
 font-weight:700;
 color:var(--accent-dark);
 min-width:48px;
 padding-top:2px;
 font-variant-numeric:tabular-nums;
}
 
 .dayschedule-without .dayschedule-time{
 color:#ef4444;
}
 
 .dayschedule-task{
 font-size:14px;
 color:var(--gray-700);
 line-height:1.5;
 display:flex;
 align-items:flex-start;
 gap:8px;
}
 
 .dayschedule-emoji{
 font-size:18px;
 flex-shrink:0;
}
 
 .dayschedule-divider{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
 padding-top:80px;
}
 
 .dayschedule-divider-line{
 width:2px;
 height:60px;
 background:linear-gradient(to bottom, transparent, var(--gray-300), transparent);
}
 
 .dayschedule-divider-text{
 font-size:16px;
 font-weight:800;
 color:var(--gray-400);
 letter-spacing:2px;
}
 
 .dayschedule-cta{
 text-align:center;
 margin-top:48px;
}
 
 .dayschedule-cta p{
 font-size:18px;
 font-weight:600;
 color:var(--primary);
 margin-bottom:16px;
}
 
 /* =====================================================
 NEW SECTIONS - RESPONSIVE
 ===================================================== */
 
 @media (max-width:768px){
 .quiz-section,
 .contrast-section,
 .story-section,
 .dayschedule-section{
 padding:60px 0;
}
 
 .quiz-container{
 padding:32px 20px;
}
 
 .quiz-question,
 .quiz-step h3{
 font-size:18px;
}
 
 .quiz-option{
 padding:14px 16px;
}
 
 .quiz-option-icon{
 font-size:24px;
}
 
 .quiz-result-package{
 font-size:26px;
}
 
 .contrast-grid{
 grid-template-columns:1fr;
 gap:16px;
}
 
 .contrast-box{
 padding:28px 20px;
}
 
 .story-timeline::before{
 left:20px;
}
 
 .story-step{
 gap:16px;
}
 
 .story-step-number{
 width:40px;
 height:40px;
 min-width:40px;
 font-size:16px;
}
 
 .story-step-content h3{
 font-size:17px;
}
 
 .story-step-content p{
 font-size:14px;
}
 
 .dayschedule-grid{
 grid-template-columns:1fr;
 gap:16px;
}
 
 .dayschedule-divider{
 flex-direction:row;
 justify-content:center;
 padding-top:0;
 width:100%;
}
 
 .dayschedule-divider-line{
 width:60px;
 height:2px;
}
 
 .dayschedule-item{
 padding:12px 16px;
}
 
 .dayschedule-time{
 font-size:13px;
 min-width:42px;
}
 
 .dayschedule-task{
 font-size:13px;
}
}
 
 /* Accessibility:Reduced motion preference */
 @media (prefers-reduced-motion:reduce){
 *, *::before, *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
 scroll-behavior:auto !important;
}
}
 @media(max-width:768px){.integration-logos-track{animation:integrationMarquee 35s linear infinite;will-change:transform}.integration-logos-scroll:active .integration-logos-track{animation-play-state:paused}.trust-content{animation:trustMarquee 40s linear infinite;will-change:transform}.trust-scroll:active .trust-content{animation-play-state:paused}}