*{margin: 0;
padding: 0;
box-sizing: border-box}
 :root{--primary-color: #2563eb;
--primary-dark: #1e40af;
--primary-light: #3b82f6;
--secondary-color: #10b981;
--secondary-dark: #059669;
--accent-color: #8b5cf6;
--text-dark: #1f2937;
--text-medium: #4b5563;
--text-light: #6b7280;
--bg-light: #f9fafb;
--bg-white: #ffffff;
--bg-gradient-start: #667eea;
--bg-gradient-end: #764ba2;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25)}
 html{scroll-behavior: smooth}
 .skip-to-content{position: absolute;
top: -40px;
left: 0;
background: var(--primary-color);
color: white;
padding: 8px 16px;
text-decoration: none;
z-index: 10000;
border-radius: 0 0 4px 0}
 .skip-to-content:focus{top: 0}
 @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}
 }
 body{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--bg-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale}
 .container{max-width: 1200px;
margin: 0 auto;
padding: 0 20px}
 .navbar{background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 1000;
padding: 1.25rem 0;
transition: all 0.3s ease}
 .nav-content{display: flex;
justify-content: space-between;
align-items: center}
 .logo h1{font-size: 1.75rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
letter-spacing: -0.5px}
 .nav-links{display: flex;
list-style: none;
gap: 2rem}
 .nav-links a{text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0}
 .nav-links a:hover, .nav-links a.active{color: var(--primary-color)}
 .nav-links a::after{content: '';
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transition: all 0.3s ease}
 .nav-links a:hover::after, .nav-links a.active::after{left: 0;
right: 0}
 .nav-links a:focus{outline: 2px solid var(--primary-color);
outline-offset: 4px;
border-radius: 4px}
 .hero{background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
color: white;
padding: 8rem 0;
text-align: center;
position: relative;
overflow: hidden}
 .hero::before{content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
opacity: 0.3}
 .hero-content{max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1}
 .hero-title{font-size: 4rem;
font-weight: 800;
margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease;
letter-spacing: -1px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1)}
 .hero-subtitle{font-size: 1.75rem;
font-weight: 500;
margin-bottom: 1.5rem;
opacity: 0.95;
animation: fadeInUp 0.8s ease 0.2s both;
letter-spacing: -0.3px}
 .hero-description{font-size: 1.125rem;
margin-bottom: 2.5rem;
opacity: 0.9;
line-height: 1.8;
animation: fadeInUp 0.8s ease 0.4s both}
 .hero-buttons{display: flex;
gap: 1rem;
justify-content: center;
animation: fadeInUp 0.8s ease 0.6s both}
 .btn{display: inline-block;
padding: 0.75rem 2rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem}
 .btn-primary{background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
color: white;
box-shadow: var(--shadow-md)}
 .btn-primary:hover{background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
transform: translateY(-3px);
box-shadow: var(--shadow-xl)}
 .btn-primary:focus, .btn-secondary:focus{outline: 3px solid var(--primary-color);
outline-offset: 2px;
border-radius: 0.5rem}
 .btn-secondary{background-color: rgba(255, 255, 255, 0.95);
color: var(--primary-color);
border: 2px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md)}
 .btn-secondary:hover{background-color: rgb(231, 230, 230);
color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
border-color: rgb(231, 230, 230) }
 .features{padding: 5rem 0;
background-color: var(--bg-light)}
 .section-title{font-size: 3rem;
font-weight: 800;
text-align: center;
margin-bottom: 4rem;
color: var(--text-dark);
letter-spacing: -1px;
position: relative;
display: inline-block;
width: 100%}
 .section-title::after{content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
border-radius: 2px}
 .features-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem}
 .feature-card{background-color: var(--bg-white);
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-color);
position: relative;
overflow: hidden}
 .feature-card::before{content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease}
 .feature-card:hover::before{transform: scaleX(1)}
 .feature-card:hover, .feature-card:focus-within{transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
border-color: transparent}
 .feature-card a:focus, .feature-card button:focus{outline: 2px solid var(--primary-color);
outline-offset: 4px;
border-radius: 4px}
 .feature-icon{font-size: 3.5rem;
margin-bottom: 1.5rem;
display: inline-block;
transition: transform 0.3s ease}
 .feature-card:hover .feature-icon{transform: scale(1.1) rotate(5deg)}
 .feature-card h3{font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-dark);
