sameersyed/Defence_FrameWork

1* {2    margin: 0;3    padding: 0;4    box-sizing: border-box;5}6 7body {8    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;9    background: #0f0f23;10    color: #e0e0e0;11    line-height: 1.6;12}13 14.container {15    max-width: 1200px;16    margin: 0 auto;17    padding: 0 24px;18}19 20/* Navbar */21.navbar {22    background: rgba(26, 26, 46, 0.95);23    backdrop-filter: blur(10px);24    border-bottom: 1px solid #2a2a3e;25    position: fixed;26    width: 100%;27    top: 0;28    z-index: 1000;29}30 31.nav-container {32    max-width: 1200px;33    margin: 0 auto;34    padding: 16px 24px;35    display: flex;36    justify-content: space-between;37    align-items: center;38}39 40.logo {41    font-size: 24px;42    font-weight: 700;43    color: #fff;44}45 46.nav-links {47    display: flex;48    gap: 32px;49    align-items: center;50}51 52.nav-links a {53    color: #b0b0b0;54    text-decoration: none;55    transition: color 0.3s;56}57 58.nav-links a:hover {59    color: #667eea;60}61 62.btn-login {63    padding: 8px 20px;64    border: 1px solid #667eea;65    border-radius: 6px;66    color: #667eea !important;67}68 69.btn-signup {70    padding: 8px 20px;71    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);72    border-radius: 6px;73    color: #fff !important;74}75 76/* Hero Section */77.hero {78    padding: 120px 24px 80px;79    text-align: center;80    background: linear-gradient(rgba(15, 15, 35, 0.85), rgba(15, 15, 35, 0.95)), 81                url('https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1920&q=80') center/cover;82    position: relative;83}84 85.hero-content h1 {86    font-size: 48px;87    font-weight: 700;88    margin-bottom: 16px;89    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);90    -webkit-background-clip: text;91    -webkit-text-fill-color: transparent;92}93 94.subtitle {95    font-size: 24px;96    color: #b0b0b0;97    margin-bottom: 16px;98}99 100.description {101    font-size: 18px;102    color: #888;103    max-width: 700px;104    margin: 0 auto 32px;105}106 107.hero-buttons {108    display: flex;109    gap: 16px;110    justify-content: center;111    margin-bottom: 24px;112}113 114.btn-primary, .btn-secondary {115    padding: 14px 32px;116    border-radius: 8px;117    text-decoration: none;118    font-weight: 600;119    transition: transform 0.3s;120}121 122.btn-primary {123    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);124    color: #fff;125}126 127.btn-secondary {128    background: rgba(255, 255, 255, 0.05);129    color: #e0e0e0;130    border: 1px solid #2a2a3e;131}132 133.btn-primary:hover, .btn-secondary:hover {134    transform: translateY(-2px);135}136 137.research-badge {138    display: inline-block;139    padding: 12px 24px;140    background: rgba(102, 126, 234, 0.1);141    border: 1px solid rgba(102, 126, 234, 0.3);142    border-radius: 24px;143    font-size: 14px;144    color: #667eea;145}146 147/* Features Section */148.features {149    padding: 80px 24px;150    background: #0f0f23;151}152 153.features h2 {154    text-align: center;155    font-size: 36px;156    margin-bottom: 48px;157    color: #fff;158}159 160.features-grid {161    display: grid;162    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));163    gap: 24px;164}165 166.feature-card {167    background: #1e1e2f;168    border: 1px solid #2a2a3e;169    border-radius: 12px;170    padding: 32px;171    transition: transform 0.3s, border-color 0.3s;172}173 174.feature-card:hover {175    transform: translateY(-4px);176    border-color: #667eea;177}178 179.feature-icon {180    font-size: 48px;181    margin-bottom: 16px;182}183 184.feature-card h3 {185    font-size: 20px;186    margin-bottom: 12px;187    color: #fff;188}189 190.feature-card p {191    color: #b0b0b0;192    font-size: 15px;193}194 195/* Research Section */196.research {197    padding: 80px 24px;198    background: #1a1a2e;199}200 201.research h2 {202    text-align: center;203    font-size: 36px;204    margin-bottom: 48px;205    color: #fff;206}207 208.research-paper {209    background: #1e1e2f;210    border: 1px solid #667eea;211    border-radius: 12px;212    padding: 40px;213    max-width: 900px;214    margin: 0 auto;215}216 217.paper-info h3 {218    font-size: 24px;219    color: #667eea;220    margin-bottom: 16px;221}222 223.authors, .publication, .doi {224    color: #b0b0b0;225    margin-bottom: 8px;226}227 228.research-highlights {229    margin-top: 32px;230    padding-top: 32px;231    border-top: 1px solid #2a2a3e;232}233 234.research-highlights h4 {235    color: #fff;236    margin-bottom: 16px;237}238 239.research-highlights ul {240    list-style: none;241    padding: 0;242}243 244.research-highlights li {245    padding: 8px 0;246    color: #b0b0b0;247}248 249/* Stats Section */250.stats {251    padding: 60px 24px;252    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);253}254 255.stats-grid {256    display: grid;257    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));258    gap: 32px;259    text-align: center;260}261 262.stat-number {263    font-size: 48px;264    font-weight: 700;265    color: #fff;266    margin-bottom: 8px;267}268 269.stat-label {270    font-size: 16px;271    color: rgba(255, 255, 255, 0.9);272}273 274/* About Section */275.about {276    padding: 80px 24px;277    background: #0f0f23;278}279 280.about h2 {281    text-align: center;282    font-size: 36px;283    margin-bottom: 48px;284    color: #fff;285}286 287.workflow {288    display: flex;289    justify-content: center;290    align-items: center;291    gap: 24px;292    flex-wrap: wrap;293}294 295.workflow-step {296    background: #1e1e2f;297    border: 1px solid #2a2a3e;298    border-radius: 12px;299    padding: 32px;300    text-align: center;301    flex: 1;302    min-width: 250px;303    max-width: 300px;304}305 306.step-number {307    width: 48px;308    height: 48px;309    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);310    border-radius: 50%;311    display: flex;312    align-items: center;313    justify-content: center;314    font-size: 24px;315    font-weight: 700;316    color: #fff;317    margin: 0 auto 16px;318}319 320.workflow-step h3 {321    color: #fff;322    margin-bottom: 12px;323}324 325.workflow-step p {326    color: #b0b0b0;327}328 329.workflow-arrow {330    font-size: 32px;331    color: #667eea;332}333 334/* Use Cases */335.use-cases {336    padding: 80px 24px;337    background: #1a1a2e;338}339 340.use-cases h2 {341    text-align: center;342    font-size: 36px;343    margin-bottom: 48px;344    color: #fff;345}346 347.use-cases-grid {348    display: grid;349    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));350    gap: 24px;351}352 353.use-case {354    background: #1e1e2f;355    border: 1px solid #2a2a3e;356    border-radius: 12px;357    padding: 32px;358    text-align: center;359}360 361.use-case h3 {362    font-size: 20px;363    margin-bottom: 12px;364    color: #fff;365}366 367.use-case p {368    color: #b0b0b0;369}370 371/* CTA Section */372.cta {373    padding: 80px 24px;374    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f23 100%);375    text-align: center;376}377 378.cta h2 {379    font-size: 36px;380    margin-bottom: 16px;381    color: #fff;382}383 384.cta p {385    font-size: 18px;386    color: #b0b0b0;387    margin-bottom: 32px;388}389 390.cta-buttons {391    display: flex;392    gap: 16px;393    justify-content: center;394    margin-bottom: 24px;395}396 397.btn-primary-large, .btn-secondary-large {398    padding: 16px 48px;399    border-radius: 8px;400    text-decoration: none;401    font-weight: 600;402    font-size: 18px;403    transition: transform 0.3s;404}405 406.btn-primary-large {407    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);408    color: #fff;409}410 411.btn-secondary-large {412    background: rgba(255, 255, 255, 0.05);413    color: #e0e0e0;414    border: 1px solid #2a2a3e;415}416 417.btn-primary-large:hover, .btn-secondary-large:hover {418    transform: translateY(-2px);419}420 421.disclaimer {422    font-size: 14px;423    color: #888;424    margin-top: 16px;425}426 427/* Footer */428footer {429    background: #1a1a2e;430    border-top: 1px solid #2a2a3e;431    padding: 40px 24px 24px;432}433 434.footer-content {435    display: grid;436    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));437    gap: 32px;438    margin-bottom: 32px;439}440 441.footer-section h4 {442    color: #fff;443    margin-bottom: 12px;444}445 446.footer-section p {447    color: #b0b0b0;448    font-size: 14px;449}450 451.footer-bottom {452    text-align: center;453    padding-top: 24px;454    border-top: 1px solid #2a2a3e;455    color: #888;456    font-size: 14px;457}458 459/* Responsive */460@media (max-width: 768px) {461    .hero-content h1 {462        font-size: 32px;463    }464    465    .subtitle {466        font-size: 18px;467    }468    469    .workflow-arrow {470        display: none;471    }472    473    .nav-links {474        gap: 16px;475    }476}477 478 479/* Tech Stack Grid */480.tech-grid {481    display: grid;482    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));483    gap: 16px;484    margin-top: 16px;485}486 487.tech-item {488    background: rgba(102, 126, 234, 0.1);489    padding: 12px 16px;490    border-radius: 8px;491    border: 1px solid rgba(102, 126, 234, 0.3);492}493 494.tech-item strong {495    color: #667eea;496    display: block;497    margin-bottom: 4px;498}499 500/* Algorithm Tags */501.algo-grid {502    display: flex;503    flex-wrap: wrap;504    gap: 12px;505    margin-top: 16px;506}507 508.algo-tag {509    background: rgba(255, 107, 107, 0.1);510    color: #ff6b6b;511    padding: 8px 16px;512    border-radius: 20px;513    border: 1px solid rgba(255, 107, 107, 0.3);514    font-size: 14px;515    font-weight: 500;516}517 518.algo-tag.defense {519    background: rgba(81, 207, 102, 0.1);520    color: #51cf66;521    border-color: rgba(81, 207, 102, 0.3);522}523 524 525/* Tech Stack Section */526.tech-stack {527    padding: 80px 24px;528    background: #0f0f23;529}530 531.tech-stack h2 {532    text-align: center;533    font-size: 36px;534    margin-bottom: 48px;535    color: #fff;536}537 538.tech-categories {539    display: grid;540    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));541    gap: 24px;542}543 544.tech-category {545    background: #1e1e2f;546    border: 1px solid #2a2a3e;547    border-radius: 12px;548    padding: 32px;549    transition: transform 0.3s, border-color 0.3s;550}551 552.tech-category:hover {553    transform: translateY(-4px);554    border-color: #667eea;555}556 557.tech-category h3 {558    color: #fff;559    margin-bottom: 20px;560    font-size: 20px;561}562 563.tech-tags {564    display: flex;565    flex-wrap: wrap;566    gap: 10px;567}568 569.tech-tag {570    background: rgba(102, 126, 234, 0.1);571    color: #667eea;572    padding: 8px 16px;573    border-radius: 20px;574    border: 1px solid rgba(102, 126, 234, 0.3);575    font-size: 14px;576    font-weight: 500;577    transition: all 0.3s;578}579 580.tech-tag:hover {581    background: rgba(102, 126, 234, 0.2);582    transform: scale(1.05);583}584 585.tech-tag.attack {586    background: rgba(255, 107, 107, 0.1);587    color: #ff6b6b;588    border-color: rgba(255, 107, 107, 0.3);589}590 591.tech-tag.attack:hover {592    background: rgba(255, 107, 107, 0.2);593}594 595.tech-tag.defense {596    background: rgba(81, 207, 102, 0.1);597    color: #51cf66;598    border-color: rgba(81, 207, 102, 0.3);599}600 601.tech-tag.defense:hover {602    background: rgba(81, 207, 102, 0.2);603}604 605/* Smooth Scroll */606html {607    scroll-behavior: smooth;608}609