:root { --navy:#101828; --violet:#635bff; --cream:#f8f7f4; --muted:#667085; }
html { scroll-behavior:smooth; overflow-x:clip; } body { margin:0; overflow-x:clip; background:var(--cream); color:var(--navy); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.site-nav { position:fixed; top:0; z-index:10; width:100%; border-bottom:1px solid #eaecf0; background:#fffffff2; backdrop-filter:blur(14px); }
.nav-inner { max-width:1152px; margin:auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { flex-shrink:0; color:var(--navy); font-weight:900; text-decoration:none; font-size:17px; white-space:nowrap; } .logo b,.violet-text { color:var(--violet); } .logo b { font-weight:900; }
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:7px; } .nav-links a { padding:9px 5px; color:#667085; font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap; } .nav-links a:hover,.nav-links a.active { color:var(--violet); } .nav-links a.active:not(.nav-cta) { position:relative; } .nav-links a.active:not(.nav-cta):after { content:""; position:absolute; right:5px; bottom:1px; left:5px; height:2px; border-radius:2px; background:var(--violet); }
.nav-cta,.button.primary { margin-left:8px; background:var(--navy); color:#fff!important; border-radius:999px; padding:10px 15px!important; } .menu-toggle { display:none; border:0; background:none; font-size:23px; }
.hero { min-height:100vh; padding:150px max(24px,calc((100vw - 1152px)/2)) 90px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; background-image:linear-gradient(#635bff12 1px,transparent 1px),linear-gradient(90deg,#635bff12 1px,transparent 1px); background-size:36px 36px; animation:grid-drift 18s linear infinite; }
.availability { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid #635bff33; border-radius:999px; color:var(--violet); background:#fff; font-size:14px; font-weight:800; } .availability i { width:9px; height:9px; border-radius:50%; background:#12b76a; box-shadow:0 0 0 5px #12b76a2b; animation:pulse 1.6s infinite; }
.hero h1,.page-heading h1 { font-size:clamp(52px,8vw,94px); line-height:1.02; margin:25px 0 0; letter-spacing:-.06em; } .hero-sub { font-size:clamp(22px,3.5vw,38px); font-weight:750; margin:24px 0 0; letter-spacing:-.025em; } .hero-description,.page-heading p { max-width:590px; margin-top:18px; color:var(--muted); font-size:16px; line-height:1.75; }
.cursor { display:inline-block; width:3px; height:1em; margin-left:7px; background:var(--violet); animation:blink .8s infinite; vertical-align:-.1em; } .actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; } .button { display:inline-block; padding:13px 21px; text-decoration:none; font-weight:800; border-radius:999px; transition:.25s; } .button:hover { transform:translateY(-3px); } .button.secondary { border:1px solid #d0d5dd; color:var(--navy); background:#fff; }
.profile-wrap { position:relative; width:min(100%,420px); margin:auto; } .profile-photo { position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:34% 34% 12px 12px; box-shadow:0 25px 65px #1018282b; } .profile-glow { position:absolute; inset:-30px; background:#635bff38; filter:blur(35px); border-radius:50%; } .profile-skill { position:absolute; z-index:4; display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid #ffffffaa; border-radius:50%; color:#fff; background:#101828d9; box-shadow:0 10px 25px #1018282b; font-size:14px; font-weight:900; animation:float-badge 4s ease-in-out infinite; } .skill-facebook { top:4%; left:-25px; background:#1877f2d9; } .skill-google { top:10%; right:-28px; background:#4285f4d9; animation-delay:.4s; } .skill-gtm { top:48%; left:-38px; background:#246f8fd9; animation-delay:.8s; } .skill-ga4 { right:-25px; bottom:29%; background:#f59e0bd9; animation-delay:1.2s; } .skill-heygen { bottom:4%; left:-25px; background:#7c3aedd9; animation-delay:1.6s; }
.profile-wrap:before { content:""; position:absolute; z-index:0; inset:12% -8% -6%; border:1px solid #635bff55; border-radius:35% 35% 14px 14px; transform:rotate(5deg); } .profile-badge { position:absolute; z-index:2; right:-18px; bottom:28px; display:flex; align-items:center; gap:10px; min-width:164px; padding:13px 15px; border:1px solid #ffffff2b; border-radius:17px; color:#fff; background:linear-gradient(135deg,#101828,#312e81); box-shadow:0 15px 35px #10182842; animation:float-badge 4s ease-in-out infinite; } .profile-badge b { color:#b7b2ff; font-size:35px; line-height:1; letter-spacing:-.08em; } .profile-badge span { color:#eef0ff; font-size:11px; font-weight:800; line-height:1.35; } .trust-line { display:flex; gap:9px; align-items:center; margin-top:42px; color:var(--muted); font-size:13px; font-weight:800; } .trust-line span { color:var(--violet); }
.signature-hero { position:relative; isolation:isolate; } .signature-hero:before { content:"R"; position:absolute; z-index:-1; right:5%; top:8%; color:#635bff0d; font-size:clamp(280px,38vw,560px); font-weight:900; line-height:.8; pointer-events:none; } .eyebrow { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.18em; } .actions .button span { margin-left:8px; } .trust-dots { color:#98a2b3!important; letter-spacing:5px; }
.orbit { position:absolute; z-index:0; border:1px solid #635bff4d; border-radius:50%; pointer-events:none; } .orbit-one { inset:-9% -13% 8%; transform:rotate(-23deg); } .orbit-two { inset:7% -16% -13%; transform:rotate(28deg); border-color:#12b76a55; } .floating-label { position:absolute; z-index:3; padding:10px 13px; border:1px solid #ffffffb8; border-radius:10px; color:#fff; background:#101828cc; backdrop-filter:blur(12px); font-size:9px; letter-spacing:.13em; line-height:1.45; box-shadow:0 10px 25px #1018282b; } .floating-label b { color:#b7b2ff; font-size:11px; } .label-top { left:-42px; top:18%; transform:rotate(-8deg); } .label-bottom { right:-37px; bottom:9%; color:#d7dbea; transform:rotate(5deg); } .label-bottom span { color:#b7b2ff; font-size:17px; margin-left:12px; } .experience-label { padding:12px 16px; color:#fff; font-size:11px; font-weight:900; letter-spacing:.1em; } .experience-label b { color:#b7b2ff; font-size:13px; letter-spacing:.08em; }
.skill-marquee { overflow:hidden; border-top:1px solid #eaecf0; border-bottom:1px solid #eaecf0; background:#fff; white-space:nowrap; } .skill-marquee div { display:inline-block; min-width:100%; padding:18px 0; color:#98a2b3; font-size:12px; font-weight:900; letter-spacing:.2em; animation:marquee 28s linear infinite; } .skill-marquee span { margin:0 22px; color:var(--violet); }
.bento-heading { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; } .bento-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:15px; margin-top:42px; } .bento-card { position:relative; min-height:190px; padding:25px; overflow:hidden; border-radius:22px; box-shadow:0 16px 45px #10182818; transition:.3s; } .bento-card:hover { transform:translateY(-7px) rotate(-1deg); box-shadow:0 25px 55px #10182822; } .bento-card strong { display:block; margin-top:35px; font-size:31px; line-height:1; letter-spacing:-.05em; } .bento-card p { max-width:190px; margin-top:20px; line-height:1.5; font-size:13px; } .bento-card i { position:absolute; right:24px; bottom:22px; font-size:22px; font-style:normal; } .bento-index { font-size:11px; font-weight:900; opacity:.65; } .bento-dark { color:#fff; background:var(--navy); } .bento-dark i { color:#b7b2ff; } .bento-violet { color:#fff; background:var(--violet); } .bento-violet i { color:#d7f9e9; } .bento-number { display:flex; flex-direction:column; justify-content:center; background:#d7f9e9; } .bento-number strong { margin:0; color:var(--navy); font-size:75px; } .bento-number span { color:#475467; font-weight:800; } .bento-number i { color:var(--violet); }
.home-section,.inner-page { max-width:1152px; margin:auto; padding:110px 24px; } .section-label { color:var(--violet); font-size:13px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; } h2 { font-size:clamp(36px,5vw,60px); line-height:1.08; margin:20px 0; letter-spacing:-.04em; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; } .stats div { background:#fff; border-radius:18px; padding:28px; box-shadow:0 15px 45px #10182812; } .stats strong { display:block; color:var(--violet); font-size:48px; } .stats span { color:var(--muted); font-weight:700; } .section-link { text-align:right; margin-top:32px; } .section-link a { color:var(--violet); font-weight:800; text-decoration:none; }
.home-two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; } .large-copy { color:var(--muted); font-size:18px; line-height:1.8; } .text-link { color:var(--violet); font-weight:900; text-decoration:none; } .dark-section { padding:110px max(24px,calc((100vw - 1152px)/2)); color:#fff; background:var(--navy); } .light-label { color:#b7b2ff; } .dark-copy { color:#c4c7d0; } .light-button { color:var(--navy); background:#fff; } .experience-preview { margin-top:48px; border-top:1px solid #ffffff2b; } .preview-row { display:grid; grid-template-columns:60px 1fr 1fr; gap:20px; padding:22px 0; border-bottom:1px solid #ffffff2b; } .preview-row span,.preview-row em { color:#b7b2ff; font-style:normal; } .skill-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; } .skill-preview-card { display:flex; justify-content:space-between; padding:22px; border:1px solid #eaecf0; border-radius:16px; color:var(--navy); background:#fff; font-weight:900; text-decoration:none; transition:.25s; } .skill-preview-card:hover { color:var(--violet); transform:translateY(-3px); } .education-strip { max-width:1152px; margin:auto; padding:90px 24px; display:flex; justify-content:space-between; gap:30px; align-items:end; } .education-strip h2 { max-width:650px; } .education-strip p { color:var(--muted); } .home-contact { padding:100px max(24px,calc((100vw - 1152px)/2)); color:#fff; background:var(--violet); } .home-contact h2 { max-width:700px; }
.page-heading { padding:100px 0 55px; } .page-heading p { margin-top:20px; } .jobs { display:grid; gap:18px; } .job-card { display:grid; grid-template-columns:60px 1fr; gap:18px; padding:30px; border-radius:20px; background:#fff; box-shadow:0 15px 45px #10182810; } .job-number { color:var(--violet); font-weight:900; } .job-card h3 { margin:0; font-size:24px; } .job-card p { color:var(--muted); line-height:1.7; margin:8px 0 0; } .job-card .violet-text { font-weight:800; color:var(--violet); }
.skill-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 28px; padding:8px; border-radius:14px; background:#fff; box-shadow:0 10px 30px #1018280d; } .skill-tab { border:0; border-radius:9px; padding:10px 14px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:800; } .skill-tab.active,.skill-tab:hover { color:#fff; background:var(--violet); } .skill-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .skill-item-card { display:flex; flex-direction:column; gap:10px; min-height:82px; padding:20px; border-radius:16px; background:#fff; box-shadow:0 12px 35px #1018280d; } .skill-item-card span { color:var(--violet); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .skill-item-card strong { font-size:17px; }
.split-page { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; min-height:80vh; } .about-photo { width:100%; border-radius:25px; max-height:570px; object-fit:cover; object-position:center top; } .contact-page { min-height:80vh; padding:190px max(24px,calc((100vw - 1152px)/2)) 100px; background:var(--navy); color:#fff; } .contact-page h1 { font-size:clamp(55px,8vw,100px); line-height:1; letter-spacing:-.06em; } .contact-page h1 span { color:#b7b2ff; } .contact-page p { color:#c4c7d0; font-size:18px; line-height:1.7; } .contact-email { display:inline-block; margin:25px 0 5px; padding:14px 22px; border-radius:999px; background:#fff; color:var(--violet); font-weight:900; text-decoration:none; }
.education-list,.service-grid { display:grid; gap:16px; } .education-list article,.service-grid article { padding:26px; border-radius:18px; background:#fff; box-shadow:0 15px 45px #10182810; } .education-list b { display:block; font-size:21px; } .education-list span { display:block; margin-top:8px; color:var(--muted); } .service-grid { grid-template-columns:repeat(3,1fr); } .service-grid article span { color:var(--violet); font-weight:900; } .service-grid h3 { font-size:21px; margin:18px 0 8px; } .service-grid p { color:var(--muted); line-height:1.6; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .portfolio-card { overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 15px 45px #10182810; transition:transform .25s,box-shadow .25s; } .portfolio-card:hover { transform:translateY(-6px); box-shadow:0 22px 55px #1018281b; } .portfolio-image-button { position:relative; display:block; width:100%; padding:0; border:0; cursor:zoom-in; background:#101828; } .portfolio-image-button img { display:block; width:100%; height:230px; object-fit:cover; transition:transform .35s,opacity .35s; } .portfolio-image-button span { position:absolute; right:12px; bottom:12px; padding:7px 10px; border-radius:999px; color:#fff; background:#101828cc; font-size:11px; font-weight:800; opacity:0; transition:opacity .25s; } .portfolio-card:hover .portfolio-image-button img { transform:scale(1.06); opacity:.8; } .portfolio-card:hover .portfolio-image-button span { opacity:1; } .portfolio-card>div { padding:17px 18px 20px; } .portfolio-card small { color:var(--violet); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .portfolio-card h3 { margin:7px 0 0; font-size:17px; } .portfolio-preview-grid .portfolio-card:nth-child(2) { transform:translateY(20px); } .portfolio-preview-grid .portfolio-card:nth-child(2):hover { transform:translateY(13px); } .lightbox { position:fixed; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; background:#101828ed; animation:reveal .25s ease both; } .lightbox img { max-width:min(100%,1000px); max-height:80vh; border-radius:12px; object-fit:contain; box-shadow:0 25px 80px #0008; } .lightbox p { margin:15px 0 0; color:#fff; font-weight:800; } .lightbox-close { position:absolute; top:20px; right:28px; border:0; color:#fff; background:none; cursor:pointer; font-size:42px; line-height:1; }
.modern-page { padding-top:125px; } .page-hero-panel { position:relative; overflow:hidden; padding:55px clamp(24px,6vw,75px); border-radius:30px; color:#fff; background:linear-gradient(125deg,#101828,#263b71 58%,#635bff); box-shadow:0 25px 70px #10182824; } .page-hero-panel:after { content:"✦"; position:absolute; right:8%; top:12%; color:#ffffff1f; font-size:170px; line-height:1; } .page-hero-panel .section-label { color:#c7c4ff; } .page-hero-panel h1 { position:relative; z-index:1; max-width:800px; } .page-hero-panel p { position:relative; z-index:1; max-width:620px; color:#d7dbea; } .hero-mini-stats { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:30px; margin-top:35px; } .hero-mini-stats span { color:#d7dbea; } .hero-mini-stats b { display:block; color:#fff; font-size:29px; }
.modern-page > .page-hero-panel + .skill-tabs,
.modern-page > .page-hero-panel + .timeline,
.modern-page > .page-hero-panel + .education-list,
.modern-page > .page-hero-panel + .service-grid,
.modern-page > .page-hero-panel + .about-content,
.modern-page > .page-hero-panel + .contact-layout,
.modern-page > .page-hero-panel + .faq-list { margin-top:52px; }
.modern-page > .page-hero-panel + .skill-tabs { position:sticky; top:72px; z-index:9; }
.modern-page > .page-hero-panel + .skill-tabs { margin-bottom:28px; }
.modern-page > .page-hero-panel + .timeline { margin-bottom:20px; }
.timeline { position:relative; margin:55px 0 20px; padding-left:34px; } .timeline:before { content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(var(--violet),#d9d7ff); } .timeline .job-card { position:relative; margin-bottom:20px; border-left:4px solid var(--violet); transition:transform .25s,box-shadow .25s; } .timeline .job-card:before { content:""; position:absolute; left:-45px; top:34px; width:15px; height:15px; border:4px solid var(--cream); border-radius:50%; background:var(--violet); box-shadow:0 0 0 3px #635bff33; } .timeline .job-card:hover,.service-card:hover,.education-card:hover { transform:translateY(-6px); box-shadow:0 22px 55px #10182819; }
.education-card { display:grid; grid-template-columns:55px 1fr 30px; align-items:center; gap:22px; transition:transform .25s,box-shadow .25s; } .education-card>span { color:var(--violet); font-size:28px; font-weight:900; } .education-card b { font-size:21px; } .education-card i { color:var(--violet); font-size:22px; font-style:normal; } .learning-note { display:flex; flex-direction:column; gap:12px; margin-top:45px; padding:28px; border-radius:18px; background:#d7f9e9; } .learning-note strong { font-size:25px; }
.learning-tree { position:relative; margin-top:90px; padding:55px clamp(20px,5vw,70px); overflow:hidden; border-radius:30px; color:#fff; background:linear-gradient(145deg,#101828,#193c48 55%,#287968); box-shadow:0 25px 70px #10182824; }
.learning-trunk:before { content:""; position:absolute; z-index:0; left:50%; top:45px; bottom:42px; width:3px; border-radius:4px; background:linear-gradient(#8de0b1,#635bff); opacity:.75; pointer-events:none; }
.learning-tree-heading { position:relative; z-index:1; max-width:650px; }
.learning-tree-heading .section-label { color:#a9e7c1; }
.learning-tree-heading p { max-width:560px; color:#c9e2df; line-height:1.7; }
.learning-trunk { position:relative; margin-top:45px; }
.learning-roots { position:relative; z-index:1; width:max-content; margin:0 auto 58px; padding:14px 22px; border:1px solid #ffffff38; border-radius:999px; color:#fff; background:#ffffff16; font-size:12px; font-weight:900; letter-spacing:.12em; }
.learning-roots span { color:#a9e7c1; }
.learning-branches { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); gap:22px 70px; }
.learning-branch { position:relative; padding:22px; border:1px solid #ffffff26; border-radius:20px; background:#ffffff0d; backdrop-filter:blur(8px); transition:transform .25s,border-color .25s,background .25s; }
.learning-branch:hover { transform:translateY(-4px); border-color:#a9e7c1aa; background:#ffffff16; }
.learning-branch:before { content:""; position:absolute; top:43px; width:35px; height:2px; background:#8de0b1; }
.learning-branch:nth-child(odd):before { right:-70px; }
.learning-branch:nth-child(even):before { left:-70px; }
.learning-branch-head { display:flex; align-items:flex-start; gap:14px; }
.learning-branch-head>span { color:#a9e7c1; font-size:13px; font-weight:900; }
.learning-branch-head small { color:#a9e7c1; font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.learning-branch-head h3 { margin:6px 0 0; font-size:19px; }
.learning-leaves { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; padding-top:16px; border-top:1px solid #ffffff1c; }
.learning-leaf { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #ffffff22; border-radius:999px; color:#e4f3ef; background:#ffffff0a; font:inherit; font-size:11px; text-align:left; }
.learning-leaf b { color:#a9e7c1; font-size:10px; }
@media(max-width:767px){.learning-tree{margin-top:65px;padding:38px 20px}.learning-trunk:before{left:18px;top:45px}.learning-roots{margin-left:0}.learning-branches{grid-template-columns:1fr;gap:16px}.learning-branch{margin-left:20px}.learning-branch:before{left:-20px!important;right:auto!important;width:20px}.learning-leaf{max-width:100%}}
.experience-hero { background:linear-gradient(125deg,#101828,#26395f 58%,#7b61ff); }
.skills-hero { background:linear-gradient(125deg,#101828,#244d70 55%,#6d65e8); }
.about-hero { background:linear-gradient(125deg,#101828,#513d70 58%,#c96574); }
.portfolio-hero { background:linear-gradient(125deg,#101828,#304d79 55%,#6286d9); }
.education-hero { background:linear-gradient(125deg,#101828,#285d62 58%,#42aa83); }
.services-hero { background:linear-gradient(125deg,#101828,#5b3d73 58%,#d16b5f); }
.contact-hero { background:linear-gradient(125deg,#101828,#3c3978 58%,#7164d8); }
.faq-hero { background:linear-gradient(125deg,#101828,#285968 58%,#43a887); }
.about-content { display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:center; margin-top:55px; } .about-content .about-photo { max-height:430px; }
.about-story { display:grid; gap:18px; } .about-story h2 { max-width:650px; margin:0; font-size:clamp(30px,4vw,52px); line-height:1.08; letter-spacing:-.04em; } .about-story p { max-width:650px; color:#667085; line-height:1.75; } .about-story .large-copy { margin:0; color:var(--navy); }
.about-experience { margin-top:105px; padding:55px 0; border-top:1px solid #eaecf0; } .about-section-heading { display:grid; grid-template-columns:1fr .85fr; gap:55px; align-items:end; } .about-section-heading h2 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.08; letter-spacing:-.04em; } .about-section-heading p { margin:0; color:#667085; line-height:1.7; } .about-experience-list { display:grid; gap:12px; margin-top:42px; } .about-experience-list article { display:grid; grid-template-columns:55px 1fr; gap:22px; padding:25px; border:1px solid #e4e7ec; border-radius:20px; background:#fff; box-shadow:0 12px 35px #1018280a; } .about-experience-list article>span { color:var(--violet); font-size:13px; font-weight:900; } .about-experience-list small { color:#98a2b3; font-size:10px; font-weight:900; letter-spacing:.13em; } .about-experience-list h3 { margin:8px 0 4px; font-size:22px; } .about-experience-list strong { color:var(--violet); font-size:13px; } .about-experience-list p { max-width:780px; margin:13px 0 0; color:#667085; line-height:1.7; }
.about-proof { display:grid; grid-template-columns:.8fr 1.2fr; gap:55px; margin-top:100px; padding:55px 0; border-top:1px solid #eaecf0; border-bottom:1px solid #eaecf0; } .about-proof h2 { margin:0 0 14px; font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.04em; } .about-proof-intro p { color:#667085; line-height:1.7; } .about-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch; } .about-proof-grid article { display:flex; min-height:150px; flex-direction:column; justify-content:space-between; padding:20px; border:1px solid #e4e7ec; border-radius:18px; background:#fff; box-shadow:0 12px 30px #1018280a; } .about-proof-grid b { color:var(--violet); font-size:27px; letter-spacing:-.04em; } .about-proof-grid span { color:#667085; font-size:13px; line-height:1.5; } .about-focus { display:grid; grid-template-columns:.65fr 1.35fr auto; gap:30px; align-items:center; margin:75px 0 20px; } .about-focus-list { display:flex; flex-wrap:wrap; gap:9px; } .about-focus-list span { padding:10px 13px; border:1px solid #dfe3eb; border-radius:999px; color:#475467; background:#fff; font-size:12px; font-weight:800; }
.contact-modern { padding-bottom:120px; } .contact-hero { background:linear-gradient(125deg,#101828,#312e81 58%,#635bff); } .contact-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:50px; margin-top:45px; } .contact-form { display:grid; gap:18px; padding:30px; border-radius:22px; background:#fff; box-shadow:0 18px 55px #10182812; } .contact-form label { display:grid; gap:8px; color:var(--navy); font-size:13px; font-weight:900; } .contact-form input,.contact-form select,.contact-form textarea { width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid #d0d5dd; border-radius:10px; color:var(--navy); background:#fff; font:inherit; font-weight:400; resize:vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#98a2b3; font-weight:400; opacity:1; } .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { outline:2px solid #635bff44; border-color:var(--violet); } .contact-form button { border:0; cursor:pointer; font:inherit; } .contact-aside { padding:22px 0; } .contact-aside h2 { margin-top:16px; font-size:clamp(34px,4vw,54px); } .contact-aside .large-copy { margin:20px 0 26px; } .contact-details { padding:8px 24px 22px; border:1px solid #e4e7ec; border-radius:22px; background:#fff; box-shadow:0 18px 45px #1018280b; } .contact-details a { text-decoration:none; } .contact-email,.whatsapp-link { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; box-sizing:border-box; padding:17px 0; margin:0; font-weight:900; } .contact-email { color:var(--violet); border-bottom:1px solid #eaecf0; } .whatsapp-link { color:#0b9f68; border-bottom:1px solid #eaecf0; } .contact-details a span { margin-right:auto; color:#98a2b3; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .contact-details a b { font-size:17px; } .contact-social { padding:18px 0; border-bottom:1px solid #eaecf0; } .contact-social .social-links { width:max-content; margin:0; padding:0; border:0; background:none; box-shadow:none; color:var(--violet); } .contact-location { padding-top:17px; } .contact-location p { margin:5px 0; } .contact-aside .contact-phone { margin-top:0; color:var(--navy); font-weight:700; } .faq-list { display:grid; gap:14px; max-width:900px; margin:50px auto 0; } .faq-item { padding:0 24px; border:1px solid #e4e7ec; border-radius:17px; background:#fff; box-shadow:0 12px 35px #1018280a; } .faq-item summary { display:grid; grid-template-columns:45px 1fr 25px; gap:14px; align-items:center; padding:24px 0; cursor:pointer; list-style:none; font-size:18px; font-weight:900; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary span { color:var(--violet); font-size:12px; } .faq-item summary b { color:var(--violet); font-size:24px; font-weight:400; transition:.2s; } .faq-item[open] summary b { transform:rotate(45deg); } .faq-item p { max-width:680px; margin:0 45px 24px 59px; color:var(--muted); line-height:1.7; }
.services-hero { background:linear-gradient(125deg,#101828,#5b2c83 58%,#f04438); } .service-grid .service-card { position:relative; display:flex; min-height:390px; flex-direction:column; overflow:hidden; padding:0 26px 26px; border:1px solid #e4e7ec; background:#fff; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; } .service-card:nth-child(2n) { background:#f7f6ff; } .service-card:hover { border-color:#b9b3ff; box-shadow:0 24px 60px #1018281c; transform:translateY(-9px); } .service-card h3 { max-width:290px; margin:0 0 10px; font-size:21px; line-height:1.18; } .service-card p { flex:1; }
.service-open { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:20px; padding:13px 16px; border:0; border-radius:10px; color:#fff; background:var(--navy); cursor:pointer; font:900 13px inherit; text-align:left; transition:background .25s,transform .25s; } .service-open span { font-size:18px; } .service-open:hover { background:var(--violet); transform:translateY(-2px); }
.portfolio-hero { background:linear-gradient(125deg,#101828,#283b75 55%,#635bff); } .portfolio-home { background:linear-gradient(180deg,#f8f7f4,#f1f0ff); max-width:none; padding-left:max(24px,calc((100vw - 1152px)/2)); padding-right:max(24px,calc((100vw - 1152px)/2)); } .portfolio-home .portfolio-grid { margin-top:26px; } .portfolio-home .skill-tabs { max-width:100%; }
.certificates-hero { background:linear-gradient(125deg,#101828,#284d69 55%,#7966d8); }
.certificate-grid { margin-top:0; }
.certificate-card .portfolio-image-button img { height:245px; object-fit:contain; padding:14px; box-sizing:border-box; background:#f4f5f7; }
.portfolio-watermark { position:absolute; z-index:1; right:12px; bottom:12px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; opacity:.58; text-shadow:0 1px 4px #000; pointer-events:none; }
.lightbox-image-wrap { position:relative; display:inline-block; max-width:100%; }
.lightbox-image-wrap img { display:block; max-width:100%; max-height:78vh; }
.lightbox-image-wrap .portfolio-watermark { right:16px; bottom:16px; font-size:12px; opacity:.68; }
.certificate-card>div { min-height:72px; }
.site-footer { max-width:none; margin:auto; padding:38px max(24px,calc((100vw - 1152px)/2)) 28px; color:#c4c7d0; font-size:13px; background:var(--navy); border-top:1px solid #ffffff1c; } .footer-menu { display:flex; align-items:center; justify-content:center; gap:18px; padding-bottom:28px; white-space:nowrap; } .footer-menu a { color:#c4c7d0; text-decoration:none; font-weight:700; } .footer-menu a:hover { color:#fff; } .footer-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-top:24px; border-top:1px solid #ffffff1c; } .footer-bottom>span:first-child { color:#fff; font-weight:800; } .footer-bottom>span:last-child { color:#98a2b3; white-space:nowrap; text-align:right; } .footer-bottom .social-links { justify-self:center; } .social-links { display:flex; align-items:center; gap:8px; } .social-links a { display:inline-flex; width:27px; height:27px; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:50%; color:inherit; font-size:12px; font-weight:900; text-decoration:none; transition:.2s; } .social-links a:hover { color:var(--violet); background:#fff; transform:translateY(-2px); } .home-contact .social-links { position:relative; margin-top:28px; color:#d7dbea; } .contact-aside .social-links { width:max-content; margin-top:24px; margin-bottom:22px; padding:10px 12px; border:1px solid #dfe3eb; border-radius:14px; color:var(--violet); background:#ffffffb8; box-shadow:0 10px 25px #1018280d; } .contact-aside .contact-phone { margin-top:0; } .reveal { opacity:0; transform:translateY(22px); } .reveal.is-visible { animation:reveal .72s cubic-bezier(.22,.61,.36,1) both; }
.page-hero-panel.reveal,.page-hero-panel.reveal.is-visible { opacity:1; transform:none; animation:none; }
.back-to-top { position:fixed; z-index:15; right:24px; bottom:24px; display:grid; width:44px; height:44px; place-items:center; border:1px solid #ffffff33; border-radius:14px; color:#fff; background:var(--navy); box-shadow:0 12px 30px #10182838; cursor:pointer; font:700 22px/1 inherit; opacity:0; visibility:hidden; transform:translateY(12px); transition:.25s ease; } .back-to-top:hover { color:#fff; background:var(--violet); transform:translateY(-3px); } .back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
@keyframes reveal { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none} } @keyframes grid-drift { from{background-position:0 0,0 0}to{background-position:36px 36px,36px 36px} } @keyframes pulse { 50%{box-shadow:0 0 0 10px #12b76a00} } @keyframes blink { 50%{opacity:0} } @keyframes float-badge { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} } @keyframes marquee { from{transform:translateX(0)}to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal.is-visible{animation:none}}
@media(max-width:767px){.nav-inner{padding:16px 20px}.nav-links{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:20px 24px;background:#fff;border-bottom:1px solid #eaecf0}.nav-links a{padding:11px 0;font-size:14px}.nav-cta{margin:6px 0 0!important;text-align:center}.nav-links.open{display:flex}.nav-links a.active:not(.nav-cta):after{display:none}.menu-toggle{display:block}.hero,.split-page,.home-two-col,.bento-heading{grid-template-columns:1fr;min-height:auto}.hero{padding-top:125px}.profile-wrap{max-width:280px}.profile-badge{right:-8px}.profile-skill{font-size:11px;width:32px;height:32px}.skill-facebook{left:0}.skill-google{right:0}.skill-gtm{left:0}.skill-ga4{right:0}.skill-heygen{left:0}.floating-label.label-top{left:0}.floating-label.label-bottom{right:0}.stats,.skill-card-grid,.skill-preview,.service-grid,.bento-grid,.portfolio-grid{grid-template-columns:1fr}.portfolio-preview-grid .portfolio-card:nth-child(2),.portfolio-preview-grid .portfolio-card:nth-child(2):hover{transform:none}.site-footer{padding:32px 20px 24px}.footer-menu{flex-wrap:wrap;justify-content:flex-start;white-space:normal;gap:10px 14px;padding-bottom:22px}.footer-bottom{grid-template-columns:1fr;justify-items:start;gap:16px;padding-top:22px}.footer-bottom .social-links{justify-self:start}.footer-bottom>span:last-child{text-align:left;white-space:normal}.job-card{grid-template-columns:1fr}.contact-page{padding-top:130px}.preview-row{grid-template-columns:35px 1fr}.preview-row em{grid-column:2}}
.back-to-top { right:16px; bottom:16px; width:42px; height:42px; }

body.modal-open { overflow:hidden; }
[hidden] { display:none !important; }
.skill-item-card { position:relative; border:0; text-align:left; font:inherit; cursor:pointer; transition:transform .25s, box-shadow .25s; }
.skill-item-card i { position:absolute; right:18px; bottom:17px; color:var(--violet); font-style:normal; opacity:0; transform:translate(-4px,4px); transition:.25s; }
.skill-item-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px #10182818; }
.skill-item-card:hover i { opacity:1; transform:none; }
.skill-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:#101828b8; backdrop-filter:blur(10px); animation:reveal .25s ease both; }
.skill-modal[hidden] { display:none; }
.skill-modal-card { position:relative; width:min(100%,640px); padding:42px; border:1px solid #ffffff30; border-radius:28px; color:#fff; background:linear-gradient(145deg,#17233d,#392d78 62%,#635bff); box-shadow:0 30px 100px #10182866; }
.skill-modal-card:after { content:"✦"; position:absolute; right:28px; bottom:12px; color:#ffffff1c; font-size:120px; pointer-events:none; }
.skill-modal-card .section-label { position:relative; z-index:1; color:#c7c4ff; }
.skill-modal-card h2,.skill-modal-card p,.skill-modal-footer { position:relative; z-index:1; }
.skill-modal-card h2 { margin:16px 45px 14px 0; font-size:clamp(30px,5vw,48px); letter-spacing:-.04em; }
.skill-modal-card p { max-width:540px; color:#e5e7f3; font-size:18px; line-height:1.75; }
.skill-modal-close { position:absolute; z-index:2; top:18px; right:20px; display:grid; width:40px; height:40px; place-items:center; border:1px solid #ffffff42; border-radius:50%; color:#fff; background:#ffffff18; cursor:pointer; font:400 30px/1 Arial,sans-serif; transition:.2s; }
.skill-modal-close:hover { background:#fff; color:var(--violet); transform:rotate(90deg); }
.skill-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding-top:20px; border-top:1px solid #ffffff2d; }
.skill-modal-footer span { color:#c7cbe0; font-size:13px; }
.service-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:#101828b8; backdrop-filter:blur(10px); animation:reveal .25s ease both; }
.service-modal[hidden] { display:none; }
.service-modal-card { position:relative; width:min(100%,980px); max-height:min(760px,calc(100vh - 48px)); overflow:auto; padding:42px; border:1px solid #ffffff30; border-radius:28px; background:#fff; box-shadow:0 30px 100px #10182866; }
.service-modal-close { position:absolute; z-index:2; top:18px; right:20px; display:grid; width:40px; height:40px; place-items:center; border:1px solid #d0d5dd; border-radius:50%; color:var(--navy); background:#fff; cursor:pointer; font:400 30px/1 Arial,sans-serif; transition:.2s; }
.service-modal-close:hover { color:#fff; background:var(--violet); transform:rotate(90deg); }
.service-modal-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:42px; }
.service-modal-grid h2 { margin:16px 48px 18px 0; font-size:clamp(25px,3.2vw,38px); line-height:1.1; letter-spacing:-.02em; }
.service-modal-grid>div>p { color:var(--muted); font-size:17px; line-height:1.8; }
.service-modal-grid aside { padding:24px; border-radius:22px; background:#f5f3ff; }
.service-modal-grid aside>.section-label { color:var(--violet); }
#service-modal-packages { display:grid; gap:10px; margin:18px 0 22px; }
#service-modal-packages article { padding:15px; border:1px solid #dfe3eb; border-radius:15px; background:#fff; }
#service-modal-packages article.featured { border-color:var(--violet); box-shadow:0 10px 25px #635bff1c; }
#service-modal-packages b { color:var(--navy); font-size:15px; }
#service-modal-packages p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.service-package .package-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.service-package .package-heading strong { color:var(--navy); font-size:24px; }
.service-package .package-meta { display:flex; gap:12px; margin-top:12px; color:#667085; font-size:11px; font-weight:800; }
.service-package .package-meta span + span { padding-left:12px; border-left:1px solid #dfe3eb; }
.service-package ul { display:grid; gap:5px; margin:13px 0 15px; padding:0; list-style:none; color:#475467; font-size:12px; }
.service-package li::before { content:"✓"; margin-right:7px; color:var(--violet); font-weight:900; }
.package-link { display:block; padding:10px 12px; border-radius:9px; color:#fff; background:var(--navy); text-align:center; text-decoration:none; font-size:12px; font-weight:900; }
.service-package.featured .package-link { background:var(--violet); }
.service-card-image { display:block; width:calc(100% + 52px); aspect-ratio:16 / 9; height:auto; margin:0 -26px 24px; object-fit:cover; object-position:center; background:#f2f3f7; border-radius:17px 17px 0 0; }
.service-modal-description h3 { margin:0 0 16px; font-size:25px; }
.service-modal-description h4 { margin:24px 0 8px; font-size:15px; }
.service-modal-description p { margin:0 0 14px; }
.service-modal-description ul { display:grid; grid-template-columns:1fr 1fr; gap:7px 20px; margin:0 0 20px; padding-left:18px; color:var(--muted); line-height:1.55; }
.service-modal-faq { margin-top:34px; padding-top:28px; border-top:1px solid #eaecf0; }
.service-modal-faq .section-label { color:var(--violet); }
.service-modal-faq details { padding:15px 0; border-bottom:1px solid #eaecf0; }
.service-modal-faq summary { display:flex; justify-content:space-between; gap:18px; cursor:pointer; color:var(--navy); font-weight:800; list-style:none; }
.service-modal-faq summary::-webkit-details-marker { display:none; }
.service-modal-faq summary b { color:var(--violet); }
.service-modal-faq p { margin:10px 28px 0 0; color:var(--muted); font-size:14px; line-height:1.65; }
@media(max-width:767px){.skill-modal-card{padding:34px 24px 26px}.skill-modal-card p{font-size:16px}.skill-modal-footer{align-items:flex-start; flex-direction:column}.skill-modal-footer .button{width:100%; text-align:center}}
@media(max-width:767px){.service-modal{padding:14px}.service-modal-card{padding:34px 22px 24px;border-radius:22px}.service-modal-grid{grid-template-columns:1fr;gap:24px}.service-modal-grid>div>p{font-size:16px}.service-modal-grid aside{padding:20px}.service-modal-grid aside .button{width:100%;text-align:center}}
@media(max-width:767px){.service-card-image{width:calc(100% + 52px);margin:0 -26px 22px}.service-modal-description ul{grid-template-columns:1fr}}

/* Home page new sections */
.home-services { background:#fff; }
.home-services .service-grid { grid-template-columns:repeat(3,1fr); margin-top:42px; }
.home-service-grid .service-card { min-height:360px; }
.home-certificates { background:linear-gradient(180deg,#f8f7f4,#f1f0ff); }
.home-certificate-grid { grid-template-columns:repeat(3,1fr); margin-top:42px; }
.home-faq { background:#fff; }
.home-faq .faq-list { max-width:900px; margin:42px auto 0; }
.home-faq .section-link { text-align:right; margin-top:32px; }
@media(max-width:767px){
  .home-services .service-grid,
  .home-certificate-grid { grid-template-columns:1fr; }
}

/* Home page signature sections */
.experience-lab { position:relative; overflow:hidden; padding:120px max(24px,calc((100vw - 1152px)/2)); color:#fff; background:#0b1220; }
.experience-lab:before { content:""; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(#8b83ff18 1px,transparent 1px),linear-gradient(90deg,#8b83ff18 1px,transparent 1px); background-size:44px 44px; transform:perspective(500px) rotateX(55deg) scale(1.8) translateY(35%); transform-origin:center bottom; }
.experience-lab-inner { position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr; gap:85px; align-items:center; }
.experience-intro h2 { max-width:520px; margin:20px 0; font-size:clamp(39px,5vw,68px); }
.experience-intro .button { margin-top:25px; }
.experience-rail { position:relative; display:grid; gap:14px; padding-left:32px; }
.experience-rail:before { content:""; position:absolute; left:7px; top:7px; bottom:7px; width:1px; background:linear-gradient(#635bff,#12b76a); }
.experience-node { position:relative; display:grid; grid-template-columns:55px 1fr 30px; gap:15px; align-items:center; padding:22px 20px; border:1px solid #ffffff18; border-radius:18px; background:#ffffff0a; backdrop-filter:blur(10px); transition:.3s; }
.experience-node:hover { border-color:#8b83ff99; background:#ffffff12; transform:translateX(8px); }
.node-index { color:#b7b2ff; font-size:12px; font-weight:900; letter-spacing:.12em; }
.experience-node strong { font-size:18px; }
.experience-node p { margin:5px 0 3px; color:#b7b2ff; font-size:13px; font-weight:700; }
.experience-node small { color:#98a2b3; font-size:12px; }
.experience-node i { color:#b7b2ff; font-size:20px; font-style:normal; }
.education-orbit { max-width:1152px; margin:auto; padding:120px 24px; }
.education-orbit-head { display:grid; grid-template-columns:1fr .8fr; gap:60px; align-items:end; }
.education-heading { display:grid; gap:26px; }
.education-orbit-head h2 { margin-bottom:0; }
.credential-grid { display:grid; grid-template-columns:1.25fr .875fr .875fr; gap:14px; margin-top:48px; }
.credential-card { position:relative; min-height:145px; padding:25px; overflow:hidden; border:1px solid #e4e7ec; border-radius:22px; background:#fff; box-shadow:0 15px 40px #1018280b; transition:.3s; }
.credential-card:hover { transform:translateY(-7px) rotate(1deg); box-shadow:0 24px 55px #10182818; }
.credential-feature { color:#fff; border-color:#635bff; background:linear-gradient(135deg,#635bff,#312e81); }
.credential-year { display:block; margin-bottom:28px; color:var(--violet); font-size:12px; font-weight:900; letter-spacing:.12em; }
.credential-feature .credential-year { color:#d7d4ff; }
.credential-card small { color:#98a2b3; font-size:10px; font-weight:900; letter-spacing:.14em; }
.credential-card h3 { max-width:330px; margin:10px 0 8px; font-size:20px; line-height:1.2; }
.credential-card p { margin:0; color:#667085; font-size:13px; line-height:1.5; }
.credential-feature p { color:#d7dbea; }
.credential-card>b { position:absolute; right:24px; bottom:20px; color:#b7b2ff; font-size:22px; }
.home-contact { position:relative; overflow:hidden; padding:120px max(24px,calc((100vw - 1152px)/2)); color:#fff; background:linear-gradient(125deg,#101828 0%,#312e81 63%,#635bff 100%); }
.home-contact:before { content:""; position:absolute; width:420px; height:420px; right:-100px; top:-180px; border:1px solid #ffffff30; border-radius:50%; box-shadow:0 0 0 35px #ffffff08,0 0 0 70px #ffffff05; }
.contact-orb { position:absolute; right:16%; bottom:-170px; width:300px; height:300px; border-radius:50%; background:#12b76a; filter:blur(110px); opacity:.28; }
.home-contact h2 { position:relative; max-width:850px; margin:22px 0 18px; font-size:clamp(45px,7vw,88px); }
.home-contact h2 span { color:#b7b2ff; }
.home-contact>p { position:relative; max-width:510px; color:#d7dbea; font-size:18px; line-height:1.7; }
.contact-actions { position:relative; display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:32px; }
.contact-direct { color:#d7dbea; font-size:14px; font-weight:800; text-decoration:none; }
.contact-direct:hover { color:#fff; }
.contact-signature { position:relative; display:flex; justify-content:space-between; gap:20px; margin-top:90px; padding-top:18px; border-top:1px solid #ffffff2b; color:#98a2b3; font-size:12px; font-weight:700; }
@media(max-width:767px){.experience-lab-inner,.education-orbit-head,.about-content,.contact-layout,.about-proof,.about-focus,.about-section-heading{grid-template-columns:1fr;gap:35px}.experience-lab,.education-orbit,.home-contact{padding-top:80px;padding-bottom:80px}.experience-node{grid-template-columns:38px 1fr 20px;padding:17px 14px}.credential-grid{grid-template-columns:1fr;margin-top:30px}.credential-card{min-height:125px}.about-experience{margin-top:70px;padding:40px 0}.about-experience-list{margin-top:30px}.about-experience-list article{grid-template-columns:32px 1fr;padding:20px;gap:14px}.about-experience-list h3{font-size:19px}.about-proof{margin-top:70px;padding:40px 0}.about-proof-grid{grid-template-columns:1fr}.about-focus{margin-top:60px;gap:22px}.contact-signature{flex-direction:column;margin-top:65px}.faq-item{padding:0 16px}.faq-item summary{grid-template-columns:30px 1fr 20px;font-size:16px}.faq-item p{margin:0 20px 22px 44px}}
.contact-social .social-links { margin:0; padding:0; border:0; background:none; box-shadow:none; }
.contact-form .iti { width:100%; }
.contact-form .iti input { padding-left:88px; }
.form-toast { position:fixed; z-index:20; right:24px; bottom:24px; display:flex; align-items:center; gap:11px; max-width:340px; padding:13px 17px; border:1px solid #fecaca; border-radius:14px; color:#991b1b; background:#fff; box-shadow:0 15px 35px #10182824; opacity:0; transform:translateY(14px); transition:.25s ease; }
.form-toast.visible { opacity:1; transform:translateY(0); }
.form-toast span { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; color:#fff; background:#ef4444; font-weight:900; }
.form-toast p { margin:0; color:#7f1d1d; font-size:13px; line-height:1.4; }
@media(max-width:767px){.form-toast{right:16px;bottom:16px;left:16px;max-width:none}.contact-form .iti input{padding-left:84px}}

/* Colorful page cards with consistent structure and page-specific marks */
.page-hero-panel { border:0; box-shadow:0 25px 70px #10182824; }
.page-hero-panel .section-label { color:#c7c4ff; }
.page-hero-panel p,.hero-mini-stats span { color:#d7dbea; }
.hero-mini-stats b { color:#fff; }
.experience-hero { background:linear-gradient(125deg,#101828,#26395f 58%,#7064dc); }
.skills-hero { background:linear-gradient(125deg,#101828,#174d70 55%,#327fc0); }
.about-hero { background:linear-gradient(125deg,#101828,#51345f 58%,#b64f78); }
.portfolio-hero { background:linear-gradient(125deg,#101828,#253f72 55%,#4e73c8); }
.education-hero { background:linear-gradient(125deg,#101828,#20565e 58%,#159276); }
.services-hero { background:linear-gradient(125deg,#101828,#563363 58%,#c96552); }
.contact-hero { background:linear-gradient(125deg,#101828,#302b6d 58%,#6656c7); }
.faq-hero { background:linear-gradient(125deg,#101828,#185568 58%,#168b78); }
.experience-hero:after { content:"↗"; }
.skills-hero:after { content:"✦"; }
.about-hero:after { content:"◎"; }
.portfolio-hero:after { content:"▦"; }
.education-hero:after { content:"◈"; }
.services-hero:after { content:"◌"; }
.contact-hero:after { content:"@"; }
.faq-hero:after { content:"?"; }