letter-spacing: -0.3px}
 .feature-card p{color: var(--text-light);
line-height: 1.7}
 .about{padding: 5rem 0}
 .about-text{font-size: 1.125rem;
color: var(--text-light);
margin-bottom: 1.5rem;
line-height: 1.8}
 .about-highlights{display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem}
 .highlight{text-align: center;
padding: 2.5rem 2rem;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
border-radius: 1rem;
border: 1px solid var(--border-color);
transition: all 0.3s ease}
 .highlight:hover{transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color)}
 .highlight strong{display: block;
font-size: 1.25rem;
color: var(--primary-color);
margin-bottom: 0.5rem}
 .highlight p{color: var(--text-light)}
 .security{padding: 5rem 0;
background-color: var(--bg-light)}
 .security-intro{font-size: 1.125rem;
color: var(--text-light);
text-align: center;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto}
 .security-features{display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 3rem}
 .security-item{background-color: var(--bg-white);
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: all 0.3s ease}
 .security-item:hover{transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color)}
 .security-item h4{font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-dark)}
 .security-item p{color: var(--text-light);
margin-bottom: 1rem}
 .security-item ul{list-style: none;
padding-left: 0}
 .security-item ul li{color: var(--text-light);
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative}
 .security-item ul li::before{content: '✓';
position: absolute;
left: 0;
color: var(--secondary-color);
font-weight: bold}
 .security-cta{display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap}
 .policy-content, .storage-content{padding: 3rem 0 5rem;
max-width: 900px;
margin: 0 auto}
 .policy-header, .storage-header{text-align: center;
margin-bottom: 4rem;
padding-bottom: 2.5rem;
border-bottom: 2px solid var(--border-color);
position: relative}
 .policy-header::after, .storage-header::after{content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color))}
 .policy-header h1, .storage-header h1{font-size: 3rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 0.75rem;
letter-spacing: -1px}
 .last-updated, .subtitle{color: var(--text-light);
font-size: 1rem}
 .policy-body, .storage-body{line-height: 1.8}
 .policy-section, .storage-section{margin-bottom: 3rem}
 .policy-section h2, .storage-section h2{font-size: 2.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1.5rem;
padding-top: 1rem;
letter-spacing: -0.5px;
position: relative;
padding-left: 1.5rem}
 .policy-section h2::before, .storage-section h2::before{content: '';
position: absolute;
left: 0;
top: 1.5rem;
width: 4px;
height: 2rem;
background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
border-radius: 2px}
 .policy-section h3, .storage-section h3{font-size: 1.625rem;
font-weight: 600;
color: var(--text-dark);
margin-top: 2rem;
margin-bottom: 1rem;
letter-spacing: -0.3px}
 .policy-section p, .storage-section p{color: var(--text-light);
margin-bottom: 1rem;
font-size: 1.0625rem}
 .policy-section ul, .storage-section ul{margin-left: 2rem;
margin-bottom: 1.5rem;
color: var(--text-light)}
 .policy-section ul li, .storage-section ul li{margin-bottom: 0.75rem;
line-height: 1.7}
 .policy-section a, .storage-section a{color: var(--primary-color);
text-decoration: none;
font-weight: 500}
 .policy-section a:hover, .storage-section a:hover{text-decoration: underline}
 .policy-section a:focus, .storage-section a:focus{outline: 2px solid var(--primary-color);
outline-offset: 2px;
border-radius: 2px;
text-decoration: underline}
 .policy-footer, .storage-footer{display: flex;
gap: 1.5rem;
justify-content: center;
margin-top: 4rem;
padding-top: 3rem;
border-top: 2px solid var(--border-color);
flex-wrap: wrap;
position: relative}
 .policy-footer::before, .storage-footer::before{content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color))}
 .architecture-diagram{display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap}
 .db-box{background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
color: white;
padding: 2.5rem;
border-radius: 1rem;
min-width: 280px;
box-shadow: var(--shadow-xl);
transition: all 0.3s ease;
position: relative;
overflow: hidden}
 .db-box::before{content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
transition: all 0.5s ease}
 .db-box:hover{transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-2xl)}
 .db-box:hover::before{top: -30%;
right: -30%}
 .db-box h3{font-size: 1.5rem;
margin-bottom: 1rem}
 .db-name{font-family: 'Courier New', monospace;
background-color: rgba(255, 255, 255, 0.2);
padding: 0.5rem;
border-radius: 0.25rem;
margin-bottom: 1rem;
font-size: 0.9rem}
 .db-box ul{list-style: none;
padding-left: 0}
 .db-box ul li{padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative}
 .db-box ul li::before{content: '•';
position: absolute;
left: 0;
font-size: 1.5rem;
line-height: 1}
 .db-arrow{font-size: 2rem;
color: var(--primary-color);
font-weight: bold}
 .admin-db{background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)}
 .tenant-db{background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)}
 .data-categories{display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0}
 .category-card{background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, var(--bg-light) 100%);
padding: 2rem;
border-radius: 1rem;
border-left: 4px solid var(--primary-color);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease}
 .category-card:hover{transform: translateX(5px);
box-shadow: var(--shadow-md);
border-left-width: 6px}
 .category-card h3{font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-dark)}
 .category-card ul{list-style: none;
padding-left: 0}
 .category-card ul li{padding: 0.5rem 0;
color: var(--text-light);
padding-left: 1.5rem;
position: relative}
 .category-card ul li::before{content: '→';
position: absolute;
left: 0;
color: var(--primary-color)}
 .important-note{background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 4px solid #f59e0b;
padding: 2rem;
border-radius: 0.75rem;
margin: 2rem 0;
box-shadow: var(--shadow-sm);
position: relative}
 .important-note strong{color: #92400e;
display: block;
margin-bottom: 0.5rem}
 .important-note{color: #78350f}
 .security-features{display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0}
 .security-feature{background-color: var(--bg-white);
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
border-top: 4px solid var(--primary-color);
transition: all 0.3s ease}
 .security-feature:hover{transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color)}
 .security-feature h3{font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-dark)}
 .security-feature ul{list-style: none;
padding-left: 0}
 .security-feature ul li{padding: 0.5rem 0;
color: var(--text-light);
padding-left: 1.5rem;
position: relative}
 .security-feature ul li::before{content: '✓';
position: absolute;
left: 0;
color: var(--secondary-color);
font-weight: bold}
 .practices-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0}
 .practice-item{background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
padding: 2.5rem;
border-radius: 1rem;
border: 1px solid var(--border-color);
border-top: 4px solid var(--secondary-color);
transition: all 0.3s ease}
 .practice-item:hover{transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--secondary-color)}
 .practice-item h3{font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-dark)}
 .practice-item p{color: var(--text-light);
line-height: 1.7}
 .practice-item code, code{background-color: rgba(0, 0, 0, 0.05);
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--text-dark)}
 .policy-section code, .storage-section code{background-color: rgba(0, 0, 0, 0.05);
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: var(--text-dark)}
 .comparison-table{overflow-x: auto;
margin: 2rem 0}
 .comparison-table table{width: 100%;
border-collapse: collapse;
background-color: var(--bg-white);
box-shadow: var(--shadow-lg);
border-radius: 1rem;
overflow: hidden;
border: 1px solid var(--border-color)}
 .comparison-table th{background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
color: white;
padding: 1.25rem 1rem;
text-align: left;
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.3px}
 .comparison-table td{padding: 1.25rem 1rem;
border-bottom: 1px solid var(--border-color);
color: var(--text-medium);
transition: background-color 0.2s ease}
 .comparison-table tr:last-child td{border-bottom: none}
 .comparison-table tr:nth-child(even){background-color: var(--bg-light)}
 .comparison-table tr:hover td{background-color: rgba(37, 99, 235, 0.05)}
 .comparison-table tr:focus-within td{background-color: rgba(37, 99, 235, 0.1);
outline: 2px solid var(--primary-color);
outline-offset: -2px}
 .comparison-table a:focus{outline: 2px solid var(--primary-color);
outline-offset: 2px;
border-radius: 2px}
 .comparison-table td strong{color: var(--text-dark)}
 .principles{display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0}
 .principle{background-color: var(--bg-white);
padding: 2.5rem;
border-radius: 1rem;
box-shadow: var(--shadow-md);
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
border: 1px solid var(--border-color);
border-left: 4px solid var(--primary-color)}
 .principle:hover{transform: translateX(5px);
box-shadow: var(--shadow-xl);
border-left-width: 6px}
 .principle h3{font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text-dark)}
 .principle p{color: var(--text-light);
line-height: 1.7}
 .footer{background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: white;
padding: 4rem 0 1.5rem;
margin-top: 5rem;
position: relative}
 .footer::before{content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent)}
 .footer-content{display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem}
 .footer-section h3, .footer-section h4{margin-bottom: 1rem;
color: white}
 .footer-section p{color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.5rem}
 .footer-section ul{list-style: none;
padding-left: 0}
 .footer-section ul li{margin-bottom: 0.5rem}
 .footer-section a{color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
display: inline-block}
 .footer-section a:hover{color: white;
transform: translateX(5px);
padding-left: 5px}
 .footer-section a:focus{outline: 2px solid white;
outline-offset: 2px;
border-radius: 2px}
 .footer-bottom{text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7)}
 @keyframes fadeInUp{from{opacity: 0;
transform: translateY(30px)}
 to{opacity: 1;
transform: translateY(0)}
 }
 @keyframes float{0%, 100%{transform: translateY(0px)}
 50%{transform: translateY(-10px)}
 }
 .feature-icon{animation: float 3s ease-in-out infinite}
 .feature-card:nth-child(2) .feature-icon{animation-delay: 0.2s}
 .feature-card:nth-child(3) .feature-icon{animation-delay: 0.4s}
 .feature-card:nth-child(4) .feature-icon{animation-delay: 0.6s}
 .feature-card:nth-child(5) .feature-icon{animation-delay: 0.8s}
 .feature-card:nth-child(6) .feature-icon{animation-delay: 1s}
 @media (max-width: 768px){.hero-title{font-size: 2.75rem}
 .section-title{font-size: 2.25rem}
 .section-title::after{width: 60px}
 .hero-subtitle{font-size: 1.25rem}
 .hero-buttons{flex-direction: column;
align-items: center}
 .btn{width: 100%;
max-width: 300px}
 .nav-links{gap: 1rem;
font-size: 0.9rem}
 .section-title{font-size: 2rem}
 .architecture-diagram{flex-direction: column}
 .db-arrow{transform: rotate(90deg)}
 .policy-header h1, .storage-header h1{font-size: 2.25rem}
 .policy-section h2, .storage-section h2{font-size: 1.875rem;
padding-left: 1rem}
 .policy-section h2::before, .storage-section h2::before{width: 3px;
height: 1.5rem}
 .comparison-table{font-size: 0.9rem}
 .nav-links{flex-wrap: wrap;
justify-content: center}
 }
 @media print{*{background: white !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important}
 .navbar, .hero-buttons, .btn, .footer, .policy-footer, .storage-footer{display: none !important}
 .hero{background: white !important;
color: black !important;
padding: 2rem 0 !important}
 .hero-title, .hero-subtitle, .hero-description{color: black !important}
 .section-title::after{display: none}
 .feature-card, .security-item, .category-card, .practice-item, .principle{break-inside: avoid;
page-break-inside: avoid;
border: 1px solid #ccc !important;
box-shadow: none !important}
 a{color: black !important;
text-decoration: underline}
 a[href^="http"]:after{content: " (" attr(href) ")";
font-size: 0.8em;
color: #666}
 .comparison-table{border: 1px solid #000 !important}
 .comparison-table th{background: #f0f0f0 !important;
color: black !important}
 .comparison-table td{border: 1px solid #ccc !important}
 @page{margin: 2cm}
 h1, h2, h3{page-break-after: avoid}
 p, li{orphans: 3;
widows: 3}
 }
 @media (max-width: 480px){.container{padding: 0 15px}
 .hero{padding: 4rem 0}
 .hero-title{font-size: 2rem}
 .features-grid, .data-categories, .security-features, .practices-grid, .principles{grid-template-columns: 1fr}
 }